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