Considering the rate at which the mobile web is growing, it’s becoming crucial that your website be ready to accept visitors who are coming in from a widely assorted array of different devices and screen sizes.
This is where responsive design can come into the picture and save your day nicely. However, with responsive design, as with anything in website design, you need to make sure that you follow along with some crucial best practices if you want your responsive site to actually work well and provide the flexibility it’s supposed to.
Mobile Users Deserve the Same Quality of Browsing Experience
One of the first and foremost principles to keep in mind when creating a responsive design site is making sure that the site is built so that the browsing experience is evenly the same for all users across the board.
This means that your site’s appearance and visual structure should change without ever creating content and function losses for users of any specific device or screen size. A visitor accessing your pages from their desktop should be getting the same sort of browsing experience as a visitor coming in through their smart phone or their tablet.
This means flexible everything and requires that you ensure all of your image, content and grids are fully fluid and will reconfigure accordingly on a wide assortment of screen sizes, such as these, which are only a small sampling of the very most popular screen sizes you’re likely to deal with.
The result should be a site that converts as nicely as this example does.
Design your Site with Responsive in Mind
When you’re wire framing your site layout together for coding into a real design, understand that there are layouts which are ideal for responsive design and those which are not, meaning there are designs that convert to assorted new sizes better than others thanks to their layout.
This means designing as simple a site layout and HTML code as possible and using simple mechanisms for core elements such as navigation and menu options, using HTML5 guidelines and doctype, and a simple overall core layout.
What you should avoid completely are things such as overly complex divs, useless absolute positioning, and fancy Javascript or Flash elements that will just complicate site adjustment on the whole.
Pay Attention to your Breakpoints
Resolutions can be defined in an assortment of breakpoints, but there are several major sizes that you need to focus on more than any others. These being:
<480px (which applies to older, smaller smartphone screen sizes)
<768px, which is ideal for larger smartphones and smaller tablets
>768px, which applies for everything bigger such as large tablet screens and desktops screens.
Also, these can be used too if you’ve got the energy and time:
<320px, which is great for older small, low res phones
>1024px stylesheet for wide screens on desktops.
These are the key breakpoints to focus on and especially the first three as well as the full desktop resolution, which is greater than 1024px.
Make your Images Flexible and Workable
With a simple design, you can make your images flexible as well to a certain degree. The easiest way to accomplish this is by simply using adaptative sizing and resizing their width.
You can do this in a variety of ways, but one of the easiest methods through which to achieve it is with this handy little tool: Adaptive Images. Bear in mind that sizing accordingly for mobile users is probably your best bet on a responsive design site if you want decent load speeds, which are absolutely crucial.
You could also use variable breakpoints and store multiple image sizes in your data for different screen resolutions, but this might become a problem in terms of bandwidth usage, and you cannot create your site with the safe assumption that all of your viewers will have access to powerful bandwidth.
Allow Compression of Site Elements and Content
Use a program such as GZIP to compress your page resources for easier transmission across networks. You’ll have lowered the number of bytes sent per page or element and made your content easier to browse and access from devices with varying or low bandwidth.
Furthermore, you can speed things up even further by removing any unnecessary white space and line breaks. Doing this will reduce file sizes overall and keep things flowing more smoothly.
Get Rid of Non-Essential Content
In order to make your mobile friendly responsive design site really shine in a very easy to achieve way, simply bear one thing in mind: Some content and content elements were never meant to be used in a mobile context and would never work there.
Image by If you have these elements at play in your website or potential site layout, then get rid of them immediately for any mobile setting. You can do this by adding a .not_mobile class to specific elements that you’d like to see removed when your site is viewed in a mobile context or you can simply get rid of such elements permanently from all versions of your site.
Remember the Bottom Line
The above are just some of the major best practices you can try out, some of the more important ones.
Ultimately however, if you want your responsive design site to work well, you need to build it so that it can load and function quickly on devices that will often have low resolution, small processing power and sometimes weak bandwidth access. This means a simple, well organized site that conforms to its core function with maximal focus.
I love responsive design. I’m currently working on my 5th responsive website. Good tips here!
Good article. 😉
You wrote: “Some content and content elements were never meant to be used in a mobile context and would never work there”.
Can you give some examples of that content? Thx!
The advice given in section Pay Attention to your Breakpoints is NOT best practice. “Every time you see 320px, 480px, 768px, 1024px used as breakpoint values, a kitten gets its head bitten off by an angel…or something like that,” says Brad Forst.
https://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/
Section Get Rid of Non-Essential Content says “when your site is viewed in a mobile context”. How would you detect mobile context? Accelerometer? Viewport size tells little about the context of use. Hiding context from mobile _devices_ is a bad idea. https://www.lukew.com/ff/entry.asp?1333
Best practice is not to “get rid of [non-essential content] immediately for any mobile setting” but to get rid of it for each and every device. And to keep essential content for all devices.
“Use a program such as GZIP to compress your page resources”? Why? The server handles the compression of HTML, CSS, JS and other text files already. There’s no need to use a program for that.
Agreed, the phraseology “Use a program such as GZIP to compress your page resources for easier transmission across networks.” suggests the author doesn’t fully understand how GZIP is applied to resources requested via HTTP, as does the following sentence “Furthermore, you can speed things up even further by removing any unnecessary white space and line breaks.” which achieves nothing if the content is compressed by the server, and complicates development unless applied as part of a batch process prior to upload to the server.
Nice short article, never tire of reading about responsive design, and I like that you mention and provide a link for adaptive images, would have started with ‘get rid of any non essential content’ as it should be the starting point for any web design project nowadays especially a responsive one.
Keep sharing responsive design tips, I am working on few html5 layouts and trying to give seamless work for my clients , so it was very helpful finding great tips from you.
good article !!! nice information are given in it 🙂
Hi, 320 resolution is not for “older small, low res phones”. That’s actually the iphone resolution so you should inform people that 320 is in fact the most important resolution to consider when designing for mobile. And no, I’m no talking about the older iPhones, I’m referring to the iPhone 5, 5S, etc. The retina resolution of 640 is not true 640 in terms of screen real estate, it is 640 in terms of “density” within the same non-retina space, so you just have twice the pixels within 320 width.
In other words, if you look at any responsive site on an older non-retina iPhone with 320×480 resolution you will see the exact same content (at the exact same breakpoint) as you would on a retina 5s.
Im trying to push for more responsive designs with my design company at the moment, so the timing of this article was pretty good. Thank you!
Great Content! Definetely will put this practice in mind at my website! 🙂
Nice Article!
I myself am trying to build some responsive websites and idl4.com is one of those sites. I wonder if someone can provide some review of the site or mistakes I did making my site responsive.
Interesting article. Food for thought. Thanks for the link to popular screen sizes although the site the link goes to might need to be updated.
A Book Apart has some interesting books on the subject of responsive web design and content for mobile. Responsive Web Design by Ethan Marcotte, Content Strategy for Mobile by Karen McGrane, and Mobile First by Luke Wroblewski. Books to get one thinking.
Very instructive tips on responsive web designing.keep offering more fantastic tips.
Lets face it the days of non responsive websites are old hat, i build all new projects on responsive design now, theres just no going back for me.
great article and a good read 🙂
always a pain when working on responsive stylesheets. but this could be a potential great guide.
thanks
Nice tips here, I am starting to work on my new project with responsive design, Really it is a tough task for beginners. Here I have found a good tool(responsivise.com) to test my responsive design which gives a good idea.
Responsive web design is one of the emerging web design trends which is not avoidable as there is a continuous increment in daily users of smart phone devices, tablets etc.
So, It’s a nice guide to learn responsive web design and stay tune with emerging new web design trends.
Responsive website design is a unique approach within the web designing domain to make websites compatible on a wide variety of devices.
We are a website designing company and believe I follow the same steps that you mentioned above to make responsive website design. I felt good when I saw the tips to follow for website designing.
Cat web design, Web Design Cardiff, South Wales creates responsive website design so that peoples can browse website through their mobile device.
Nice tips here for beginners. Keep up good work.
Great article. I’ve developed such a passion for responsive design its the only type of site I want to build. Thanks for the tips.
“A visitor accessing your pages from their desktop should be getting the
same sort of browsing experience as a visitor coming in through their
smart phone or their tablet.”
And that is the problem with Responsive Web Design.
Web designers have been dumbing down Desktop sites so that they look the same as mobile sites.
….Dreadful UIs opening with:
– a HUGE screen-filling picture
– minimal, often disguised navigation
– long, narrow column
– empty white space …
….. all so endless scrolling.
But the worst thing about Responsive on a Desktop…..
It discourages window re-sizing
Menu items disappear. Content shuffles around (pushed down, out of sight mostly)
WHY ????
I’m on a bl**dy Desktop – trying to WORK !!.
A smaller browser window does NOT mean I’m using a mobile.