Website Design Tutorial 01

RESPONSIVE LAYOUT RESPONDS AS PER DEVICE.

SO WE MAKE LAYOUT IN PERCENTAGE AND SET BREAKPOINTS USING MEDIA QUERIES

What is percentage layout

If there is a div inside another div, then the div will be 50% of the parent div
Even margin,padding will be in percentage
In photoshop make layout of 1000px
Then slice – create wireframe on paper
In the wireframe – write percentage values
Eg, 500px becomes 50%, 250px = 25%

BREAKPOINTS ARE:
1824PX = TV
1280PX = DESKTOP
1024PX = NETBOOK
768PX = TAB
320PX = MOBILE

MEDIA QUERY TAG IS USED IN CSS FILE AS:

MEDIA QUERY TAG IS USED IN CSS

@media only screen and (max-width:320px){
Here u copy the css and show changes

Eg. float:none; (to keep div one below other)

display:none; (to delete a div)

font-size:2em;(1em is 100%)

RULES FOR RESPONSIVE DESIGNING

WIDTH,MARGIN,PADDING IN %, NO HEIGHT

FONT SIZE IN em

body{margin:0;padding:0;}

<meta name="viewport" content="width=device-width" initial-scale="1.0"> 
- 
use this in head tag

Tips and Tricks in Responsive

1.For swapping image in desktop and mobile version, keep 2 images one after the other in same div.

Give them class a and b respectively.
 Use 

display:none 

and 

display:block 

to hide and show the images.

2.For swapping divs in desktop and mobile version,

Write in the divs as in mobile
Eg.

<body>
<div id=b>bbbbb</div>
<div id=a>aaaaaa</div>
</body>

Then in mobile version, use float:right for div b and float:left in div a

3.For navigation,

In desktop,

ul{list-style-type:none;width:100%;

margin:0;padding:0;}

li{ width:23.75%;margin-left:1%;float:left;

}

ul li a{text-align:center;padding:2% 0 2% 0;}

For mobile, hide the nav and show the mobile navigation jquery.

For banner, download responsive banner jquery
or

you can swap image for desktop and mobile version

or

you can use example 4 in the folder

For video, use Youtube video as used in example 4 in the folder

When to use clear:both;
We don't give float to wrapper, rest of divs have float.
So we create a class

.clear{ clear:both;}

We call this class just before wrapper ends
Eg. 


<div id=wrapper>

<div class=clear></div>
</div >

Leave a Reply

Your email address will not be published. Required fields are marked *

×