Responsively designed websites are a necessity today. Responsive websites enable mobile users to have equally as good of an experience on your website as desktop users. In a world where mobile use online is growing year after year, ensuring that your website is responsively designed could be the difference between users spending a lot of time on your site or bouncing after only viewing a single page.
Responsive design offers many additional benefits. Before the creation of responsive designed websites, companies had to create multiple websites for each specific device. This meant that website managers had to manage and update websites for desktops, mobile phones, and tablets. This was inefficient and error prone. As technology offerings improved, website developers began to create websites that could responsively resize and rearrange website content and optimize that specific user experience based on screen size resolution. Essentially, a responsively designed website prevents mobile users from having to do extra work (scrolling, zooming) to consume website content.
In 2015 Google made the announcement that a websites mobile accessibility and experience would become a ranking factor in search engines. This meant that if website designers did not consider responsive design, those websites would be penalized on Google for delivering a less than ideal user experience to mobile users.
Having a website that is responsively designed is clearly very important for user experience on your website, however what specifically should be thought about when optimizing a desktop site for mobile aside from the obvious rearrangement of assets?
Mobile screens are much smaller than desktop screens, so it is very important that screen size is taken into consideration during the menu creation process. Mobile users should not have to zoom in or scroll to see menu items. This means that when viewed on a mobile device, menus should be condensed and simplified yet still provide easy navigation through your website. Here is an example of a desktop menu vs. mobile optimized menu.
Hand in hand with reducing menu complexity is the search feature. It is extremely important to include a search feature on responsive designed websites. Having too many options on screen could confuse users and muddy your user experience. it is recommended to encourage mobile users to utilize search to find what they need on your website over lengthy and detailed menus.
Form Length Should Be Considered
It is much easier to fill out a long contact form on a desktop computer than it is on a mobile device. Mobile websites should include quick and easy forms that only require information that is pertinent to the action at hand. The longer it takes for a user to fill out your form, the more likely they are to abandon the action and leave your site.
Clearly displayed Call to Actions
Call to action buttons need to be clear and obvious on mobile. Screen size is the important factor in mobile responsive built websites, and it is important to consider this when planning out CTAs. There is no reason to overwhelm users by jamming as many CTAs as possible on to their mobile phone screen. Additionally, important is to avoid pop-ups on mobile devices as CTA. These are often unappreciated by the user and difficult to close out of on mobile. Pop-ups ruin user experience.
Size Must Be Considered
Browsing a website on a desktop or laptop computer is very simple and it is easy to accurately click around using a mouse. The same cannot be said for users on mobile devices. When optimizing a website for mobile users, buttons must be appropriately sized to be pushed by a finger. Also, clickable objects must be appropriately distanced so that users can easily click specific items without accidentally clicking something else. 75% of mobile users use their thumb to touch the screen and navigate websites. This image shows the best locations to place CTAs and buttons for ease of use on mobile.
- Avoid corners
- Reach decreases as screen size increases
- Consider placing clickable buttons and objects towards middle of screen
The Complete Guide to a Mobile Friendly Website, www.quicksprout.com/mobile-friendly-website-guide/.
Why Is Responsive Design So Important?, www.webfx.com/web-design/why-responsive-design-important.html.