3 Easy Step To Create Responsive Web Design [Tutorial]
Step 1: Think And Apply Layout
After Mobile Market evolution responsive web design and redesign website is part of the website and finally you have decided that your website project must use responsive design, it is important to think about the layout.
Designers are generally confirm to building websites that apply to an all around best width (1024×768, 320×480). When you are developing a responsive website, you have to think a little differently because size is a main part for make responsive design.
And for example of various layout you can take look on redesign unit which is apply proper images in various layout so you can get proper experience from that.I highly recommend beginning with thinking about your mobile layout first, and build progressively upward. If you are using responsive, you had mobile in mind, so begin with that!
Step 2: Do Coding For Responsive Design
Understand yourself with using css media queries. This is the first step in building a responsive website. Using media queries is not the only way to create a responsive website. It is a good idea to use some other resources as well to bootstrap for older browsers and different operating systems.
Use this tag in the head section of your code:
This will instruct the browser to set the window width to the device’s width without overriding any user needs.
Then set in your Css:
This is an in-progress to move this viewport information over to CSS. IE10 and Opera browsers support this.
Try a responsive grid system:
If you are familiar with using css grid layouts, here is one I recommend for responsive design: 1140 Grid.
Tools for older browsers:
Using media queries (@media) is great but remember one thing alone isn’t really responsive design. You may have to add other tools to make older browsers work as well. Here are a few tools that can be helpful with this:
- CSS3-Mediaqueries.js : CSS3-Mediaqueries.js, by Wouter van der Graaf, enables older versions of IE and other browsers to effectively test and apply all kinds of media queries.
- Adapt.js : Nathan Smith, author of the original 960.gs grid system, has written Adapt.js, a script which detects browser dimensions and serves only the required stylesheets – like media queries but without media queries, meaning it works in older browsers too.
- Respond.js : The one issue with responsive design is that browsers that can’t read media queries get left behind. This may not be an issue with your target audience, but it is still a good practice to accommodate users on older browsers. Respond.js, by Scott Jehl, only supports properties min-width and max-width.
Step 3: Testing
There are some really great tools out there for testing. You can take test enough when it comes to responsive design, and below I am including some very helpful ones:
- Responsinator : a tool that will show you many different layouts in one page
- Adobe Shadow : a tool that will allow you to test on multiple live devices simultaneously while developing.