There used to be a clear differentiation between desktop and mobile. With the introduction of tablets and tons of new internet accessible technologies, we’ve been faced with designing for more monitor resolutions and devices than ever before.
In this video, we’ll learn the basics of how and why we should embrace responsive web design.
You can create a flexible website that fits beautifully on any device, rather than having to create and maintain separate versions for each device.
But how to you create a responsive website?
Responsive websites are built on a flexible, fluid grid that adapts to the browser or device that is rendering the website.
Here’s an example of a fluid website:
When you change the browser size, it adjusts the size and layout of the images as the browser size changes.
This is because the site is built using a fluid grid, and uses percentages for the width, instead of exact pixels.
Creating a fluid foundation is the first step to creating a responsive website.
A responsive website creates version of the same website that can stretch and resize with the browser.
Ensuring your site adapts to whatever size browser or device your visitors are using
When you get to a specific width, the website can snap to a different layout specifically for mobile devices. This is done with Media Queries, which allow you to target specific widths where your layout begins to break or look cramped.
You can take control of your fluid layout and target specific devices like tablets and smart phones.