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 .
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.
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:
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 */
}