Responsive Design

Why Responsive Design?
  • Users increasingly accessing websites from a variety of devices of different screen sizes
  • One size fits all no longer a possibility!
  • Adapt to the user's "viewport"
    • Build it into the core of the site
Another term you will often hear people talking about in the context of responsive design is Mobile First. What exactly is Mobile First design? Traditionally, when people were designing their websites for both larger screen windowed devices like laptops and desktops and smaller screens, they would often do the layout for the larger screens first, and then try to adapt their content to be appropriately displayed on the smaller screen. So in this diagram here that you see the traditional approach would have been first to design for a laptop and then adapt .


Increasingly, people are adopting the mobile first approach. What this means is that you first design your website with the mobile screen size in mind. First, do all your layout for the mobile screen size, and then start adapting your website design for larger screen sizes. So as your screen size expands the content will automatically flow and then adjust itself to occupy the larger width of the screen that becomes available on larger screen devices.

In order to achieve mobile first design, there are three things that need to come together:
  • First, your front end UI framework should be able to support a grid based system. This has been increasingly been opted by most front end UI frameworks. So look at anyone of the front end frameworks that is in use, and you will see that they will have some kind of support for a grid-based system.
  • The second aspect is to have fluid images, or what we call responsive images, so you can make your website images automatically adapt to the size of the screen. So this again has to be built-in. Bootstrap has good support for fluid images or responsive images already available within the Bootstrap CSS classes.
  • The third kind of support that is required is what we call media queries.
    • CSS technology to apply some styles based on the size of the viewport
      • e.g.,
        @media screen and(min-width: 600px){
              /* CSS styles customized for desktop */
        }



Share this

Related Posts

Previous
Next Post »

2 comments

comments
September 25, 2016 at 10:06 PM delete

Great & Useful Articles

Responsive Web Design Twitter Bootstrap Mobile First Development Bootstrap Training | Bootstrap Course | Bootstrap Online Training | Bootstrap Training in Chennai

Reply
avatar
September 25, 2016 at 10:07 PM delete

HTML5 Training in Chennai HTML5 Training in Chennai JQuery Training in Chennai JQuery Training in Chennai JavaScript Training in Chennai JavaScript Training in Chennai Full Stack Developer Training in Chennai Full Stack Developer Training in Chennai


AngularJS Training in Chennai AngularJS Training in Chennai Node.js Training in CHennai Angular 2 Training in Chennai Angular 2 Training in Chennai Node.js Training in CHennai Node.js Training in chennai MEAN Developer Training in Chennai

Reply
avatar