Tue, March 8

·

2 PM - 4 PM

Web Design 101 - Part 1

What it means to design for the web today?

In order to understand how to design for the web we could look at how everything started back in the day. In 1989, Sir. Tim Berners-Lee proposed to create a global hypertext project, which later became known as the World Wide Web.1 The web is an open source information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.

At the beginning the web was composed by text-only pages that could be viewed using a simple line-mode browser. As designers I think it’s crucial to focus on the idea of text-only pages; to the browser every website is a unique file of text.

This is how the very first website looked:

The look of the very first website

And this is how it looks today (yes, it’s still on-line and yes, it’s almost mobile ready!)

The look of the first website today

So, the web is pretty young. It’s still a fairly new medium, that has emerged from the medium of printing, whose skills, design language and conventions strongly influence it. But in the words of John Allsopp we need to understand which of these lessons are appropriate for the web, and which mere rituals.

We are not designing pages but systems of components

This is often seen as a limitation. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.2

So how can we be flexible? Well, first of all we must forget about pixel-perfection.

An undecided designer moving up and down by 1px his or her design

Designers usually want to control everything but we need to rethink this role, to abandon control, and seek a new relationship with the page.

Make pages which are accessible, regardless of the browser, platform or screen that your reader chooses or must use to access your pages.

How can we be accessible? By embracing flexibility: the web wasn’t design to be constrained by a single context.

So, using some explanatory images from Brad Frost we could say that this is how the old contexts looked:

Old context and usage of the web representation

And this is how the new(actual) context looks:

New context and usage of the web representation

It can look scary but actually the power of the web is its ubiquity. But how can we respond and design to such different scenarios?

Responsive Web Design

One of the best practices to overcome all these different contexts is responsive web design. This methodology was first defined by Ethan Marcotte with an article on A List Apart. The approach is describe by these three rules:

  • Fluid grids that ebb and flow with a devices’ screen size
  • Flexible images and media that keep content intact on any resolution
  • Media queries allowing designs to adapt by establishing dimension breakpoints

Fluid grids

Fluids grids are a grid system that change and morph across different screen size. For example if a grid system is composed by 8 columns on a large screen will collapse to a 4 columns system on a smaller display.

Flexible images

Flexible images and media are assets that adapt to the resolution of the device delivering the optimal source for every situation. For example when you access the contents from a smaller device the images are not cut out.

Media queries

A media query is an expression that limits the scope of your styles sheets. Breakpoints help you define where a media query starts and where it ends. For example you could say how big an image can be above or below a certain breakpoint scoping its size within certain resolutions.

Responsive web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on the screen size, platform and orientation.

Summarizing, this is how the web looked:

Image that shows an old PC

This is how it looks:

Image that shows multiple device like smartphones, tablets and laptops

And this how it will look:

Image that shows multiple device like smartphones, tablets, laptops, smartwatch, cars, fridges, and many more

As designers we must acknowledge and embrace unpredictability because nobody knows where the device landscape is going to be. By being responsive we not only serve the current range of devices but we work for also the unforeseen contexts.

Sergey Brin wearing a pair of google glasses

Workshop #1

Let’s try to identify the three criteria that define a responsive project. Choose a website of your preference. Look at it not as a reader but as a designer. Identify breakpoints, media queries and fluid grids. Make a screenshot of each media query and make the grid structure visible.

A gif that shows breakpoints and media queries of bostonglobe.com

From discussion in class