29/01/2013

29/01/2013

This week we are working on responsive web design. Responsive web design allows your site to adapt its layout based on what device has accessed it. So if it's accessed on a smart phone, the website detects that and changes to fit its screen size. In class we looked at how this is done, By setting up "@media (max-device-width: 1024px) and (orientation: landscape)" (Ipad lanscape for example).

For the exercise we constructed a Web Fragement. I did mine on an article from psdtuts. Basically it was a review on some of the html and css we learned in the first term. I used <a href>'s to make the links, a float to move the content to the side of the articles picture and just applied padding to even it out.

---------------------------------------------------------------------------

We looked at a site called boiler plate. It resets the source code and the formatting so you can start your websites design from scratch.

"HTML5 Boilerplate helps you build fast, robust and adaptable web apps or sites. Kickstarts your project with the combined knowledge and effort of 100s of developers, all in one little package!"

html 5 boilerplate: http://html5boilerplate.com/


We began using Dreamweaver. It's used if you want to make your site primarily for phones, and then lets you work you're way up the sizes to desktops. Going into Fluid Grid Layout, you will be given options to set the number of columns in your site, the columns width as well as the percentage size the site will occupy of the screen.
Dreamweaver will also save boilerplate automatically with your files.

We started making a webpage to get the feel for responsive web design ("Warriors of Xian").
We make the default size of the page using all the usual div's and id's, and began making changes by applying '@media only screen and' for the minimal widths of 769px, 481px and 480px and below. for each size we slightly changed the code so it would fit comfortably in smaller screens. An example would be the width for the main id. It starts out on width: 100%, then width: 58.5%, and finally width: 54.9%. I feel that this example gave me a fairly good grasp on how the responsive sites work.

Example Screenshots:

Full Screen: 769px

Half screen: 481px.

small screen: below 480px