After receiving my Responsive Web Design book by A Book Apart i decided i really wanted to learn about it and see how much it can change my web designs. To start this of i decided to take a section of my homepage and see how i could make it responsive.
 
I started by creating the basics of my grid, populating it with the appropriate text and images, once the easy part was done, the css needed to be started. This task was a hard but once accomplished the rewards should be amazing.
 
I started my css by creating the values for my divs that are placed in my Index page. The main part of this was creating the widths of the divs, this seemed daunting as this is done my percentages and not pixels. A tip from A Book Apart on this matter is when calculating the container sizes, divide the target container width i.e 900px by its context 960px = 900 divided by 960 = 0.9375. This is now going to be used as a percentage once you move the decimal place over two times. The result equals 93.75% for the container width. Calculating all the widths becomes confusing but with a calculator and a composed state of mind i slowly accomplished what i needed for the percentages.
 
The next step was calculating the margins and padding. The padding was easily calculated by using em and % , if you would like a 48 pixel border within a 900px container, you again divide the smaller value into the larger value to get your padding percent of 5.3%. The margins a similarly calculated but can be output with px and % combination. A valid note is you can also use minus percentages.
 
Once the rest was sorted i then concentrated on my text and images. When targeting the code for images i decided the prevent the image from exceeding its container by adding -
 

img {max-width: 100%;}

 
This was first discovered by Richard Rutter and can be read at A Book Apart, the can also be used for videos etc. As im using images for my backgrounds i decided to makes these responsive as well, so they would resize with the browser window i used the following code to make this possible -
 

background: #cfd0ca url(images/background.png) repeat 100% 0;}

 
When dealing with text resizing i used -
 

font-size: 1.7em;

 
This according to many blogs is the value to use to resize fonts, but when resizing my browser, i do not see a lot of difference, but when shown in my mobile version i see a difference, maybe this tool is working but will only be noticeable in bigger leaps within devices.
 
When viewing my site on my phone the results where not as expected, the text column was reduced to 16 characters long, and 1 image, i decided to create a mobile version for this following the Dominque Hazel Massieux method from the online articles Return on the Mobile Stylesheet A Book Apart.
 

 
This is very clear and straightforward but may not be the most updated practise due to the integration of media queries. After creating my mobile version i created various screenshots to show my journey to creating a mobile version.
 
Responsive Screenshots from my Chrome browsers
 

 
Handheld Progression screenshots from my iPhone
 

 
Im aware of a few problems within my prototype, i would like the top header imagery to be limited to a certain size when scaling to smaller browser scales on the screen version, i would also like to resolve this problem on all handheld devices. When viewing the prototype on handheld sets i would like the navigation menu to view all on one line and smaller text. After further research i have found that these can all be tackled with media queries within one stylesheet, which would be most relevant and the best solution. I plan to fix this and create one stylesheet that include media queries that also target the mobile devices. I feel that once i have accomplished this, i will have learnt a lot and will be able to implement this into upcoming projects which will be most beneficial.
 
VIEW THE LIVE PROTOTYPE
 
Referencing -
 

A List Apart: Articles: Return of the Mobile Stylesheet
undefined, 01/12/2011, A List Apart: Articles: Return of the Mobile Stylesheet [A List Apart], [online]. Available: http://www.alistapart.com/articles/return-of-the-mobile-stylesheet [01/12/2011].

 

Ethan Marcotte, 2011. Responsive Web Design (Brief Books for People Who Make Websites, No. 4). Edition. A Book Apart.

© Copyright of Alexandra Milne 2013 | Privacy Policy | Disclaimer | Disclosure