It hasn’t been that long since Web Design got its new meaning! Drag and Drop builders like Wix shook the grounds with easy to access custom fields that seemed to be the answer to every business owner’s prayers. Before I tell you what I’m about to let me assure you that ‘Web Design Industry is NOT dead!’ and the new wave is nothing more than a primitive effort to make web development accessible to all folks!
The biggest issue with the new builders its their lack of ability to dynamically adjust the view for portable devices such as tablets and smartphones , and that is where responsive design gets meaning. A dynamic website should be able to transform into new layouts new devices might mandate it to, or as we know it, respond to the device requirements. That, my friends, is where developers step in!
Recent studies by Forbes and Bloomberg show that more than 80% of users judge online content based on how it looks on their smartphone screen. So we decided to give you 5 tips on how to set your content in phone and tablet view to make the right impact:
1. Stay Vertical!
Whether you are using WYSWYG editors like Divi or Avada themes, or just rolling up your sleeves and writing the whole page from scratch, there is always content like layer sliders that can become problematic by not loading on a smartphone or forcing your device to show desktop view. To get round this problem, try not to use dynamic features as such in mobile view. Simply use Photoshop to flatten your slider to become 1 image, crop it to form a square and then use it as a replacement slider. This will help user devices to bypass fetching different elements and will both speed up your view and make it look more elegant.
2. Avoid multiple columns
Although most editors are programmed to automatically turn your two or three columned website into a unified view, there are always chances the theme you are using fails to load all elements as requested. Solution? Manually adjust tablet and mobile view in both horizontal and vertical views to project a single column page. In WordPress, you can simply go to the sidebar menu> Appearance> Editor to do so.
3. Use Website Testers
There are many website testing tools you can use for free. Websites such as google’s “Mobile Friendly Test” check your column structure, dynamic tools and container padding adjustments to see if the mobile view is as user friendly as you want it to be. Some tools you can use to get this checked include:
- Google Mobile Friendly Test: https://search.google.com/test/mobile-friendly
- MobiReady: https://ready.mobi
- MobileMoxie: https://mobilemoxie.com/tools/mobile-page-test/
- Responsinator: https://www.responsinator.com/
4. Scatter your Text
As far as mobile views go, large blocks of text can get different browsers to behave differently. I actually had to learn this the hard way, as weeks of hard work that looked amazing on Google Chrome on an Android device turned into a nightmare on Apple’s Safari. What the browser did, was simply to relocate the images we had inserted into blog posts in order to unify text blocks. Result?! A very extensive (not SEO friendly at all) text with misplaced punctuation and followed by a random collage of images! To avoid this, make sure your punctuation is clear, texts are broken down into manageable segments and images are inserted in Image boxes ( or Lightbox ).
5. Update Themes and Plugins Regularly
Everyday, thousands of update packages and add-ons are released across the web. Browser developers naturally follow and change their product to match the new lines of code hired in HTML pages. To make sure your users always get the view you intended them to, keep updating your plugins. As for themes such as Envato products or Divi, we can only tell you to be careful. A good examaple of what we are trying to tell you is Avada 6.0.1 update release which, saying it softly not to hurt anybody’s feelings, ruined hundreds of websites across the net. The issue users faced was misplaced columns and graphic content in mobile view (both landscape and portrait views) after update, as the new patch did not match most browser requirements.
Let’s put it in short! Mobile view is now the dominant way to adjust your content as most users are evaluating web pages and its content based on what they see on their hand-held devices. Make sure you look good on phone screens and clients will start to come your way. Have you been having issues with your view adjustment? Let us know in comments …