Bootstrap

Design for Digital Media Environments – Responsive Web Design

With the multiple number of devices that people have these days its extremely important to make websites responsive. A responsive website design is one that adapts to difference sizes, from desktop, tablet and smart phone. An example of how a website adjusts to different screen sizes can be seen below. This type of browser that adapts to changing width came about in 2004 by Cameron Adams. Six years later responsive websites were becoming all the rage, at one point being list number two in Top Web Design Trends.RWDWhen it came to making our website responsive we decided to use bootstrap. By downloading bootstrap our website would become responsive as it is already integrated into bootstraps css file. As you can see from the images below our website is viewable on desktop, tablet and smart phone.

– Desktop

Screen Shot 2015-03-20 at 09.17.04

– Tablet

Screen Shot 2015-03-20 at 09.16.51

Smart Phone

Screen Shot 2015-03-20 at 09.16.33

References:

Caver, Stephen. ‘Responsive Web Design: 50 Examples And Best Practices – Designmodo’. Designmodo. N.p., 2014. Available from: http://designmodo.com/responsive-design-examples. Web. 20 Mar. 2015.

Advertisements

Design for Digital Media Environments – Homepage Draft 1

As I’ve created some sketches of possible webpage designs, I thought it would be best to get straight into coding the real designs. As I’ve put most thought into the homepage I started this first. Just as Adam did with the ‘Meet The Team’ page I also used Bootstrap. Bootstrap is a far easier and more time efficient way of coding as it provides you with all the css. For instance to get the nav bar all I had to write was “<nav class=”navbar navbar-inverse navbar-static-top”>”. This short code gave me a default nav bar, it may not look amazing, but it works and that’s what counts.  Screen Shot 2015-03-05 at 20.36.06I did however have to make a few amendments to the original sketches. The nav bar for example is now place at the top and for two reasons. The first being its the default positioning in Bootstrap and the second being the fact its more widely used design technique. This design I’ve created is far more completion but gives us a solid starting point to work from. In the next few days I will attempt to create pages for the categories and other aspects of website.