Responsive web design (RWD) is an approach that is becoming more and more popular if not the way to have a site nowadays. The concept aims at designing sites to embrace the flexibility, and unpredictability of internet browsers and throw away fixed widths. The end goal is to design once and have it presented appropriately everywhere whether it be displayed on a giant monitor or a tiny mobile device.

With this new method on the rise more like routine these days, there are changes in the workflow that every designer/client should be aware of:

  • Content Priority: Info/content first. It’s best to think what info do you want your viewer to see first – especially when an average viewer has a very (very very very) short attention span.
  • Think small, then big – MOBILE FIRST. In this day and age, most check websites on their mobile devices whether it be phones, tablets, phablets etc. so be sure to cater the design more for mobile and work from there for the full-size site on a desktop.
  • Consistency is key.

Our graphic header is a great example of how RWD works showing the original graphic on a laptop and how it may translate to smaller mobile devices.

—————————————-

Helpful articles:

W3Schools – CSS Intro to RWD
W3Schools – HTML Intro to RWD
Smashing Magazine – Responsive Web Design Guidelines and Tutorials

Responsive Web Design in a nutshell:

rwd-content-is-like-water-1980

Show Buttons
Hide Buttons