responsive design vs fluid design

 tag 10:43 pm on May 15, 2013
A Picture of tag

There seems to be confusion with this a lot, so here’s a mini lunch n learn on the subject.
Responsive design is width driven, meaning the width of your screen determines which design layout to show. As you can see in this image, there are a lot of design considerations if you go full responsive. Never go full responsive. Each supported dimension requires its own design. Each design requires usability consideration and what mobile users are really after. Simply dumping your entire website onto a mobile device is not the answer.

devices

Fluid design is a different beast made very popular by Flash. It’s where elements on the screen act independently of each other – scaling, moving, anchoring – all kinds of fun things as you resize your screen, horizontal or vertical. It is absolutely a real-time function as opposed to the common “snap” of responsive, though that isn’t to say responsive can’t appear fluid, but that’s a more advanced scenario for another time.

The final consideration is this: each of these approaches MUST be considered during the planning phase of your project. They are not simply something added on after the fact. It is a common pitfall that results in a LOT of additional time and effort that could’ve been avoided up front.

x


Truly great relationships start with great communication. We’d love to keep in touch and share news, industry tid-bits and opportunities.

By signing up you are “opting-in” and agree to hear from us now-and-again. Don’t worry, we promise not to use your data to help someone win an election, and you can unsubscribe at any time via the link at the bottom of our emails.