Responsive web design: Key tips and approaches

Some time ago, designers knew the exact dimensions of work they were commissioned to do whether it be a book cover, poster, newspaper, etc.However, with the emergence of smart phones, iPads and other monitors with different sizes, aspect ratios and resolutions, we’ve lost control of our visual borders.It’s not surprising that responsive web design (RWD) has become the new buzz. This emerging trend is not about fashion or aesthetics; it is rather an attempt to solve usability problems that arise due to the various devices used to browse the Internet.In this article, I’ll describe the approaches used when designing for different devices, what screen sizes and resolutions should be taken into account, and how RWD works from a designer’s point of view.

Responsive web design approaches

When creating a website that is fit for all monitor screens, the most common approach is designing within the standard screen width and height. Currently, the standard size of a monitor screen is 1024 pixels by 760 pixels, this means the web secure area should be less than that — it is 989px by 548px.

If the website is viewed on a bigger monitor, the page layout will show more of the background. Over 90% of designed websites use this approach, but it is less relevant when we design for mobile devices. You simply can not use the same layout for a 320px by 2000px screen.Here are a few other approaches used when designing for different devices:•Media queries: CSS allows for page styling (including hiding content) based on characteristics of the device the site is being displayed on. Page styling is most-commonly based on the width of the browser.•The fluid grid: when page elements are sized in relative (%) units and the number of grid columns change depending on the width limits.The most popular technique is based on the fluid grid – it was the original proposition for how RWD should work and it got support from Adobe. In the latest version of Dreamweaver, you can use a fluid template to create and edit layouts in an automated way.

Lancaster University website doesn’t expand content section width over 960px but it scales down neatly below 400px. Please note how the content on top is gradually reduced and the scroller — aware of page width changes below 420px.

Mobile device screen resolutions (and challenges when targeting them)There are dozens of graphics display resolutions. Below is a table with a few of the most significant devices for web designers:

As you can see, there are a variety of dimensions as well as resolutions (defined as pixel per inch). The resolution (PPI) is an important factor — for example, the size of an icon on the iPhone 5 will be 4 times bigger when displayed on a desktop monitor.

There are challenges we face when tailoring content to smaller sizes. So here are a few things to keep in mind:

1.Keep it readable: a line of text with a 14px height on 2000 px wide screen will be scaled down to 2px on a 300 px wide screen — you just can’t read it. On the flip side, scaling 10 px text up 7x would be unreasonably big. We need to keep reasonable, and readable, typographic proportions on every device by adjusting our layouts to the available screen width.

2.Keep it browsable: it’s important to avoid too much scrolling — huge amount of content pushed into 1 column makes pages very long, making it hard to obtain the desired content.3.Keep it tappable: mobile screens are touch enabled and usually human fingers are used to handle them — so, the buttons can’t be too small. According to Apple: the comfortable minimum size of tappable UI elements is 44 x 44 px. This limit is often broken and the real estimate limit is around 25 px.

Now that we know how to achieve a readable, browsable and tappable interface, let’s see what we need to do to create a responsive design.

Key tips while creating a responsive web design

There are key things to keep in mind when creating a responsive web design. Here are a few of the important ones:

• A web design should have at least 3 versions for different browser widths: 320px-480px, 480px-768px, 768px+. Between those widths, your content can scale freely or you can keep 3 fixed layouts. Having 3 (or more) fixed layouts and adding margins when necessary is usually easier to design and implement than fluid scaling. However, fluid scaling may provide better experience on a larger number of devices.

• Decide what content stays visible at specific resolutions: For example, you may choose to hide an article’s leading section, reduce whole boxes to a single button, or hide content completely.

• Be aware of CSS constraints: Design in a way that allows as many page elements to be in pure CSS. This is important for 2 reasons: it allows for more flexibility when resizing page elements and it reduces loading time. This is not easy for most designers because they may not be familiar CSS. What it means is to avoid using Overlay Modes other than “normal” (unless the layers can be merged), use simple shadows and gradients.

Use the same content and exactly the same HTML for all resolutions: In other words, we should use and reuse the same graphical elements for all versions of the page. Usually, we’d like to create the biggest screen first, then reduced elements for smaller resolutions, if need be.Besides these key points, RWD is a matter of your imagination and a coder’s skills. In the examples below, check out the different ways RWD can be done.Examples of responsive web design

Fork is an amazing example of a fixed layout mixed with fluid scaling. There are 4 fixed layouts (with block element sizes set in pixels). We only see fluid scaling for the divs with wave backgrounds. You can see this when you scale their page above 770px. Please note how content hiding occurs here.

Daniel Vane’s personal website makes a good use of a fluid square-modular grid. It fills the screen 100% no matter the size. In smaller screen views, like 768px, the layout goes from 5 columns to 3 columns. Below 480px, it turns to 1 column.

The Boston Globe website is a rare example of a huge news website designed in a responsive way. It uses HTML5 boilerplate framework with it’s fluid grids based on percentage dimensions. It should be noted that fluid grid doesn’t mean infinite fluid scaling. For this website example, the maximum page is 1232px and minimum is 422px.The number of columns change at 620px and 800px, but Boston Globe’s stylesheet defines more than 2 conditions (media queries). The more in depth analysis shows that this page (simple at first glance) has around 30 variants adjusted to the following resolutions: 1400px, 1300px, 1220px, 1210px, 1200px, 1150px, 1100px, 1050px, 1024px, 980px, 960px, 950px, 931px, 900px, 860px, 809px, 810px, 800px, 788px, 768px, 760px, 640px, 639px, 620px, 600px, 540px, 500px, 481px, 480px, 380px. Resources to get you started:•What the Heck is Responsive Web Design•Responsive Web Design by Ethan Marcotte•20 Favorite Responsive Sites by Ethan Marcotte•@RWD Twitter stream by Ethan Marcotte•Responsive Navigation Patterns by Brad Frost•Complex Navigation Patterns for Responsive Design by Brad Frost•The Goldilocks Approach an interesting attempt to make layouts based on em values. Purpose of this is to make design resolution independent. A computer screen has an average of 72 ppi and the modern tablet or phone has 300+ ppi — a button on a phone is 4x smaller even if it has the same width in pixelsAnd last, but not least, click on the image below and download a transparent PNG template of several device screens you can use to test or showcase your designs.

I’m abdul alim. I’m a professional Web design & Wordpress Theme Developer with 3+ years experience.

You can find me on facebook , twitter or google+. Or You can Hire me for any web Design and Development Issue.

Contact With Me!

Facebook: https://goo.gl/GId1b8

Twitter: https://goo.gl/gRSQuF

Fiverr: https://goo.gl/SSjILB

For Hire me!!!