Building a Better Responsive Website.

Page 1

Building a Better Responsive Website

Today, most of users accessing the website through hand held devices also the Mobile sales have overtaken desktop sales, therefore the need of responsive web design has been increasing. While creating a responsive site designers face many challenges. But to find a perfect solution for this we need to experiment or we have to explore the designing process in details to improve our responsive workflow. Defining Our Goals The first step we need to make a list of the benefits and drawbacks to the responsive approach we had been using. B E N E F IT S  To build, maintain and promote a website.  Support for a variety of screen types or sizes.  Future-friendly, because the layout will reflow based on screen size.


DRAWBACKS 1. Content designed only for the large-screen devices, often delivered to small screens and simply “turned off” with CSS media queries, creating unnecessary downloads. 2. As we use markup as one-size-fits-all solution, we are unable to change the source order later. 3. From the above, we have noticed that we need a solution with a responsive approach where a mobile-only solution excels. Starting With Content The responsive approach must provide access to the same content across all devices. Gather data what is more important to your audience. Designing to the extremes Start by designing the desktop version of the website, the typography, design, style, visual appearance etc. if you are happy with this then work on mobile version by adjusting the layout as appropriate for the smaller devices. Some other points include mobile first, responsive web design navigation, getting help from CMS. Use 7 tactics:  Resizing your browser window and make sure it works as the width changes. Try to accommodate every device size. Use Modern.ie for browser testing.  Try to choose a theme that is responsive out of the box, i.e. Dynamik [affiliate link].  Use rems as your measurement unit for font size. You can change the font size for the html element, and the text will adjust accordingly.  If you have a lot of navigation items, consider a responsive “hamburger menu” to save space.  Consider hiding entire sections on mobile, i.e. the sidebar.


 Check elements that may have fixed widths such as tables, iframes, video embeds. For videos, use the Advanced Responsive Video Embedder plugin  Use divs instead of tables when possible. Only use tables for tabular data. Divs are more fluid. Conclusion We have mentioned some of the tactics to improve responsive workflow, I hope this will help you to overcome some obstacles that you face when try to design a perfect website. Or you can consult a reputed web design and development agency placed at Toronto that helps brand create unique identity and successful marketing campaigns.


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.