How to Implement Responsive Web Design and Its Best Practices

How to implement responsive web design and its best practices

Using media queries will adapt a different css for different screen sizes. The way it works is telling the browser: if screenwidth = 700px or smaller/bigger; use mobile css. If screenwidth = 1000px or smaller/bigger; use desktop css. There's no limit to how many media queries you can use.

Using percentages is also a possibility; fluid design. I'd suggest using this together with media queries though.

As for frameworks, there are many out there. Bootstrap is one of the more populair ones. I personally believe working mobile first is the best way to go though. However, there is still heated debate on this subject.

As Pete mentioned in a comment earlier; working with graceful degredation (desktop first) will make the device download as much as the desktop site but not make use of the content downloaded. Wich is a huge drawback for the user. (Bigger pageload times, lots of server requests, more use of MB data etc.) Hence why I think progressive enhancement (mobile first) is the way to go.

Using progressive enhancement, the browser will always download the mobile css first; cutting down pageload times extremely.

For browser support info on responsive design, check this link.

Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques

1. One website all browsers.

As @Tak mentioned the answers here is 'Progressive Enhancement' and 'Graceful degradation'. However the definitions he gave are not quite right. Here are the proper ones:

'Progressive enhacement' (see link) means that you code for the old browser first (IE6/7 with/without JavaScript is a good starting point) using tried-and-tested technologies such as HTML4 and CSS1, then add enhacement as you progress through testing on more modern browsers down to Chome and Safari on mobile devices which support CSS3 and most of HTML5. This way, you aim to provide any browser with the best possible combination of features supported in it (its never going to be perfect by the way so bear in mind the 80/20 rule to avoid running project into the ground).

'Graceful degradation' (see link) is kinda the same thing but backwards, its a more lazy way of doing it. You start building your site against a modern browser and then apply 'patches' and 'fixes' until its acceptable on older browsers. This ends up creating a lot more work than planning it properly from the start and what generally tends to happen with this approach is that the developer/stakeholder will give up at some point (ie. what the hell? its too much work to get this working in IE6/7 - I'll just de-scope them)

2. Best way to standardise the layout

Personally, my suggestion is that if you want a standard layout across mobile and desktop devices I suggest you use a combination of BIG fonts (so they are visible in a tiny mobile screen) and small ones (so people that have a Desktop browser can read all the detail) on a Desktop-size 900-1000px width.

This site is an example:

http://www.valuetrader.net

When I open it in my Desktop browser I see a lot of detail, but when I'm on the go and use my Smartphone all the critical information (ie should I BUY or SELL a share?) is displayed on a very big font that appears legible in my tiny screen.

UPDATE 2014

This part of the question has now effectively changed to 'Whats the best way to implement the layout?'.

At the moment (and for the last few years of widely available CSS3 support) the standard approach for cross-device layout design is to use a so called 'Responsive' layout based on media queries. There are many CSS frameworks available to get users started with mobile-friendly layouts.

The basic principle for 'Responsive' design is that scrolling on mobiles devices makes vertical space virtually endless so you are only limited by horizontal space. Thus you have to ensure that as the screen gets smaller you let the page flow to fill up all the available horizontal space, and any navigation bars or horizontal elements are folded over vertically so that items are stacked on top of each other rather than using space horizontally.

The standard way to test a site's 'responsiveness' is by dragging the side of your browser window to reduce available width.

The better way is using Developer Tools, for example Chrome has a button to toggle device mode, here is an example using Stackoverflow:

An example of a media query to specify a layout for the #site-banner element on desktop and mobile screens would be as follows:

/* DESKTOP SUPPORT */
#site-banner { width: 1000px; background: #fff; margin: 0px auto; height: 120px; }

/* TABLET SUPPORT - rules apply below 1000px width */
@media all and (max-width: 1000px) {
    #site-banner { width: 700px; }
}

/* PHABLET & MOBILE SUPPORT - rules apply below 700px width */
@media all and (max-width: 700px) {
    #site-banner { width: 480px; height: auto; }
}

/* MOBILE SUPPORT - rules apply below 480px width */
@media all and (max-width: 480px) {
    #site-banner { width: auto; height: auto;}
}

3. How is dynamic image scaling done?

The mobile device does a lot of this for you so generally you just need an understanding of how it works. Basically, when the first mobile browsers came out they had to make sure that the sites that were already out there working for desktop browsers worked on a mobile too (otherwise nobody would use their smartphone to browse the web) so they had to come up with clever ways to detect the width of the site and resize it to the screen resolution that they had available.

For example my site 'www.desalasworks.com' is coded to 900px width, but it works fine by getting down-scaled on a small 320px screen (images on the page are automatically resampled using a variety of methods - such as nearest-neighbour sampling and bicubic interpolation, and the fonts replaced with native fonts wherever possible). As far as the image sampling goes, if you have ever pinched a photo on your smartphone to 'zoom in' and 'zoom out' you know what I'm talking about.

You generally dont need to worry about CSS to get your images to resample properly, I noticed that sometimes they are a bit funny when using percentage widths so stick to pixels if thats the case to make it easier for the browser to tell where items are in relation to one another. Note that you CAN specifically detect the mobile browser and set the width of your site to 320px and everything in it to fall in-line accordingly but in reality this is not necessary to have a working site on a mobile device and doing this will force you to maintain 2 sites, a mobile site and a desktop site (which some companies are happy to do).

4. Percentages / fixed width.

Personally I tend to use fixed width centered on a screen (using CSS margin: 0px auto), I haven't used percentage widths for a LONG time, mostly because its a bit of a nightmare to standardise the layout. If you do use percentage widths you'll basically have to do a lot more testing so I would tend to veer away from them.

Bear in mind this is just my opinion, some 'reponsive web' gurus will swear by percentage widths on just about everything, I'm just not sold on the idea of sacrificing predictability of the layout for what I see as marginal benefit. But then I come from a background of building desktop webapps, I'd probably think differently if I was just focused on mobile web (where horizontal space is at a premium and layouts tend to be simpler).

Constructing a responsive website

there are many ways in order to make a website responsive. It bottles down to so many factors.

You need to use RWD, which stands for Responsive Web Design.
It means that you can deliver your webpage in a variable size of screen, without having to re-write your html over and over. This is very much a must-do if you had to work with mobile and/or tablet devices.

Use Dynamic Units

One of the most important features of making a webpage responsive is the units you use, so I'll mention that first of all. At the moment, you have 'hard coded' these values by using a (pixel) px unit, which would be seen as a 'static unit'.

Below is a couple of units you may want to consider in the generation of your markup:

The absolute length units are fixed in relation to each other and
anchored to some physical measurement. They are mainly useful when the
output environment is known. The absolute units consist of the
physical units (in, cm, mm, pt, pc) and the px unit ~ w3.org

The above table displays what is known as 'absolute' units, and this is because they do not 'technically' change when you resize your browser or view on a mobile device.

Instead of using such units, you should consider using one of the 'dynamic' units. For example:

• percentage (%)
• viewport-width or viewport-height (vw and vh respectively)

~Image from this article note this is an old article, and support for these has improved a lot since

Using the likes of percentage, for example, means you can set the width and/or height of a div depending on your containing block's size.

For example, resize your screen here:

div {  width: 50%;  background: tomato;  height: 50px;}

<div></div>

Responsive web design and fixed margins

You can use calc(100% - 160px) in this case, I have updated your fiddle:

https://jsfiddle.net/22rL4eq6/6/

This of course if you have to use absolute positioning of the child, because then you would need to add an explicit width. If not, adding padding: 80px to the parent will do the trick.

What is the best practice for responsive website widths?

Seems rare to me that you haven't found information about responsive sites on Foundation, this framework has been responsive from the beginning, and have wired cool stuff to help you on that matter. Just want to make clear I'm talking here about the Float Grid which isn't default anymore since 6.4 (but you can customize or switch up the grid in SASS settings).

Foundation grid has 3 default expected sizes: small (mobiles), medium (tablets) and large (desktop), in Float Grid you can use this way:

<div class="column small-12 medium-6 large-4></div>

This column will be full width on mobile, 1/2 width on tablet and 1/3 width on desktop; you can even ditch the small-12 because every column has full width (12 columns) by default.

That's the way you approach it from the grid... if you use the SASS version of the framework, you have another powerful tool, a mixing to set code for a specific breakpoint... let's say you want to apply some styling for medium size (and up), you just need to use this in your .scss file:

@include breakpoint(medium) {
  // Your SASS/CSS code here
}

Please notice I said "medium and up", that's because Foundation is mobile-first, so everything you put in a smaller breakpoint, will be available on following sizes (unless you override them), if that philosophy is kinda awkward to you, and you need to put some code for only the medium breakpoint, you just need to put the code this way:

@include breakpoint(medium only) {
  // Your SASS/CSS code here
}

That's a quite fast way to handle mediaqueries inside your code, totally aligned with Foundation code... the best part?, if you change breakpoint sizes at mid-development, you just need to change the sizes on the _settings.scss file and all code will update on the next build.

As you tagged this question on "Foundation" and mentioned on the question body, I did my answer deliberately Foundation-centric. Hope this helps.

---

Related Topics