Responsive Web Design

It was much easier to design websites back in the day where the only thing you had to view your website was your computer. There was only one screen size available, and so there was only one screen size that you had to consider when developing your design.

That’s no longer the case. Nowadays the number of screen sizes are growing exponentially as more and more devices get released. You now have to consider a wide range of devices: smartphones, tablets, phablets, desktop computers, televisions, and much more. In order to optimize your content for all of these devices, you must employ responsive design on your website. Responsive Web Design (or RWD) is the process of designing and developing websites that are able to react to user behavior and adapt to changing mediums (screen size, platform, orientation, etc.). Using RWD is important because it allows you to deliver web pages of variable sizes to ALL of these devices without having to create a new website for each and every screen size, which would just be tedious and awful.

responsive design

You can type in “responsive web design” into a search engine and pull up thousands of resources that go in depth about RWD concepts. Here are some of those basic concepts:

  1. Set the Viewport: The first thing you should do is throw this into your <head> section of your website…<meta name =”viewport” content=”width=device-width, initial-scale=1.0″>What does this do exactly? The meta viewport tag modifies the virtual viewport of the device, which in turn changes the behavior of the browser. The width=device-width matches the width of virtual viewport of the device to the physical width of the device, and the initial-scale=1 controls the zoom level when the page is first loaded. In short, this will make your content resize appropriately on every device.
  2. Do not use fixed units of measurement: Back in the day you could design a website down to the last pixel, having a fixed width and height for every element. However, pixel units are not RWD-friendly. Avoid pixels and stick with relative units like percentages (%) or ems. These relative units will adjust based on the screen size you’re using to view the content; for example, a <div> box with a width of 70% will ALWAYS have a width of 70% no matter if the screen size is 1000px wide or 500px wide. Percentages are best used for boxes that wrap content and images, while ems are best used for font sizes.
  3. Use CSS Media Queries: Using fluid units of measurement will certainly help you create a responsive design, but it will only get you so far. There will be several points where your design “breaks” (called breakpoints) and you’ll likely have to change some of your CSS styling to fix these breaks. However, in order to have these fixes only affect your design when the design actually breaks, you’ll have to utilize CSS media queries. These media queries will query your device to find out information such as browser or devices width or height, resolution, orientation, and much more. Based on the characteristics they query, they will target that characteristics and only have style changes take effect when the conditions are met. For example, say you want the background to change from black to white once the screen size gets smaller than 500px. This would be the code you’d put in your stylesheet:@media screen and (max-width: 500px) {
    body {background-color: white;}
    }
  4. Mobile first?: You may here the term progressive enhancement used when designers talk about RWD. Progressive enhancement is the idea that if you start designing a website at a mobile size and work towards a desktop size, you will ensure that your website will look good across all screen sizes. Designing for mobile devices certainly has more restrictions than designing for a desktop computer, and it’s much easier to add content rather than subtract from it. However, I personally do not think it’s a necessity to design starting with mobile first, and actually I always design my responsive websites starting with desktop sizes and going towards mobile devices. I think it comes down to a matter of preference; if you’re more comfortable with adding content then start with mobile, if you’re more comfortable subtracting content then start with desktop. Despite this, I agree that progressive enhancement is probably the best practice.

There are some things to consider before deciding if RWD is right for your website. The biggest item you should consider is whether your content is appropriate for small screen sizes. If your target audience never uses smartphones to look up your content, it would be a waste of time and money to design for mobile devices. Sometimes you may find that it might be better to create a web app for mobile devices completely separate from your website. While responsive design is something that is becoming more and more necessary as new devices get released, do take the time to consider if it’s right for your website.

Sources: [ Responsive Web Design Basics – Web Fundamentals ], [ Responsive Web Design – A List Apart ], [ Responsive Web Design: What It Is and How to Use It ]

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s