in Design

17 Important Tips For Designing Responsive Websites


Responsive web design plays an important role to attract many customers. The main idea here is to create a web design that will easily fit into the size and shape of the chosen screen.

Here are some tips to design responsive websites:

• The best website design should be adaptable to all conditions. Make it flexible. Improve the pixel perfectionism so that users can read the content present on the website in an easier manner.

• Don’t focus on percentages like inches, centimetres etc. This may vary with the screen width. Analyse how they will change in different windows and design your website accordingly.

• Focus on the functionality rather than including too many buttons.  These days’ users are more attracted to swipe, punch, slide etc. This helps in generating quality visual designs and gives better experience.

• Provide good navigation on the website. Concentrate on viewing design. For example the design should interest the user by providing easy navigation. The user should shift from logo to the basic content, then to image, then to the main text. To gain precedence you should use tools like

– Position: of content or image at the right place.
– Colours: should use bold and bright colours
– Contrast: design a creative webpage to make it different from others.
– Design elements: Highlight important text in bold colours or use symbols or arrows to point them out.

• Give appropriate space between the texts which makes it clear to read the data.

– Line spacing: space between the lines matters a lot. Manage the line spacing in CSS with line-height selector.
– Padding: Make sure that your text does not touch other elements on the webpage. For example, it should not get mixed up with images, border, tables etc.

• CSS layouts enhance the web design. Select a suitable font size according to the rules of web design.

• Text is an important element. You should focus on font. Different fonts have different impacts on design layout. Ensure that you use the perfect tool that works well with the selected design.

• Check whether your text size is consistent, large, bold and well-structured with headings and sub headings.

• Responsive design must use fluid grids. It create liquid layout which automatically extends with page. But this doesn’t work well with large screen resolutions.

• A fluid grid is entirely different from traditional layout. It focuses more on proportion instead of focusing on rigid pixels, arbitrary percentage values.

• It plays very crucial role in designing responsive pages. If the width of the browser decreases then fluid grid will not show affected results.

• CSS3 media queries will be compatible with all browsers. Go through CSS queries rules to design an effective webpage.

• Select a suitable template. There are many free templates available on the web which make your work simple and easy. For example mobile boilerplate, 1140 grid and skeleton will save you time.

• Image adaptation should be given much importance for redesigning a responsive website. The basic step is to describe a width of 100%. If max-width is set to 100% it will ensure that images will never exceed parent container.

• JQuery is an amazing tool used for web development. Select an appropriate JQuery plugin which helps in creating a responsive website. For example use Fit text, Elastislide, supersized, FitVids.

• Go through other websites. Get inspired from others. Online galleries are designed to display responsive sites. Check out WordPress Themes Responsive features and get inspired by them.

• And the final step is to test the responsive layout in different resolutions. There are different tools available on the web to test these layouts. Screen Queries and resize browser are popular tools.


About the Author:

This guest post is contributed by Zara,financial guest blogger. At present she is focusing on ppi claims . Catch her @financeport


Bogdan is the founder of Top Design Magazine. You can find him in Bucharest-Romania so next time you want to drink a beer there and talk about web and stuff, give him a message.