The Future of Web Designhttp://blog.froont.com/brief-history-of-web-design-for-designers/

But let’s talk of the past, first

• 1989 – Pretty much the beginning of web design

• 1995-98 – CSS, JavaScript, Flash and Tables appeared, making sites a lot more accessible

• 2010 – Ethan Marcotte coined the term Responsive Web Design

Fixed Width Design

• All is stagnant

• No control over layout, typography, other elements

• Offers designers lots of control

The fluid grid system: Images and texts are ‘snapped’ into lines. The more lines, the more flexibility. The more flexibility, the more screens it will appear nicely on.

BUT…

• The more lines, the more complicated it could become.

• Think of it like this…you could design a table 8x12 and only use 3x7. Shouldn’t you only build what you need?

Fluid Grid + Flexible Images + Media Queries = Responsive Design

In short, responsive design is defined as having a fluid grid, flexible images and CSS media queries. Responsive Design has become the current industry standard for how a website should be built.

Fluid Design

• Flexible

• The web, by nature, is fluid. Things did and do (or should) flow to be 100% of the screen.

Adaptive, aka Responsive Design (Media Queries) serves different versions of the site to different devices based on common screen sizes and resolutions.

Responsive Design wasn’t possible until media queries were fully supported by modern browsers.

• Media queries allow web designers to change how content appears at different screen sizes.

Responsive Design is based on fluid grid versus adaptive design’s fixed grid.

Think of fluid and adaptive as light switches.

• Fluid is a fader switch that smoothly changes the mood lighting.

• Adaptive is a standard on/off switch. An Iphone has one look. An Ipad has a different.

The reason adaptive/responsive design is not future-proof is because screen sizes and resolutions of popular devices are constantly changing. The argument about responsive design vs. adaptive design, in many ways, mirrors the older debate around fixed width vs. flexible layouts.

So…In a nutshell…

Adaptive – Set of (normally 6 or 7) static layouts.

Responsive – Changes styles fluidly based on the target device.

That said, responsive design is what is used now.

Responsive Web Design: Content First

• Content First is often part of a responsive design strategy. Design can no longer afford to be decoration. It needs to be information that quickly loads and gets users to reap the benefits of a business.

• Design decisions around typography, color and imagery are all meant to serve the needs of the content.

Responsive Web Design: Mobile First

• Mobile First is about designing for the smallest sized device first.

• “Mobile First is not just about how a site is developed. It is about prioritizing content so that important information reaches the people who seek it, no matter what device they use.” David Kizler 10/13

• Mobile First is about designing for the smallest sized device first.

A final reminder…

• The Mockup is the most crucial element in Fluid Design (and in business, too). It is the blueprint you will follow. Without it, you are building a House of Cards.