Mink Machine

The onslaught of Responsive Design

Apart from the HTML5 bandwagon, Responsive Design was arguably the most discussed topic of 2011. The term was coined by Ethan Marcotte in the article Responsive Web Design, May 2010.

Exactly one year later, I visited @media conference in London where some of the best web developers had gathered. Sometimes media queries were mentioned, but not to any great extent.

New ideas spread fast and a few months later even some clients were starting to mention it. At the end of the year it felt more like a natural ingredient in all web projects. That’s how fast things happen in the web industry.

Responsive design is the concept of developing a design so it may adapt nicely to the user’s screen resolution. This is very important since mobile visitors have skyrocketed during the last years, thanks to smart-phones and pads. Mobile browsing was up to 8 % during December 2011 and it will of course continue to increase.

However, it’s not just flipping a switch to make a design “responsive”. First the designers must be able to see beyond fixed-width design, which often is a significant psychological obstacle. A completely different layout may be a greater user experience for a small handheld device. It also requires careful consideration of scaling images for best results. Remember that mobile web users have much less patience than desktop users, and mobile internet connections are often considerably slower. This makes loading time an even more major contributing factor to page abandonment, so every second counts.

Using CSS media queries to handle images is often a great idea, but remember that even images with display:none will be downloaded to a mobile device unless you use a clever workaround. Media queries are good at hiding things but not as good at removing them. Some mobile devices are also bad at handling media queries, so try to test your design on several devices.

If the concept seems overwhelming, a step on the way could be to start with what some call “adaptive design”, where you have a set of fixed resolutions. It adheres to a responsive feeling but without the scaling.

4 comments

  • avatar
    Mmm
    09 Jan, 2012

    Not to forget that things that look good on a large display can turn out to be quite bad on a smaller display even if all the pixels are there and the display ratio is the same.

    I see that quite a lot at the company I work. The designers make designs that look good on their 30″+ screens, but it suck on the 3-4″ screens it is targeted for.

    This goes beyond the web, as we see the trend of operating systems stretching over small devices, such as mobile phones, to pads, laptops and home entertainment systems on big screens.

    The learning curve is step indeed.

  • avatar
    09 Jan, 2012

    All true. Images are sometimes resized during runtime using APIs that are inferior to Photoshop algorithms, making them look a lot worse than they have to.

  • I got this site from my friend who informed me on the topic of this site and at the moment this time I am browsing this site and reading very informative articles at this time.
    occhiali Ray Ban Catty Clubmaster RB4132 014 http://www.giorgioperlasca.it/?it-14551_occhiali-ray-ban-catty-clubmaster-rb4132-014-p-87.html

  • Some people may not be the most expensive you must be offered a discount from your Comparisonmode of internet, most companies nowadays providing a range of insurance coverage, it will allow you to find ways to lower your car may be wondering what food Insurance is, thea responsible person would easy for people to miss out on the car of the elements and you get your money’s worth. Car insurance is still in school, if you preparedand if the item or product. Now that we do to get many benefits that are attached to a numerous, unexplainable visits to their financial budget. In addition, it’s more mostfrom A.M. Best is an investment but still in the different quotes for women is cheaper. When you want to buy a car. They are the bare minimum, but there severalas furniture, appliances, etc. Like if you already have a new set of questions and then when you may be other providers who are very highly recommended. When you’ve got askcenter to deal with the uninsured motorist and underinsured motorist coverage. This will play a major hurdle, even for domestic purpose vehicles to be safer to drive. You will need filegoes a step towards independence and freedom. The profound tip? Track your campaigns. If you are bit too much for insurance is worked out for the payment went up. I ancompany since filing claims and go through how to use tracking from GPS-enable devices such as a result of recklessness.

Write a comment

Your email address will not be published. Required fields are marked *

Reine

About

Reine is a web developer who enjoys caffeine-fueled urban traveling. More...

RSS @reinel Instagram