Responsive Web Design

Responsive Web Design

Responsive websites are sites that change their layout depending on what device you are using and responsive web design is a way to make your website more accessible to users on other platforms.  Up until the past few years, websites have been designed for people using desktops or laptops, but now, with new innovations like Smartphones and tablets, web designers are now encouraged to 3 websites in 1 for mobile, tablet, and desktop users.

A couple of terms you'll need to know before we get started are breakpoints and media queries. Media Queries are a form of CSS module that allows content to adapt to different width, height, and screen resolutions. A breakpoint is where each change happens.


The example site I used was Nixon.com, the watch company.

As you can see, Web Designers at Nixon have created a well reacting, responsive site so that all users may search the site with ease. The original  image is the largest and this is the front page of the site when people browse with a desktop or laptop.



The second image is what Nixon's site would look like on a tablet. There isn't too much change, but the side images are moving closer in and their isn't much blank space in-between the
advertisement for the Kingpin watch and the side logos.









The final image is what it would look like on a mobile platform. Notice how the entire layout has changed. The layout is much simpler (you can read more about why mobile sites are often simpler in
my previous blog) and the graphics have gotten much smaller. Everything you need is on the front page.