New To Responsive Web Design? Here’s How To Start Designing Responsively.

by Nicole Hyman

 Mar 25,2015

Before I understood what made responsive web design worth the extra work, I’ll admit I did my fair share of eyebrow raising. As far as I was concerned, my bag of design tricks was all I’d ever need to take on even the peskiest pixel. Photoshop was my playground and I could lasso like a rodeo champion, work wonders with my magic wand and had even mastered parallax scrolling. I was a force to be reckoned with. And then I got an iPhone.

That’s when it stopped just being statistics. “Haven’t you heard?” the doomsayers would say, “mobile is going to change everything you know to be true about design.” They’d then regurgitate the same old, stale figures from one study or another. But I never took it seriously. Not even when I was told that by 2014 there would be more than 1 billion mobile devices worldwide. How things have changed.

There’s no more small-talking my around it. Responsive design is too relevant to be ignored. And forget about the ‘hide layers’ option. I know that’s what you were thinking. This isn’t just another element you hide because you don’t know what to do with it. If you want your website to be seen, you need to start thinking mobile. And that means one thing: you need to learn to embrace responsiveness. It’s one of the best things I ever did.

If you’re anything like me, you’re probably wondering what the big deal is, right? Well, imagine a website which does the hard work for you. Which looks good no matter where it’s viewed because it automatically adapts and changes to suit any device. Users get the same experience whether the site is viewed on a desktop computer or mobile phone. Oh, but it doesn’t end there.

What I love about responsiveness is the control it gives me over my work. I now know how my design will render wherever it’s viewed. And I’m talking about precise control, down to the last pixel. This is a little thing called “Pixel-Perfect Responsive Web Design,” which makes it possible to control how every element of a website functions and appears in every possible environment. Believe me, once you’ve gone pixel-perfect, you’ll never look back.

Before you dive in, keep in mind that responsiveness isn’t just mobile. It’s about creating websites to suit any viewport size. That’s where I went wrong when I first started. Keep an open mind and whatever you do and be sure to do your homework. Whether you’re a newcomer or a veteran, Ethan Marcotte's seminal article, Responsive Web Design, is essential reading. Dig in - it’s a real treat and an invaluable resource.

Calculate The Proportions For Each Page Element.

Remember learning that pages have a fixed width in either pixels or percentage values? Well, forget that! This approach isn’t helpful. Your site may look good in whatever environment you created it, but it won’t scale to suit different screen resolutions. This means that a fixed width website designed for desktop would look out of sorts when viewed on a mobile device. And that’s why responsiveness makes so much sense. These are the websites that will resize and render at the same relative proportions regardless of where they’re viewed. They’re the hassle-free, reliable solution that you don’t want to miss out on.

So you want in on the magic. You want to know how it’s done. I don’t blame you. It all starts with calculating the proportions of each page element. All you need to do is divide the target element by its context. But don’t worry this is much easier than it sounds. You don’t even need any math.  It’s simple as using Photoshop to measure a specific page element and then dividing it by the width of the page. Gotta love Photoshop, right? As an example, let’s say you’re trying to calculate the proportions of an H2 heading which is 32px. If the context is 16px, we would calculate the target by dividing 32px (H2 heading) by 16px (context) or 32 ÷ 16 = 2. Now we know that H2 is twice the size of the default font.  And that’s all there is to it.

Using this quick and easy trick you can easily tailor a website for landscape and portrait orientation. Of course, it has its limitations. For example, it would be nearly impossible to optimize a three column layout for a small mobile phone. For that, you’d need something a little more technical. Get ready to get hands on with media queries.

Understand Media Queries.

You may be tempted to skip this section. And I don’t blame you. There are a ton of quality frameworks available online for download. So why bother with media queries? All I can say is stick with it. Media queries may be challenging to master, but they’ll let you take your design to a whole new level.  And this is the only way you’re going to master device-specific responsiveness.

Using media queries it’s possible to adapt websites to suit different device properties such as screen width, resolution and orientation. You can also use them to apply style sheets to specific devices with specific properties. For example, you could decide to apply a certain font or formatting to iPhones with a 480px screen resolution. This formatting will be ignored for all other devices.

But it’s that and so much more. This can be used to automatically change website layout when being viewed at a certain resolution. Also known as breakpoints. For example, you could have a media query which changes the layout when a website is viewed using a browser with a 768px width. In this case, you’ll want to use custom breakpoints.

Scale Your Images.

You also want to ensure that images can be scaled to fit the viewport properly. But without official specifications, this can be tricky. One way to get around this is to use Adaptive Images. This detects a visitor's screen size and delivers device-appropriate images. You also want to consider how your images will be cropped when they’re resized. And that’s where tools such as Focal Pointcome in handy. This ensures that the focal point isn’t lost when scaling an image for smaller devices.

Remove Unnecessary Source Code Characters.

Sometimes a website which runs perfectly on a desktop will load slowly on a mobile browser. This is because all the website images, JavaScript, CSS and scripts have to be downloaded before the website can be displayed. To increase loading times, you should remove unnecessary characters from the source code.

This is known as minification and it will improve performance on mobile devices without changing the functionality in any way. Minification includes removing spaces, line breaks, tabs and comments. It’s always a good idea to keep an unminified copy of all files as a working copy.

Javascript is very popular for websites and yet it slows loading time. To avoid this, CSS and JavaScript files can be combined for improved performance. This has been known to increase loading time by as much as four times on some websites.

Remove Redundant Content.

Responsive website design is designing websites so they’re optimized for all devices especially mobile devices. This means removing redundant text and other elements that don’t work on a mobile device. If you don’t want to remove these elements from the desktop version of the website, you can create a .not_mobile class for elements that won’t appear when viewed in the mobile context.

What’s The Bottom Line?

We’ve really just scratched the surface. If you’re looking to create flexible and highly adaptable websites, you need to find creative ways to increase load time while providing an optimal viewing experience on even the smallest device. This often means having a simple, well-optimized and well-organized site.

Your role is no longer limited to creating a mockup and leaving the rest up to the developer. So get ready to have more demanded of you than ever before. But that’s a good thing. There’s less hassle in the long run and because of “Pixel-Perfect Responsive Design”, you now have complete control over your work.  Responsive website design is a new way of thinking about websites. It’s a change in mindset where less is more and the only bells and whistles needed are CSS.

Blog  /  Web Design  /  Responsive Web Design

Comment