In today's mobile-first and responsive web design-crazed climate, it can be easy to neglect the basics. While we learn how to utilize & bend CSS3 media queries to create more immersive web experiences, it can be easy to neglect the original media query, print.
Today, the web is everywhere and additional devices are continuously being released. Each of these mobile devices has a unique interaction pattern and physical form factors that can lead to design and development challenges. By testing your software early and often with actual devices, you'll be more successful in developing device-agnostic experiences across them all. As designers, we're responsible for familiarizing ourselves with the multitude of devices our software may experienced on by actual users and working towards optimizing each of these experiences. It's time to put down your iPhone and get out of your comfort zone.
On the final day of San Diego's 2013 An Event Apart conference, Luke Wroblewski delivered an all day workshop on multi-device web design. Luke managed to deliver a consistently captivating presentation throughout the seven hour workshop. He presented a vast amount of information, (nearly a 250 page workbook!) and practical methods for putting these responsive web design techniques to use. Most importantly, he spent much of the session discussing the history of this interesting subject, imparting the knowledge of how we got this point, justifying the current need for multi-device websites. Here are my notes from his session:
Using substring matching attribute selectors, enables you to add very specific and powerful CSS styling to a page without adding any nasty, non-semantic HTML. I've found that this advanced CSS selector technique is best demonstrated within the common situation of adding colored social media links to your website. As an example, let's say I want two social media links in my footer; each colored with the site's respective primary branding color. Traditionally, I would target each of these elements, with an ID:
While watching a Treehouse video on responsive web design, they threw in a little tidbit that I hadn't come across yet, and found very useful. What's a blog for, if not sharing this stuff? Here's the rub.
I've finally done it! I've launched a long overdue redesign to my personal website. While it's still very much in the beginning stages, this will evolve into my happy place where I'll share notes on design as well as snapshots of professional & personal projects with the world.
My primary goal behind this redesign was to create a device-agnostic experience with a focus on highly readable typography that conveys genuine personality.