Leaving the Horde Behind

20.06.2017 |

Episode #10 of the course Responsive design: An undead introduction by John Rhea

 

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?

• If scripting is available. Can we rely on Javascript to do what we want, or do we need to handle it differently?

• Update Frequency. How quickly will the content on the screen be updated?

And much, much more.

But we can also go beyond media queries and use Javascript and other means to account for a wide variety of other contexts. For instance, we could account for slow connections by loading images after the rest of the site is loaded. We could account for low-computing-power devices by having Javascript process things in the background so they don’t prevent use of the site while everything is processing. The possibilities are endless, and we’re just beginning to think about how we can help make websites available and usable for all (except zombies).

 

Review

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.

Tell Your Story


 

Recommended books

Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems by Steve Krug

Pride and Prejudice and Zombies by Jane Austen, Seth Grahame-Smith

 

Share with friends