Responsive CSS design – Web Design Tips

Responsive Css for a web site will increase a websites visitors by attracting the mobile and tablet visitors also along with the vistors who enjoy thier post in desktop version.Now the number of people who are using the tablets and mobiles to browse the web are increasing.Hence a web page layout should be adaptable for all the view port of the device in which the visitor views the webpage.Some of the tips and tricks for the designers to keep in mind when they design a responsive webpages are given below.This will be a prefect resource for responsive web design tutorial in web.

First we should look at a website with responsive layout  for inspiration and could analyse what all the things that are followed in it. In web there are lots of good responsive websites.One among is http://danielvane.com/ . Designer has really worked on its flexiblity.

 

After analysing this website we could finalize some of the tips to be followed for a responsive design.

Step1:RESPONSIVE  VIEW PORT :

The website uses a responsive viewport.Usually the web page is displayed in a wider manner.So specifying a viewport will make the width to fit the device in which the page is viewed.

<meta name=”viewport” content=”width=device-width, minimum-scale=1.0, maximum-scale=1.0″ />

 

STEP2:RESPONSIVE IMAGES:

Makeing the height and the width of the images to auto is best for responsive webpages(should be used).

Also make sure always using a compressed image.Because images of 5mb or above are produced when captured from digicams.It will take time to load in mobile internet.Hence make sure you compress the image before you use it in the website.

Some of the sites found in the web

http://www.imageoptimizer.net

http://jpeg-optimizer.com/

 

STEP4:MOBILE NAVIGATION MENU:

Navigation menu for mobile should be redesigned when the page is viewed in a smaller width.You could see how the menu is re aligned in http://danielvane.com/ when the width is reduced. Some responsive mobile navigation menus are available in internet.

http://webdesignerwall.com/demo/mobile-nav/

 

STEP5:RELATIVE POSITIONING OF ELEMENTS:

Every element in the html is relative to another.Thus it is much flexible when the browser width gets changed.In the http://danielvane.com/ header and side menu positions are relative.That gives the flexiblity for the menus to get aligned below the header when the width is reduced.


 

STEP6:RELATIVE FONT SIZE AND USAGE OF PERCENTAGE:

Instead of using px for the font sizes em is used .Thus the font size reduces relatively when the fond size of the header or some other html element reduces.Percentages should be used instead of px.Eg instead of setting as 1000px , 100% or 90% should be set based on the requirement.Thus the website scales based on the width.

 

STEP7: MIN WIDTH AND MAX WIDTH WITH  MEDIA QUERIES:

Min-width and Max-width should be mentioned in the CSS along with the width.Thus imposing a constraint for the widths are better suited for scalability for its width.media queries should be added with the min-width or max-width as condition to display certain elements.

Media queries are so important for a responsive css design.

@media screen and (max-width:320px)
{
    .ad_bar{ display: none }
}

In the above code we are making the ads to disappear when the display device width is below 320px.By this we way we provide a better readability of the content in mobile devices.

If you have any more suggestions to be added , feel free to comment below.

 

0saves
If you like this post, contribute us by sharing this in your network

,

  • http://www.topapprentice.com/Blog/searching-affordable-website-design/ Searching affordable website design! | Top Apprentice Blog

    [...] Call Me TonyGet the Right Vehicle Tracking Solution for Your Business — lawmacs web design blogResponsive CSS design – Web Design Tips /*Is [...]

  • http://www.cbil360.com/ Web Design Company

    Do doubt about above responsive css web design tips. It’s one of the my favorite articles which I ever read. Thumps for it.

  • Anonymous

    I’m so glad you like it. Subscribe our blog for future updates. 

  • Anup Khandelwal

    Very informative link. Can you please also provide us more tutorial links on Responsive CSS design?

  • Anonymous

    Thanks anup ! Sure i will. Subscribe us 

  • http://twitter.com/dcgws DCGWS

    This is such a very good article! I shall retweet this! I enjoyed reading this! Thanks by the way!

  • http://www.webtuts.info/webdevelopment/css-media-query-tutorial-existing-website-responsive/876/ CSS Media Query Tutorial – Make Your Existing Website Responsive | WEBTUTS

    [...] css, webdevelopment I have posted some weeks ago about the web design tips for responsive design-(LINK) , as many readers requeseted for an another version of the tutorial on responsive design am making [...]

  • http://www.youtube.com/watch?v=UoQ-pKYYI1M Web Design Riverside CA

    These rules are actually very simple and easy. But we rarely care to implement those in our designs.

Ver peliculas online