A Look Back In Time At Some of The World’s First Websites

Happy birthday World Wide Web!

Yes, the web as we know it turns 26 on March 12. To celebrate, we’re taking a trip back in time to visit some of the web’s first sites to see how they’ve evolved since they first his our screens.

Websites have come a long way. Formerly static, the web is now a highly visual medium. It has become a resource that has reshaped and redefined how we live our lives, interact, conduct business, and store information. Websites didn’t always hold the cachet they do now. These days, a website’s presentation says a lot about the business, product or brand behind the website, which is one of the reasons why designs have become richer and more elaborate.

“The web can be made to work with any type of information, on any device, with any software, in any language. You can link to any piece of information. You don’t need to ask for permission. What you create is limited only by your imagination,” Sir Tim Berners-Lee, Inventor of the World Wide Web, said last year.

And imagination is key to building a web product that stands out. But, as you’ll see here, sometimes a simple design is all you need to stand the test of time.

Customer Spotlight: Stephan van der Hoeven’s Captivating Portfolio

If given a superpower, Netherlands-based visual/web designer Stephan van der Hoeven said he would opt for mind control. This might explain why he chose a career in design given its ability to influence human perception.

Currently, van der Hoeven works full time at ProSpex, a company which develops creative campaigns for B2B lead-generation. He also does freelance work under his own company Medialign. While van der Hoeven primarily identifies as a visual/web designer, he is also known for dabbling in development. Proficient in Dreamweaver, van der Hoeven used the app to build his portfolio site.

When you visit Stephen van der Hoeven’s portfolio site, your attention is immediately consumed by a hypnotizing cloud of black smoke which draws your eye right to his name and job title in the center. This dark introduction then gives way to the bulk of his site with a subtle animation. Clean lines, stark white and soft greys allow the colors of the projects that he’s featured to ‘pop.’

Typography on the Web

I’ve just come back from Amsterdam where I had the chance to give a talk about Typography on the Web at FITC. This two-day festival gathers fans of interactive design, technology and ‘cool shit’. Every year, it’s an opportunity to meet with creative coders, interactive designers and developers who want to learn more about design principles. In my session, I provided an introduction to typography which I thought I would share with you too!

We are surrounded by words. Before jumping in the world of beautiful typefaces, designers need to understand the meaning of those words. They are used to freeze our thoughts and eventually share them. The role of typography is to add meaning to words by design, and sometimes to establish tone. Every day, we face the power of words and typography. If you want to transmit a friendly intent in emails you’ll add a smiley :) On the other hand, if you receive AN EMAIL WRITTEN IN CAPS, YOU MIGHT THINK THAT SOMEONE IS SHOUTING AT YOU!

Graphic designers who master typography are constantly looking for the emotion hidden behind a typeface. I did a short exercise with the FITC attendees – I displayed the text ‘FITC Amsterdam’ in different typefaces to demonstrate the emotion portrayed by each:

Levelling Up With Sass

Using a CSS preprocessor is fast becoming a crucial part of a developer’s workflow. If it isn’t part of your process yet, consider giving it a try! Check out part 1 of this series and get up to speed with basic features such as nesting selectors, variables and mixins.

Using preprocessors can help organize your CSS and reduce redundancy. However, learning more advanced features will make your CSS even more powerful.

This article will focus on stepping up your game with Sass, though many of these techniques will work using Less as well. Just be sure to note the syntax differences.

FITC Amsterdam 2015: Design, Art and Technology Converge

Adobe has been a proud sponsor of FITC events around the world for more than a decade. This year we were thrilled to have attendee Szenia Zadvornykh report back on what was covered at FITC Amsterdam 2015. See what you might have missed below!


FITC is a gathering at the intersection of design, art and technology. Each year, conferences are held in North America, Europe and Asia, bringing together people from all corners of the creative industry. This year’s FITC Amsterdam had another great line-up with international speakers sharing projects, process and insights. Below are just some of the topics, projects and speakers that made an appearance at the event.

As always, web development was a major topic. A number of speakers explored workflow and tools that help face the challenges of developing for a plethora of screens and devices. WebGL made an appearance as well, with Frank Reitberger showing how a little Perlin noise can make an ocean, and David Lenaerts explaining how the latest hardware accelerated rendering techniques can be applied natively in the browser.

Your Questions Answered: Creating a table and centering objects within it using HTML and CSS

Like most of our ‘Your Questions Answered’ posts, we’re going back to the basics. We get all kinds of questions from our users on our forums, Twitter and Facebook. One question that has come up a bunch, which we’ll be covering in this post, is around creating a table and centering objects using HTML and CSS.
Users that have previously styled tables using HTML will find this tutorial relatively simple. However, if you are new to HTML and CSS, you can still create this table without too much effort. We are using Dreamweaver CC for this tutorial.

Let’s get started.

Experts Weigh In: Native App vs. Responsive Website

In an age where mobile adoption continues to grow exponentially across borders, demographics, and industries, companies are challenged with reaching their stakeholders on devices of all sizes with varying levels of computing power.

This leaves the tough question of whether they should build a responsive mobile site that works across multiple devices or build a native mobile app instead. Either direction has its pros and cons.

Should we build a native app or a responsive website?

To help advance the discussion, we reached out to a few experts and picked their brain on this topic. Here’s what they said…

Getting Started with CSS Preprocessors (Less and Sass)

What are CSS preprocessors?

CSS is the language used to make the web beautiful. Preprocessors can be used to help make CSS more beautiful.

CSS preprocessors extend the basic functionalities, overcoming many limitations of traditional CSS by adding features such as variables, nesting selectors and mixins, creating CSS that is more maintainable and efficient.

CSS written in a preprocessed language must also be converted or compiled into traditional CSS syntax. There are many apps that can be used to do this and will be discussed further in this article.

Why make CSS more complicated?

I have to admit, I resisted at first as well. I didn’t want to make CSS more complicated. However, once you get up and running, it’ll be hard to go back to writing regular CSS. The great thing about preprocessors is you can use as little or as many features that you want. So the learning curve is only as steep as you want it to be.

Getting started with even just the basic features will greatly improve your workflow.

There is one thing I’d like to point out. If you are a CSS newbie, it might make more sense to get more comfortable with CSS and best practices first before diving into using preprocessors. A tip for anybody starting out with preprocessors is to look at the CSS that is being compiled to make sure you are still following best practices.

Which one should I choose?

There are three popular preprocessors to choose from: Sass, Less, Stylus.

Ask any web developer and you’ll hear passionate arguments as to which one is better but at the end of the day, it’s a personal choice. My advice is try a couple and figure out which one you works for you. Each tool may have specific features that the others don’t have but the basics and syntax is similar making it easier to learn the others once you have one under your belt.

Personally, I started with Less because I found the documentation easier to read and am now using Sass, mostly because a project I was working on was already using Sass and now I just prefer it!

This article will go over the basics of getting up and running with Sass or Less (sorry Stylus, maybe next time).

Extending the Color Cascade with the CSS currentColor Variable

If you use Sass or LESS, then you probably already use variables in your style sheets and know how useful they are. If you don’t use a preprocessor, then you might be curious what the fuss is all about and why variables are so popular and how they can be useful. In this article, we’re going to get an overview of why variables are useful, and get acquainted with one particular variable: currentColor.

What are variables good for?

Variables in CSS are useful because they allow us to write more DRY (Don’t Repeat Yourself) code. They are also particularly useful for managing and maintaining large-scale projects that contain a lot of repeated values.

One of the most common use cases for variables are color themes/schemes throughout a website or application. With variables, creating and managing color schemes across a CSS document becomes a lot easier. For example, color schemes usually require you to reuse a few color values for different properties in the CSS file. If you want to change the primary color of a scheme, you would normally have to change all occurrences of that color in the style sheet. Using CSS variables, you can define a variable in one place (for example a variable named “primary-color”), assign a color value to it, and then use the variable as a value anywhere you want in the style sheet. Then, when the time comes to change this color, all you would have to do is assign it a different color value, and all occurrences of that variable in the style sheet will be automatically updated.

CSS 2.1 did not introduce variables. (Although, that’s not entirely true, as you will see in this article.) In 2014, native CSS variables that are similar to preprocessor variables were introduced; these variables are arguably even more capable than preprocessor variables. A CSS variable is accepted as a value by all CSS properties.

In addition to the new variables, CSS already comes with a keyword value that is practically also a variable: the currentColor keyword.

Mobile UX Trends for 2015

With mobile web usage outpacing desktop in 2014, and mobile apps accounting for most of the time spent on digitial, the importance of mobile UX is continuing to grow. As well, the boundaries are blurring between device sizes.  It’s becoming harder and harder to distinguish between mobile and tablet, with the ‘phablet,’like the iPhone 6 Plus, – straddling the limits between the two. So what kind of UX trends are going to drive mobile? In this post, I’ll walk you through a handful of them.

Responsive design

figure 1_rwd2

By Tooroot (Own work) [CC BY-SA 3.0], via Wikimedia Commons

Responsive design is of course nothing new, however in the increasingly device and screen size fragmented world we are creating, it will continue to be an important trend. To some it might seem like old news, however many companies, large and small, are still behind the curve in terms of implementing responsive solutions. Expect lots of demand for responsive redesigns of existing sites. Excellent resources exist online such as Brad Frost’s This is Responsive, which details, for example, responsive solutions for navigation patterns. As a web designer in 2015, responsive web design is a bare minimum and a best practice. If you want to read more on responsive design, I wrote a blog series on the topic.

From skeuomorphic to flat to somewhere in between…