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.

Mobile and Desktop Trends

In the last several years, the world has been overtaken by smartphones. Today, 91 percent of American adults have a mobile phone and most of them have internet capabilities. The gap between  desktop and other devices usage for browsing the web has  narrowed  considerably. The ONW Ravens website has also seen a jump in visits from mobile sites. Two years ago, the percent of people visiting ONW's website on a mobile phone was around 14 percent. Today, it's nearly 35 percent.

ONW's statistics are far from unusual. Mobile usage is  growing exponentially and according to Smartinsights.com,  last year was the tipping point. Now, more people use mobile phones for surfing the web, than they do on desktops.

There are some other aspects to be taken into consideration. When using a mobile phone, we generally have an idea what we are looking for. All sites suffer from high bounce rates (meaning people jump off the site after browsing one page) As a result,  web designers now have to find ways to showcase their content in a simple, but interesting way.

Here's What Happens Behind the Screens