Complete Guide to Responsive Web Design

Since smart new gadgets such as tablets, smartphones, and phablets with advanced and complex operating systems like Android, iOS, Windows Mobile appeared on the worldwide market, web designers and web programmers came with a new type of design for website because these new gadgets have different sizes of displays so a website cannot be 100% compatible with different resolutions.

How to Test if Your Website is Responsive

This new design is called Responsive Web Design and contains HTML and CSS code that improves the functionality and especially the design of a website for any type of device.

You can test if your website is Responsive Web Design using Matt Kersley’s tool https://mattkersley.com/responsive/ where you can see how your website looks for gadgets that have the following width 240, 320, 480, 768 and 1024.

Another very good online responsive test is http://responsivetest.net that lets you do test any resolutions not only the default ones and you also have the possibility to rotate or to test for a specific website such as different versions of smartphones: iPhone, BlackBerry, Samsung, HTC, LG, tablets: Apple, Amazon, Asus, Barnes & Noble, HP, Microsoft, Samsung, Sony, laptops: Apple, Acer, Asus, Dell, HP, Lenovo, Sony, Toshiba and desktops: Apple, Acer, Asus, Dell, HP, Lenovo and Sony.

Writing Code for Different Screen Resolutions

For each type of mobile gadget you can write at least one line of CSS code to improve website’s design so usually, you start the CSS code for RWD writing the resolution in pixels like in the above example:

Portrait Tablet
@media (min-width: 481px) and (max-width: 768px)

Landscape smart phone
@media (min-width: 321px) and (max-width: 480px)

Portrait smart phone
@media (max-width: 320px)

Now, under every line where the resolution of the device is written you enter your CSS code depending on each object, you have on your website. Normally you need to reposition and shrink objects from your website in a manner that they don’t overlap so people from small smartphones or bigger ones can see your content in a proper way, but sometimes you may want to change the color or the entire design of an element for different browsers or devices.

#banner {margin-left:auto; margin-right:auto; width:1000px; }
.widget-text {padding:10px; background-color:#FCFCFC;  }

Best Responsive Frameworks You Can Use

If you need a quick solution for a responsive web site or if you don’t have the proper knowledge to create the responsive CSS code you can always try one or more available free responsive frameworks such as:

  1. Twitter Bootstrap

    Twitter Bootstrap, currently at 3.3.6 version, released the first time in 2011, is available at http://getbootstrap.com/getting-started/ and is created by two developers from Twitter named Mark Otto and Jacob Thornton having a popularity of 75000 stars on GitHub. The framework was created especially to have a great look and also to behave properly in the latest smartphones, tablets, laptops and desktop browsers and other programs that navigate through the internet. You can download either the source code, either the compiled version and unzip it and upload it to your FTP root directory.

    Bootstrap comes with HTML, CSS and JS for scaffolding, base CSS, various components and JavaScript plugins creating different button groups, button dropdowns, navigational pills, lists, tabs, labels, badges, headers, thumbnails, alerts, progress bars, modals, tooltips, popovers, accordion, carousel and many more. Additionally, you can download the ported version from Less to Sass for easy inclusion in Rails on Ruby and Compass. Bootstrap is available in Chinese, Chinese Traditional, Danish, French, German, Italian, Korean, Brazilian Portuguese, Russian, Spanish, Turkish, Ukrainian and Vietnamese. Firefox, Chrome, Safari, Opera, Dolphin, Chromium, Internet Explorer and other browsers support this framework without a single problem. The Bootstrap developers announced in December 2015 the new improved version 4 so you should update your framework or, at least, try the new version when appears.

  2. Foundation 6

    Foundation 6 is available at http://foundation.zurb.com/ and is created by ZURB in 2011, its popularity is proportional with the number of stars on GitHub, more than 22k. Foundation is flexible, 100% customizable, readable, semantic and constantly updated including HTML templates, resources, code snippets and so on. You can use Foundation to create sites in HTML, CSS, and JavaScript, to create emails using HTML or apps using Angular and Flexbox.

    There are a lot of big companies who use Foundation such as Adobe, eBay, HP, Cisco, Amazon, EA, Samsung, Ford, Mozilla, Pixar, National Geographic, Disney, The Washington Post and so on. The team offers a lot of tutorials, custom training, classes or certification helping you to develop HTML templates, resources, and building blocks. Using Yeti Launch for Mac you can create Sass projects with one click only downloading and installing it. Yeti uses Handlebars, UglifyJS, UnCSS and image compression to speed up development workflow and to create fancy websites! To use Foundation for emails, you need to test it in Outlook and then just add your style using Inky’s Inliner and for creating Apps you need to Install Foundation for Apps CLI, create a new project and run your app by starting to build it.

  3. Semantic UI

    Semantic UI is another responsive framework, newer than Bootstrap and Foundation, created in 2013 by Jack Lukic and having a popularity of more than 13k stars on GitHub. With this framework you can design quickly beautiful websites because it is friendly, it has concise HTML, intuitive Javascript, simplified debugging, more than 3000 themes, 50 UI components, and 5k commits and it partners with most popular libraries such as JQuery. To use Semantic UI, you need to download the zip archive, unzip it and upload it to your FTP or you can directly install it using the NPM package.

    Additionally, you can manually install it following the next steps: install NodeJS, install Gulp, install Semantic UI and then include in your HTML index file. Different components from this framework can help you to create themes, to make a theme responsive, to use grid structure, to migrate from Bootstrap, to create homepages, sticky menus, fixed menus, login forms, different elements such as buttons, containers, dividers, flags, headers, icons, images, inputs, labels, list, loaders, breadcrumbs, other forms, messages, tables, advertisements, cards, comments, feeds, items and so on. Semantic UI uses modules such as Accordion, Checkbox, Dimmers, Dropdown, Embed, Modal, Nag, Pop, Progress, Rating, Search, Shape, Sidebar, Sticky, Tab, and Transition.

  4. Pure

    Pure is a not so popular framework created by Yahoo in 2013 but still it has a very beautiful design and a 10k stars popularity on GitHub. Its advantage is a small size and also being responsive so the base is 1.1 KB, the grids are 0.8 KB, forms are 1.5 KB, buttons are 0.8 KB, tables 0.5 KB and the menus are 0.8 KB having a total of just 4.0 KB, but the non-responsive version has even less 3.8 KB. You can create responsive layouts in different colors such as black, purple, orange, blue, green, gray, yellow, red or indigo. You can use Pure by downloading it or checking out Yahoo’s free CDN and using an HTML code like

    <link rel=”stylesheet” href=”http://yui.yahooapis.com/pure/0.6.0/pure-min.css”>

    Don’t forget to add the Viewport Meta element and to understand Pure grids. Additionally, you can install Pure with Bower or extend it with Grunt, Rework so you can adapt mobile designs for old browser. Pure uses modules like Base, Buttons, Forms, Grids, Menus and Tables.

  5. UIkit

    UIkit is the last responsive framework presented in this top 5 responsive frameworks. It is created by YOOtheme in 2013 and has only 4k stars on GitHub and it has features such as collection of components, customizer, community and it is open source. You can download UIkit together with its CSS files, font files, and JS scripts and then integrate it in your HTML files.

    UIkit has autocomplete functions for IDE’s such as Sublime, PHPstorm or Atom, helping more advanced programmers to create a theme, a style, a layout or a project. You can use UIkit to create different layouts using grids, panels, blocks, articles, comments, utilities, flexes, covers; various navigations using navs, navbar, subnav, breadcrumbs, paginations, tabs, thumbnavs; a lot of elements with lists, descriptions, tables, forms or common things such as buttons, icons, badges, alerts, thumbnails, overlays, columns, texts, animations, contrasts. With its JavaScript, you can use Dropdown, Modal, Off-canvas, Switcher, Toggle, Scrollspy, and Smooth scroll.

Wrapping up

In the end, you definitely need a responsive framework or template for your website if you want to get more and more visitors knowing that in 2015 there were more than 1.8 billion mobile users and after laptop/ pc the smartphone with 80% and the tablet with 47% are the most popular devices used to search the internet. You also need to think that new gadgets are created and newer technology appear so you need to keep things updated.

Featured Image Designed by Freepik

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on RedditPin on Pinterest