Responsively Designed Websites

     Responsive web design is when you create a website and you make sure that it has the optimal experience for your readers across many devices. In other words, you want to make sure your website looks good on a desktop, tablet and phone. Recently this has become more and more important considering the use of phones on the web has skyrocketed these last couple of years, like I mentioned in my last post right here. Media Queries are used to make sure that the resolution of the screen will adapt to the devices you are using and it is vital to making a responsively designed website. You can tell if a website is Responsively Designed my shrinking it down and telling if there are any breakpoints. Breakpoints are a point when the layout of the website changes when you reach a certain width.

One great example of a Responsive Web design would be on the Official Microsoft Website. As you can see in the first photo I am using a wide screen to view the site. You might not notice but the Xbox One ad will automatically cycle through to the Surface Pro 3 ad. Another thing to take note of is the size of the Icons under the For Home section, you might not see it well but it is split  up into 4 sections across the screen. Overall it seems like a pretty normal website, so lets take a look at what happens when we shrink the screen slightly.

At this size the website looks slightly different. Not much has changed but instead of the having 4 icons under the For Home section there is only 2. Of course these other icons did not disappear but instead they went further down the screen and only had 2 icons across the screen, other than that small change nothing else was affected. Lets take one more look at what happens when we shrink the screen to the size of a mobile phone.

This is the thinnest version of the website mainly meant for mobile devices. One of the most obvious changes in this size is the bar that used to go horizontally across the screen no goes downwards vertically and it also has changed into drop down menus. The last thing that changed is the Surface Pro 3 ad, it no longer automatically cycles through to the Xbox One ad, instead you can manually cycle through them by touching the arrows.

Overall Responsively Designed Websites can really make it a better experience for those who are using mobile devices or tablet. Even though it slightly changes the site, Good Responsively designed sites keep the core of the website still there so you always know its the same site. It will be interesting to see how often this idea will change and adapt to the usage of more and more mobile devices over the coming years.