What is Responsive Design?
With the development of diverse screen sizes, such as your phone or tablet, the concept of responsive web design started to gain traction. It approached web design by making the content adapt to various screen and window sizes on different devices.
Since screen sizes are always changing, it’s important for a website to adapt to any screen size and provide ways for users to interact with the website according to the devices’ features.
For example, Twitter’s desktop browser layout is a two column layout with its logo on the left and action buttons on the right. The user login is at the very top right corner of the page.
Once we switch to our mobile browser, before we decide whether or not to download it, the site’s mobile layout changes to a single column layout. Notice that the right column became the top container on mobile, and the login bar disappeared. We could say the order of importance of content is taken into account, but the logo is still prominent below.
Why does responsive design matter?
Over half of potential visitors to your site are using a mobile device – most likely navigating to a website using their mobile browser. If we show them a site designed for desktop, they’ll have difficulty reading and using it.
In the next few posts, I’ll be going over the building blocks for responsive design and providing resources for you to code along!
