Content Arrangement For Responsive Website Design
In web design, responsiveness refers to the ability of a website to give an optimal viewing experience to its users/visitors by allowing easy navigation, regardless of the device the visitors are using. There are different approaches a designer can take to ensure a website is responsive, and one of these is the way they arrange the content on the site. The following are useful tips to consider when optimizing a site for responsiveness:
Choose Lists In Place Of Grids
Usually, the content on a website is arranged in grids, which are not always visible to a visitor. What grids do is that they arrange content horizontally. While this works for devices with wide screens, it means that some content may not be easy viewable on a smaller screen. To avoid this, break down the grids into smaller screens and then convert any items within the grids into lists. These will be easily viewable on a small screen such as a mobile device.
Do Away With Columns
A desktop PC will allow comfortable viewing of multiple column content. However, when you introduce this content to a mobile device, a whole lot of it will be hidden or even scrambled owing to the minimal screen space. It is always advisable to stick to one column for mobile devices. Do away with excessive sidebars by dropping them beneath the main content or hiding them altogether.
Mind Your Margins
Ensure that you have appropriately adjusted your margins to ensure that viewers have enough wiggle room for navigation. The best practice is to adjust margins before lowering your content onto subsequent sections instead of waiting until after you’ve already lowered the content. The content should fit into the margins instead of the other way round.
Keep It Vertical
For smaller screens, it goes without saying that the best way for content to flow is vertically. In order to ensure that this flow holds in mobile devices, you should add in-page content blocks such as blockquotes, paragraphs, unordered lists etc. that will update the style of the content as is appropriate.
You Don’t Have To Import Everything
You might have a lot of content on your desktop site and feel the need to transfer that to a mobile device. This makes perfect sense from a business owner perspective but is not in the least bit practical. Consider the fact that a user on a mobile device is probably on the move and looking for action-oriented content such as how to make an order, how to subscribe and so on. This way, you will be able to decide what stays on the mobile site and what gets discarded.
Be open to change. If one design is not working, consider reinventing your site. If incoming mobile traffic doesn’t convert into sales, check to see what is going wrong and what could be different-such as placement of action links and so on.
Before, web designers could get away with unresponsive websites. However, with the growing number of visitors from different mobile devices, search engines have made it almost mandatory to have responsive sites if one is to hope to be ranked favorably in search engine results.