Why hello there. This week might be weak because I'm preparing for my big move to Pittsburgh tomorrow. I'm currently surrounded by packing boxes of various shapes and sizes, each with their own capabilities and limitations. Maybe I should use that to transition into…no that's a stupid segway. Enough about me, let's talk about responsive design.
Bizness
Responsive Design in Business Survey
Sarah Parmenter (@sazzy) created a survey to gauge how web designers are integrating responsive design into their businesses and processes. I’m excited to see the results!
Responsive web design – problems from the coalface
A great survey by @welcomebrand that is surfacing some of the common challenges of creating responsive experiences. The results run the gamut. Hopefully we can continue helping each other.
How Much Does A Responsive Web Design Cost?
Of course we all know that every responsive website costs exactly $13.47. Even though we already know the answer, I try to lay out some considerations for costing out responsive projects. Stick around for the comments.
Typography
How To Maintain Readable Type In Responsive Design
This article does a great job explaining molten type in responsive design and wrangles up some of the best techniques to accomplish it.
Symbolset
Symbolset is a tool that uses a custom font to serve up a unicode equivalent of certain key words. For example, ‘mobile’ becomes an icon of a mobile device. Pretty neat, although I wonder how practical it is.
Media Queries
Using media queries to hide CSS3 from older browsers
Roger Johansson (@rogerjohansson) demonstrates how you can use media queries to isolate advanced CSS techniques that could potentially ruin an experience on less-than-capable browsers and devices. And as @scottjehl pointed out, it's probably better to use 'media only all' for better accessibility.
RWD Quicktip: It's impossible to test on every device and configuration. Understand the difference between 'support' and 'optimization' and strive to be as inclusive as possible.
Process
Say Hello to The New ISO Homepage
Andy Clarke (@malarkey) and David Roessli (@roessli) helped redesign the new International Organization for Standardization website. Andy walks through the process and even provides downloadable reference designs for free. Pretty awesome.
Approach
Optimizing vs. Adapting for Devices
Luke Wroblewski (@lukew) pulls some quotes from Ronin Cremin (@xbs) and Jeremy Keith (@adactio) that elegantly explain the difference between optimizing specifically for devices versus creating a singular adaptive experience.
Responsive Web Design for Libraries: Get Beyond the Myth of the Mobile Web
Matthew Reidsma (@mreidsma) gives an overview of responsive web design and provides some best practices.
Images #hotdrama
Picture Element Proposal
Here's the new picture element proposal that's been submitted to the HTML Working Group. I stay out of this stuff to save my sanity, but I really like the requirements, most of which can be viewed as best practices for any adaptive images solution:
- Image must be handled with a single HTTP request.
- Solution shouldn't require any client-side scripting, server-side technologies, or headers (this probably isn't feasible for stop-gap solutions)
- Things must gracefully degrade in any browser that does not recognize the solution.
- Solution must be accessible.
Stretchy Pictures
Aegir Hallmundur (@aegirthor) comes up with a creative solution for dealing with images on his new portfolio website.
Navigation
Responsive Menus: Enhancing Navigation On Mobile Websites
Some considerations for making menus mobile-friendly.
Expandable Mobile Search Form
A nifty little way to save space for search.
Inspiration
Microsoft Homepage
Well now looky here. Microsoft is giving their homepage the ol' responsive treatment. I like the toggle pattern combined with a multi-level accordion nav. It works.
Microsoft Surface Website
A nice, clean responsive design by Microsoft for their new Surface tablet. Here’s hoping this site works great on the device they're promoting! Thanks to Ed Charbeneau (@edcharbeneau) for pointing this one out.
Folksy
A Etsy-esque website for crafts. I frequently get asked “where are responsive e-commerce examples?” so here’s one.
Testing
How to Build a Device Lab [Part 1]
Dave Olsen (@dmolsen) provides a thorough explanation on how to set up a device lab for mobile web testing. And this is just part one.
Devices and Pixel Ratios
The responsive BBC team explains the headaches that emerge from dealing with different resolutions and pixel ratios. *Shakes fist at Android*
CMS
Create A Responsive, Mobile-First WordPress Theme
Ellen Bauer walks through some considerations for a responsive Wordpress theme.
Advertising
Shift to responsive design creates ad challenges
There’s a great rush to responsive UI, but the ad solutions have been left behind”
Of course they have, and not just because ads are fixed-width.
Horoscopes
Aries
The numbers 320, 480, 768, and 1024 mean nothing to you. You recognize that they are simply drops in a much larger ocean. Tonight: think deep thoughts.
Taurus
You will add an easter egg to the site you're working on. When viewing the site between 30.55em and 30.62em, your boss's dirty secret will be revealed.
Gemini
Your heart is calling out to you. You will try a new IDE, but eventually come running back to your first love in tears. Don't forget the flowers and chocolate.
Cancer
You feel disconnected from those who love you. Tonight, get in touch with an old friend and tap that Opera Mini icon.
Leo
Tomorrow, you will move your entire life, your signifant other, and a truckload of devices to Pittsburgh, PA. Oh wait, that's just me.
Virgo
Make all your CSS classes reference 90's alternative rock lyrics. Also, watch out for unexpected punches to the face from your coworkers.
Libra
You will have your 300th "native vs web" conversation. The other party will retreat once you start dry heaving.
Scorpio
GET OVER HERE!
Sagittarius
You will pull an all-nighter to get a project out the door. You will then pull another all-nighter to celebrate getting said project out the door.
Capricorn
Take a stroll down memory lane. While you're at it, look for a spot with particularly bad connectivity. Test your site. Still good? Alright then.
Aquarius
You are entrenched in a battle with a third-party IT department. Use the word "disgraceful degradation" at least 6 times in your next meeting.
Pisces
Make your cat's site responsive. It still won't love you.
Until Next Time
Well, I guess this is it for now. Time to go load a bunch of junk into a U-Haul. If you have any suggestions, corrections, or just feel like yelling at me, please do so on Twitter. Thanks!
