Seamless responsive design is about making the user experience purposeful and positive. It is about creating experiences that are easy to read and navigate across a variety of devices without a lot of resizing, panning and scrolling.
1. One site approach
Responsive design helps to format content dynamically hence you don’t have to create separate sites for web and mobile. It addresses content, reducing time and money in designing multiple sites.
2. Mobile first
If you want to create a seamless user experience, do not write for web and expect it to work for mobile. Instead write for mobile.
3. Get instant information
It is important to tell the user upfront about the product or service offering in a way the user relates. When you design a site, the benefits should be clearly stated.
Example: “Quality Healthcare Services”. Showcase the uniqueness of your service and how others have benefited using your services to build credibility one-step at a time.
4. Increment information leading to action
The story should eventually make the user take action. So keep the copy crisp and compelling to lead to the next level of action. Place action buttons right next to the stories.
Example: The chunk of content talking about
“What makes our healthcare the best”
should have “Read more” button visible right where the user’s eye is likely to move.
5. Spacing and sizing
Remember, you cannot crop content just for the sake of accommodating space. Structure content to two and a half lines in a paragraph.
6. Can I alter the image or use it as it is?
If there are too many elements in the image with layers of typography, background imagery and illustrations, the picture will not be clear in mobile. So present only a visible part of the image.
Homepage attracts more than 80% of the traffic in B2B sites. Designing a crisper homepage for mobile is a good idea. But if you are able to showcase everything using responsive design then there is no need to design a separate mobile homepage.
8. Creating a powerful user experience
Users want to know what’s in it for them in less than seven seconds. Show only relevant content in steps by hiding information without changing the layout using CSS visibility properties.
Icons must be clearly visible so that users don’t have to worry about being extra careful while tapping the icon. Check the button sizes defined by Apple.
9. Bytes and bandwidth
Bytes are an important consideration while designing the mobile site. Users don’t have the patience to wait till the image downloads, so use lighter images for mobiles. For banners it is better to use images that load faster.
10. Creative science
Emotional connect is very important but it is also highly subjective and complex. Therefore a need-based approach designed on the principle of simplicity increases conversion. Great user experience is about constantly fine-tuning the design, content and other elements in the website. This is easily achievable by A/B/N testing.