All lives can’t matter until black lives matter.

Easing Into A Responsive Design Workflow

You’ve probably heard about Responsive Design*, but maybe you don’t know how to start designing for it, or maybe it seems like too much work.

I recently came across this very interesting article titled “Design Process In The Responsive Age” (which is actually almost a year old) and believe this is a great “baby step” toward a full responsive design workflow with a dash of Mobile First smarts.

The basics are these

  • before you visually design anything create a wireframe for the phone-sized view (might just be a napkin sketch!)
  • use that wireframe to help design your normal desktop-sized view like you normally do
  • deliver both to your developer and have them work with you to fill in the gaps

This works for websites you’ve already designed, too. Just create the phone-sized wireframe retroactively.

It’s such a simple (and quick!) addition to your process, but it will get you thinking about how content reshuffles and gets prioritized in a limited viewport.
 
I highly recommend you read the article and talk with your developer about this approach. (If you ARE your own developer, have a talk with yourself... just make sure no one else is listening.)
 
* technically speaking Responsive Design refers to using fluid grids, flexible images, and media queries to provide an optimized website layout for variable screen sizes/resolutions.


Earlier Post: Top 5 Regrets of the Dying

Later Post: Engaged Feedback Checklist

All Posts