Want to make responsive html5 websites Tutorial 3 of 10

Want to make responsive html5 websites Tutorial 3 of 10

In Part. 3 of “Want to make responsive html5 websites Tutorial 3 of 10“, we are going to explain concepts and CSS3 rules to pretty much control the layout and styling of the new responsive website. In Part. 2, we made few assumptions about minimum requirements you will need to have in order to get the most of the html5 websites Tutorial.

On a desktop website, we usually can find width and size to fit within a 960-pix grid.

In the mayority of mobile devices, the size resolution narrows down less than 960 pixels and in mobile phones, there is only 1 column from the original 3-column design. You got to make everything fit in a smaller screen.

That’s when the Responsive Web Design (RWD) enters the game.

Websites developed with the RWD technique, adapt their layout according to the environment of the user’s browser. CSS plays an important role here.

Depending on the current value of certain browser conditions like window size, device orientation, or aspect ratio, we can apply CSS styles in different circumstances. One size fits all columns.

RWD techniques

  1. CSS3 media queries: apply CSS rules based on browser window width, aspect ratio and orientation.
  2. Fluid-grid layouts: use CSS percentages vs absolute size in px for page layout elements.
  3. Fluid images and media: make images and media scale within parent bounds.
  4. Use different CSS rules in different places

We can use @media rules to apply CSS selectively.

Common media types are screen, print and all.

@media screen { /* CSS Rules for screens! */ }

The rules between the braces will only apply when the content is rendered on a screen.

Another way to use media types to apply CSS selectively is from within ain your HTML document.

The rules in this ext stylesheet will only be applied if the content is rendered on a print device (printer).

CSS3 media features CSS3

@media screen and ( min-width:480px) { /* CSS Rules */ }

The rules will apply if the condition is True.

Now, in order to practice these rules on your own:

  • Check your current website and analyze its structure.
  • Identify layout pieces that need to change to work better on mobile browsers.
  • Generate mobile-adapted CSS for those identified elements
  • Organize our CSS and selectively apply the mobile and desktop CSS using media queries.

 

Alright! We have cover the essentials and some important concepts to have in mind before we go into the code.

Next lesson, Want to make responsive html5 websites Tutorial 4 of 10, I’ll post a link to a HTML / CSS site so we can fetch some tags to finally decide what to change in our page to create a beautiful RWD site.

Go ahead subscribe to sdbwebsolutions to continue to part 4 tutorial and be able to download the source code for a brand new site.

Thanks for reading and see you next time!

 

 

Continue to Part. 4

 

, , ,

2 Responses to Want to make responsive html5 websites Tutorial 3 of 10

  1. tech_comm March 20, 2012 at 9:07 am #

    Excellent job!

Trackbacks/Pingbacks

  1. Want to make responsive html5 websites Tutorial 4 of 10 - March 20, 2012

    [...] html5 template and try it with any mobile device you have available. Don’t forget to add the first 3 lines – media queries – instructing the browser how to adapt to different the screen [...]

Leave a Reply

s2Member®