This site is being redesigned as part of our AI & Design Systems course. Sign up to watch me wield AI and design systems to bring it to life, and learn how to apply these concepts and practical tactics to your team’s work.

This Is Responsive: #3

Greetings from beautiful Pittsburgh, Pennsylvania! As I sit amongst unpacked boxes, I am attempting to scrounge together this week's responsive web design resources. But I think they're packed in with the pots and pans, so you might be out of luck.

Approach

Adapt and respond: keeping responsive into the future

Chris Mills (@chrisdavidmills) looks at some useful present-and-future responsive techniques.

Pattern Translations

Jordan Moore (@jordanmoore) discusses how certain patterns don't translate well to non-desktop devices. As someone that is super leery of lightboxes (and other overlays) for mobile, I found myself nodding in agreement. ma

Testing

Ten Things to Remember When Testing RWD

David Blooman (@Davey_Blooman) lays out some wonderful tips for testing and support.

Using the Nintendo DSi browser

Anna Debenham (@anna_debenham) takes a look at the browser on the Nintendo DSi, including its wacky support for fixed positioning. Of course as soon as Anna posted this, people cried out "but no one uses the browser on a Nintendo DSi!". I get sad when people respond to a new device, configuration or browser with immediate animosity. No one's asking you to bend over backwards and optimize for a DSi, but recognize the fact that people with these devices can and do access the web. Strive to be inclusive, cast a broad net and support as many devices as possible to help your site or service reach the broadest audience and preserve the ubiquity of the web.

Debugger, Responsive Design View and more in Firefox Aurora 15

Responsive Design View is coming to some upcoming version of Firefox. It looks like a handy way of testing on multiple viewport sizes. But remember, there's no substitute for testing on real devices.

RWD Quicktip: Responsiveness is a characteristic. Just because your project isn't Grade-A, local, organic, 100% responsive doesn't mean you can't utilize responsive and progressive enhancement techniques.

Images #hotdrama

Responsive Images with Mat Marquis

Jen Simmons (@jensimmons) and Mat Marquis (@wilto) discuss the state of responsive images. I think Wilto needs to incorporate ghosts into his discussion of past, present and future of responsive images. I wonder what the ghost of responsive images past would look like?

Building a Responsive, Mobile-First Navigation Menu

Saddam Azad (@azadcreative) gives a nice tutorial and demo of a complex navigation.

Inspiration

Lotta Nieminen

A beautiful portfolio that utilizes some cool off-canvas layout stuff.

Jessica Hische

Jessica Hische (@jessicahische.is) launched a gorgeous new portfolio. I especially love the teen girl theme in the theme-chooser (the little heart in the top right corner).

Red Bull Music Academy Radio

A beautiful griddy (is that a word?) site with excellent text-on-image treatments. Very elegant.

Anti-Static Design

Nice clean design agency site.

Advertising

Where Does Advertising Fit In A Responsive World?

A good round-up of some of the responsive advertising solutions. Also, I can tell you another place advertising fits, but I'm not sure you'd like it.

Horoscopes

Aries

You've only been testing on your personal mobile phone for too long, and as a result your empathy for users with other devices has waned. Tonight: Buy a test device for under $25. Feel their pain.

Taurus

From now on, you will involuntarily wince whenever you see any mention of '480px' anywhere, ever.

Gemini

People describe you as being very hands-on. Look for opportunities to enhance your experiences with touch events. Get it? Hands-on? Touch events? Oh god what have I become...

Cancer

You will create a playlist consisting solely of "Summertime Girls" by late 90's boy band LFO and listen to it non-stop until September. You will never learn any other lyric besides "I like girls that wear Abercrombie and Fitch". (Fun fact, LFO stands for 'Lyte Funky Ones')

Leo

Remember: it's unacceptable to make fun of fat people, but perfectly acceptable to make fun of fat websites.

Virgo

In a meeting, the team is leaning towards taking the easy way out. Stand up for what's right, despite knowing you're creating more work for yourself.

Libra

Your inate ability to consume large quantities of hot dogs will come in handy when a neighbor drops off leftovers from their 4th of July cookout.

Scorpio

Step outside of your comfort zone and ask a random stranger to fire up your site on his phone. Ask him what he thinks. This could be beginning of a beautiful friendship. Or not. It might get you punched in the face. Who knows.

Sagittarius

Smack your co-worker who has disabled the user's ability to pinch and zoom in the viewport meta tag. It's worth the trip to HR.

Capricorn

Your mind wanders and you start asking questions. "Why 'Retina' screens? Why not 'Cornea' screens? What's wrong with 'Cornea'?" Tonight: get some sleep.

Aquarius

You've become bored with your default mobile browser. Download several others and see how they feel. Even if you revert back to your old browser, keep your new friends handy for testing.

Pisces

DO NOT turn around.

Until Next Time

I hope by this time next week I'll be a little more settled. If you have any resources to share or want to challenge me to an arm wrestling match, feel free to let me know on Twitter.

Brad Frost Hey there! Brad Frost brad@bradfrost.com

I'm Brad Frost, an independent creator, web designer & developer, teacher, speaker, writer, musician, and artist based in Pittsburgh, PA.

Check out my courses AI & Design Systems course Atomic Design Certification Course Subatomic: The Complete Guide to Design Tokens course Get my newsletter

I like connecting with people directly without algorithms and machines getting in the way, and my newsletter helps me do that. Subscribe to get my latest thinking and interesting links about design, technology, music, art, creativity, and some random fun along the way.

Around the web