Step by Step Tutorial for Creating a Responsive Site.

The trending for designers to make a responsive website (and this post will show you why you need to make a responsive website.). Responsive Web design helps you display your site perfectly on the ever-growing number of devices and different screen sizes that exist now. And WordPress has the most users for website users to create a website. This post today will show you how to make a responsive site with WordPress.

1. Choose a responsive WordPress Theme for your site.

People have different intention for making a website like blogging, sharing, earning money and more. So people choose different kinds of style WordPress Theme to decorate their sites. You can select one for your site on this post -- Top 8 Free Responsive WordPress Themes Sharing. Maybe a free one can meet your requirement.

How to choose a very responsive theme?

Looks. This should be your first consideration when choosing a theme. A theme should be able to give you the look you want without having to spend days and hours customizing it.

Performance. Themes may often affect your site's loading speed, so stay away from themes that call on too many files, or forces you to load files with too many kilobytes. A theme should not slow your site down.

Customizability. This is probably not a problem if you are buying a theme, but if you are looking for free ones, then there might be some limitations on what you could customize and personalize with your theme.

2. Transform your current theme into a responsive one.

Once you have already get a favored WordPress Theme but it is not responsive. How to handle this problem?

① Get your media queries in order.

When you get a WordPress theme, you should have a stylesheet that is used on both mobile and desktop versions of your site. You would only have to specify how particular screen sizes would be different from this default style.

You would need to define the maximum width that this set of styles changes would apply for. To do that use:

@media screen and (max-width: 320px)

This means that for screen sizes measuring 320 pixels wide or smaller, a different set of styles would be used.

Other screen sizes you might want to use are 480 pixels, 780 pixels and 1024 pixels.

② Know how to deal with images.

Images can be a problem if they are too big and they spill out of their containers. To ensure that this never happens, add the following code to your CSS

body img {

max-width: 100%;,br /> }

Either that or you upload different image sizes, which will be loaded accordingly depending on the size of the device used.

③ Use the appropriate text size.

When working with a smaller layout on a small screen, your text might appear very big. So just adjust the text size using this handy code:

body {

font-size: 60%;

line-height: 1.4em;

}

④ Change other elements appropriately.

Other elements in the layout that you need to change include the overall width of the site, the sidebar, the content, footer and widgets.

⑤ Know how to deal with navigation.

There are a lot of techniques to help you get a more responsive navigation on your site. For one, you could use a drop down box rather than a navigation bar. Or you could have your navigation menu take up an entire page and create an app-like environment for your site. Or even getting plugins to handle the navigation menu for you.

Post Original From: http://www.webdesign.org