Responsive Web Design Example

After finding out about what 'responsive websites' are, i took it upon myself to look at an example of a responsive website and discuss it here and talk about the appearance as well as the benefits of responsive web on tablets and mobile devices.

Below is an example of a website called 'smashing magazine' and i was able to find on another website with an image which displays the web page on three different devices. Main one being desktop, the other being tablet and the final one being mobile (shown below).

Link to 'Smashing Magazine': http://www.smashingmagazine.com

Desktop:

Let's start with desktop, so this is the main large device which will display a widescreen full view of the whole website with everything on screen and nothing hiding. This is usually how websites start as when being built, usually its built on a desktop and is made according to the display for most desktops and then downgraded and changed for the tablet and mobile devices to view the site.

The positives about the website here on a desktop is that it is wide and is able to present a lot of content within the page because its large enough to do so, however to some it might look overwhelming because of the amount of text on screen or get confused because of the navigation or whatever.  Overall on the desktop for this site you can see that its wide and allows room for a lot of content to be presented to the user when they access the site.

Tablet:

With the tablet version of the site, it isn't in wide screen, however the tablet can be moved around to create a landscape view of the site which might display the site in a different way than it would portrait. Overall you can tell that on the tablet version in this instance that it isn't widescreen and isn't as large as the monitor for the desktop as its a handheld device.  As you might be able to tell that a lot of the content to the right on the desktop has completely vanished on the tablet version, as well as the search bar has moved underneath the logo in the tablet version, and also the navigation to the left has also been taken out in the tablet version, and this is because of the size of the tablet.

Because the tablet isn't as big as a desktop monitor it an't fit all the content from the original desktop version because there's too much content to fit within a small screen, and if it was done it would make it very hard to read for the user. Because users want to be able to read whats on screen whether its a desktop or tablet or mobile its important that the user can see it as well as be able to read it.

Mobile:

As you can see to the left/middle of the image above you can see the mobile version of the site of smashing magazine. Because most mobile devices are very small its impossible to have all the main content from the desktop or the tablet version of the site, so more needs to be hidden and taken out in order for anyone to be able to view the site an its content. In the image with the mobile version of the site you can see there isn't too much detailed content in there its all laid out on one row with other content sitting underneath each other, due to the lack of wide space on mobile devices. If the website was turned around landscape it might look slightly different, but despite this the content is quite minimal making it as easy as possible for mobile users to view the site without being overwhelmed or  being put off by all the content.

Sometimes its necessary to have the less important content or complicated content for smaller devices out of the way or taken out as it'll help to simplify the site on those devices, making it easier for users to understand the site and what it is as well as accessing and navigating through the content.

Responsive web design helps to include the vital concrete parts of the site that need to be in and takes away or simplifies the site by removing or hiding the messy or complicated content or assets of the site in order to fit the window of the device, in order for the website to respond to each type of device, which is why its called 'responsive web design' as the web design is responding to the device its on and laying out the content for the user to access and navigate through, thus making it easier and giving a better and more aces sable website on all devices and giving the user a better experience using the site because of this.