Leaving the Horde Behind
While width-based media queries and flexible layouts are the meat and potatoes of responsive design as implemented after Ethan Marcotte’s article, they aren’t the only way to follow Mr. Marcotte’s line of reasoning. There are a thousand ways to have a site respond to its environment. Here are just a few you can already use media queries to react differently:
• Aspect ratio. Is this screen 16:9 or 4:3 or any other aspect ratio? (We can also test for min and max aspect ratios.)
• Color. Can a device screen can handle 16 bit, 32 bit, 64 bit, or other types of colors?
• Light Level. How much ambient light exists around the device?
• Orientation. Are we in portrait or landscape?
• If there’s a mouse. Is this a touchscreen that can’t do hover effects? Or is a mouse available?
• Update Frequency. How quickly will the content on the screen be updated?
And much, much more.
We’ve hit a lot of information in the last 10 days. Let’s hit the zombie-destroying highlights again:
1. Creating an environment where a site can respond to its surroundings can dramatically help the usability of the site and keep Aunt Myrtle from howling at the zombies.
2. Responsive design (surprise, surprise) is one of the best options for building sites that work on both mobile and desktop browsers (though native apps and mobile/desktop dedicated sites are also viable).
3. HTML tags and CSS rules are the foundation for websites and thereby, responsive design. Meta FTW.
4. Don’t forget your meta viewport tag or the browser will zoomify. Crush errant containers with the html/body overflow hidden trick.
5. Flex those layout elements so they can stretch and shrink to your site’s design requirements.
6. Use media queries to strategically apply different CSS rules at different sizes.
7. Don’t let images break your flex. Drop a flexible width on them.
8. Shine your bat and oil your shotgun with responsive design best practices to keep those zombies dying at every website load.
9. Best practices can’t save you from a zombie ambush, though. Keep content intact no matter the size. Keep giant images off your phone. Touchscreens can’t hover. And don’t step your design, flex it.
10. Responsive design warfare is just beginning. Get started with screen size, then reach for that utopia where sites respond to every context.
Thanks for taking this post-apocalyptic tour with me. I hope you feel ready to get out there and beat the snot out of the next zombie you see.
Your Brother in Arms,
John C. Rhea
The zombies are on your tail! They’re shuffling ravenously toward your website. Luckily, you know that they’ll get a virtual baseball bat to the head no matter what device they use. But having been immersed in this zombified world, perhaps you’re wondering if there’s a way John could apply his whimsy and storytelling prowess to your needs. Well, there is.
Share with friends