I am starting a series of blog posts on responsive design tips, and simple things you can implement to create compelling web presences. Here is the first article in the series.
Content priority
While the need to scroll is expected on small devices, you want to make sure that the most important information stays within the visitor's reach and does not get pushed way down. Before you start on the design process, map out the order in which the content needs to appear on the smaller devices first, to prevent the high priority elements from being shoved too far down.
Once you have figured out the content flow for smaller screens, you can determine the layout for larger screens, and if the content there needs to be displayed side by side, or in a different order.
Mapping out the content priority and layout for mobile devices first also helps you eliminate the unnecessary elements and noise.
Make it readable
Making a website more readable is one of the easiest improvements you can make, and also one of the most impactful ones. It goes without saying that hard-to-read text increases the odds that your visitor will abandon the site or won’t be able to absorb the information you are presenting.
The recommended font size for the web is 16px. Anything smaller than that can make your users pinch to zoom or squint when trying to read the text on your web page.
Also, set the line height to about 1.5 to create enough spacing between the lines (1.5 equals 150% of the font size). By the way, the default browser line height is roughly 1.2 or 120% of the font size. The additional spacing between the lines makes your text easier to comprehend.
See the three screenshots below displaying the text style variations at different font sizes and line heights:
Notice how much easier it is to read the text in the first example versus the second and third. Small line height makes the text look too busy and difficult to comprehend.
(By the way, with SignalMind responsive site builder the default font size and line height for text widgets are set to the above recommended values, so you don't have to worry about these style settings if you don't change them).
Image sizes
A few simple things you can do to minimize the size of your images (making your site faster to load):
• Use JPEG (JPG) file format for photographs (not PNG). Photographs saved as PNG images, even compressed, can be more than double the size of the same image saved as a JPEG, while lacking in quality.
• PNG file format should be used for things like buttons and icons.
• Optimize the image size for web (for instance, if you are using Photoshop, use the Save for Web feature).
• Use an image compression service for minimizing the image size. I like TinyPNG where you can easily drag multiple images from your file explorer, and download the compressed version.
Accordion navigation on mobile devices
Accordion navigation is a simple way to make your site content easily accessible and compact - a good fit for the size limitations of a smart phone screen:
With the accordion navigation elements are placed inside collapsible containers, saving the page real estate and making the user experience fast and responsive.
On larger screens these elements can be displayed expanded:
(With SignalMind you have the ability to make elements collapsible on small screens only, or on all screens).
You can also apply a different style to the accordion headers for smart phones, giving the headers a button-like look on mobile screens.
Spacing
The proper amount of spacing around elements is important. Just like with the line height, spacing around elements makes the site content more readable and easier for visitors to absorb. The common mistake beginner designers make is not allowing enough space around page elements.
You would typically want to have more space around elements on larger screens. In this example, notice that the padding around the section heading is larger in the desktop version:
To be continued - check soon for more responsive design tips!