With responsive web design becoming the new standard, we are seeing mobile and tablet versions of law firm websites. This is a very exciting shift as it helps ensure that visitors have access to the same information no matter the device they are using.
However, we must still ask the question, are the responsive designs we’re seeing taking into consideration the usability differences between browsing on a mobile device and a desktop?
Based on our experience the answer, sadly, is no. So let’s change that by considering what the differences are between desktop and mobile browsing and and how we can best plan and optimize for them.
Understanding Responsive Design
Responsive coding, in a nut shell, is making your website’s elements flexible enough through CSS or styling that they can be displayed differently for different screen resolutions.
Specifically, it is optimal that your website be able to accommodate desktop, tablet, and mobile or phone users. Search engines love responsive coding because the mobile and desktop versions display the same information, and thus, the same optimization elements.
Ideally, your responsive site would have very few changes from the desktop version, however this isn’t always the case. Aesthetic style changes like click to call buttons are OK.
Here’s an example:
Call Now for Awesome Lawyer SEO
However, as more layout changes happen for one version (like phones) but not for other versions (like desktop), the value of using responsive elements begins to diminish. The reason is because it will end up creating two versions of the site for both the search engine and the user, which is a sub-optimal experience for each.
Having completely different versions normally means you will have some elements hidden on one display but not others. However, the added code will be in every version which will increase your page speed. On a mobile device we want the page speed to be as low as possible.
Feeling the Click?
The biggest difference between mobile and desktop browsing is using a touch screen to select instead of clicking with a mouse. Since everyone’s fingers are different sizes, and no one’s are as small as a cursor, our mobile versions of websites need to be easy to navigate and select with our fingers.
Optimizing for the user
There are two things we need to remember when talking about optimizing for mobile friendliness.
The first is the device and the second is that users have both fingers and thumbs which they use to navigate.
Different devices have different recommendations for what the target or button size should be. Most operating systems make the specification that the sizes are to be at minimum a square of the following sizes:
- Apple iPhone: 44px
- Windows Devices: 26px-34px
- Android Devices: 27px-38px
These sizes give us a very good idea of what the ideal size of a touch screen target would be on these devices, but they don’t consider that the end user could use either their thumb or fingertip.
Below are the average sizes of an adult finger and thumb based on a study from MIT on tactile sense.
- Average Adult Thumb Size: 72px
- Average Adult Finger Size: 57px
As you can see there’s a bit of a disconnect between what the phones usability is and what is ideal for human interaction with the devices. Most of the difference comes from the expectation that we will use the pads of our fingers on devices, though it is far more natural for us to use our finger as a whole.
At a very minimum make sure your target, buttons or navigation is 57px for finger navigators users and ideally 72px for all users no matter thumb or finger browsing.
Keep It Simple
The last major point I want to cover for making sure your mobile site is going to work well is to keep the site simple. A problem I commonly see with responsive websites is that they try to do too much in the mobile version in terms of the appearance and calls to action.
With smaller screen resolutions we shouldn’t try to cram unnecessary information that might only distract users. Good examples of this are social sharing buttons. You should leave these out of your mobile version as this functionality is built into most phones already. Hiding these elements, or at least or diminishing their prominence, will help you convey a concise message to your users about what you do and how they can select your services.