Are you redesigning your website with mobile devices in mind? No? Did you originally design it that way? Did you just grab your tablet or smart phone and look at your website? You should. Depending on your source, recent statistics show that globally, anywhere between 25-60% of page views come from smart phones or tablets! It is best to take a moment to review your mobile strategy as over HALF of your customers is nothing to shake a stick at. Now might be a good time to consider a redesign of your home page and in turn improve the way it is accessed on a mobile device. Do you simply want to mirror your desktop version of your website or do you want to provide a significant number of your shopping customers a functional and informative mobile experience?
Responsive vs. Adaptive Web Design
Responsive design is not mobile design. Responsive design means that the images and text on your website are dynamic, and will contort, bend and shift to fit any size screen. Alternatively the adaptive approach is when your website is designed with a few layouts to fit widths of different sizes. The adaptive approach is the mobile solution. Some web designers claim that the responsive approach is satisfactory, but all it provides is a less broken experience for a mobile user. Mobile users will find your responsive website frustrating to use. At Caffeine Consulting we are committed to providing our clients a top notch, mobile-compatible experience and we believe the adaptive approach provides this.
Navigation
Standard navigation of your mobile site is not sufficient. Oftentimes the tabs you used are too wide for a nice mobile experience. Consider redesigning with a hamburger. Not fast food but the stacked three bars you expand to navigate to other pages on your site. Some may argue there are better ways to condense your menu, but I think they are all in agreement when it comes to finding an easier way to navigate a site with a mobile device. Here is a great example: www.yahoo.com. Try it out on both your desktop and your smart phone. See the differences? The mobile site collapses the Categories, Sites, Magazines, Apps, and Tools into the hamburger for a cleaner mobile display.
Iframes
Iframes make sites more complex or content heavy, and are a lazy way to fix a need when organization and planning was not a priority. In a nutshell, an iframe is a page inside a page where each has its own properties such as a scroll bar. With that said, it makes scrolling through the page on a mobile device frustrating. When users encounter a mobile site with multiple scrolling frames, there is no telling which frame will engage with their finger scrolling. Best to avoid upsetting one half of your potential customers! Have a redesign plan that considers other ways to display your important content to avoid using iframes.
Flash Animation
Adobe Flash was, well, flashy. It was the blinking neon Vegas sign we all wanted in our front window. Marketers loved it because it caught your eye… if your eye could ever see it. You see, most websites that used Flash didn’t check first to see if you had a Flash compatible browser and therefore the page never loaded properly. A great example are Apple’s products which don’t support Flash. Why risk upsetting a mobile user because their device doesn’t support Flash animation? Additionally, Adobe has made the move away from Flash to support other flashy technologies such as HTML5. Now is the time to redesign Flash out of your website and put other technologies in place. As Steve Jobs famously shunned the evils of Flash, we too advise 100% against the use of Flash.
Contact Us
Don’t you love it when you go to the Contact Us section of a web page and just simply touch or click the number to initiate a call! Not only does this make sense for mobile users but it also satisfies all those desktop users with Skype. No trying to memorize the number or searching for a pen to jot it down or even trying to use copy and paste from your mobile device. In your redesign of your website, add a simple line of HTML and solve one problem in a snap.
Tables & Lists
Let’s face it, you just may need a table to convey your message correctly. Sometimes those tables can’t be accommodated correctly through the adaptive web design method mentioned above. Rather than refactoring your data or trying to find some amazing new way to demonstrate it, try one of these plugins:
http://codepen.io/geoffyuen/pen/ FCBEg
https://css-tricks.com/examples/ResponsiveTables/responsive.php
They both provide an option for displaying your table in a vertical format. All the information is retained but the need to scroll horizontally is eliminated.
Your redesign plan should highlight the solutions for including tables when displayed on a mobile device.
Supported by Desktop Site
No matter how great your mobile design is, there is always a gap or some missing element that users expect. Every time I browse a product on Amazon from my phone, I curse the fact that I can’t search user reviews. Let your mobile users browse the desktop version of your website to address these scenarios. If the desktop UI is responsive, they can often accomplish whatever they need.
Conclusion
It is tempting to simply redesign your website to accommodate the most often encountered pain points of mobile users. Instead, we advise you to treat mobile and desktop users separately. . Determine why your customers access your online shopping store front from a mobile device. Take an adaptive mobile approach, offer targeted mobile navigation, remove iframes and flash animation, include mobile compensated tables & lists, include a link to your desktop site and a tap-to-call phone number.
Would you like to increase your mobile readership rate and increase your revenues? Caffeine Consulting is ready to help. Click here to schedule a call.