At first, creating responsive web designs might look a little tough and confusing, but after doing some research and looking closely at what needs to be done, it will definitely sound like a great opportunity to optimize your web pages for multiple devices & resolution.
Detailed Design Concept for responsive website designs/layouts
To start with a responsive design, you should first try to understand the customer’s requirements, what is it that they want to highlight, what can take a back-seat. Since this is the start of designing, you can try all sorts of possibilities to create a clever and practical design which is easy to implement and adapts smoothly to different screens & sizes.
With this, list down all the elements which are useful for your layout.
Theme Sketch for responsive website designs/layouts
Now that you have all the elements available with you, start sketching different layouts at various screen sizes on a paper before starting with the actual designing. Try to fit all the elements in different screens for computers, tablets & PCs. Please note that the sketch you are creating here might not be the actual design since the actual screen size might be different.
Also at this stage, give a good thinking on how different layouts will look like on these different screens. For e.g. how 2-column layout will appear, where will the right side bar reside in case a 2-column layout page is browsed on a tablet or phone.
Sketching Tools available for responsive website designs/layouts
There are a number of tools available for sketching the design you have in mind. You can sketch these designs on paper as well if you are comfortable. Few commonly available tools for responsive website design are:
- Paper by FiftyThree (Available as iPad app)
- Bamboo Paper (Available as iPad app)
- Style Tiles
- Golden Grid System
- 1140px CSS Grid
Developing the responsive website design/layouts
After you have finalized your design and have thought over the challenges which you might face, you should finally start with the development of the responsive website design. There are a number of libraries/frameworks available which can serve as a starting point for you. Few such frameworks are Twitter’s Bootstrap, ZURB’s Foundation etc.
When you develop the layouts, your testing approach should be to start with the mobile first, then tablets and then desktop screen sizes.
You should also consider the type of images you use in your website. If there are images which are too big in size, you might end up having a distorted layout on the tablet or mobile browser. These days using CSS3 and a wide variety of fonts, you can create really great designs with minimal use of images. Also, instead of using traditional icons, try to use icon fonts.
Testing the responsive website design/layouts
Testing a responsive website design/layout can be quite challenging since any change you make in the design might affect the pages badly on any of the device or screen resolution. The key to a good responsive website design/layout is Test, Test and Test.
You should first start the testing with your mobile device, then move on to a tablet and finally to desktop of different resolution.
Screenfly is such a tool which can help you testing your webpage on different resolutions. But manual testing on different sizes is very important for a successful responsive design.