Last year Google announced: „Starting April 21, 2015, Google Search will be expanding its use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact on Google Search results. Users will find it easier to get relevant, high-quality search results optimized for their devices.” According to their analysis,  61% of users are unlikely to return to a mobile site they had trouble accessing, and 40% visit a competitor’s site instead!

Users are spoiled rotten by the immediate access to any information they require via smartphones. They easily get frustrated if the website isn’t mobile-optimized, or if they have to wait longer than usual until it loads (i.e. 10 seconds instead of 5). It’s like going to a sweet shop,  only to find out they are the greengrocer now. A major part of marketing is just playing with users’ emotions. Disappointment and anger often accompany the frustration, so it’s natural, that we leave non-responsive websites to browse the optimized ones.


Do you know what “the SMS neck” means? Download the free ebook and find out!


 

If you don’t want to cause such negative emotions, read and use our tips and create a perfect responsive website!

 

Step one: Create the general idea. Even if you have already a website, you must take a critical look at it. Ask:

  • What is its purpose? (company presentation, sales, education)
  • What is the core of the website?
  • Why users visit the website?

It’ll give you the overall picture. Focus on the key content and treat the rest of the elements only as the accents.

 

Step two: Identify needs of your users. There are dozens of mobile device/OS possible variations. Should you focus on iOS, or Android, tablet or smartphone? The perfect solution to this dilemma is behavioral profiling. Delegate this task to the smart system instead of inventing surveys and polls. Collect the information at the source. Using mobile marketing automation platform collects the information about users in real-time and reduces the number of data sources. It results in a clearer view, which is updated in real-time, as well as in reduction of human errors. Start your adventure with the platform today. It’s free!

 

Step three: Rearrange. Think about columns. If you have checked out step one, you surely know the compelling content of your website. Remember: header and navigation first, then goes the most important stuff and the rest is below. Observe the difference:

blog.appmanago.com on the mobile screen

blog.appmanago.com on the mobile screen

 

blog.appmanago.com on the laptop screen

blog.appmanago.com on the laptop screen

Minimize the number of banners and written content. Mobile has its own laws. Some elements look good on the desktop, but they are horrible on the mobile device screen.

 

Step four: Mobile optimization. Responsive ≠ optimized. Period. Everything must be thumb-reachable. You are perfectly aware which banners and ads generate most leads and income. Place them in the clickable points. Although they shouldn’t cover the normal content entirely. The only exception are pop-ups.

Keep your design clean. The site should be light and pleasant to look upon. Most of the users multiscreen (they use more than one device at the same time). The website should load quickly, without “devouring” the battery and the data transfer. Mind that while picking the graphics size.

Sometimes the differences are minor. This is the APPmanago’s main screen on the different devices:

appmanago.com on the mobile screen

appmanago.com on the mobile screen

 

appmanago.com on the laptop screen

appmanago.com on the laptop screen

Don’t create the new website – modify the existing one.

 

Step five: Test! Test everything: Compatibility with different Oss (you don’t want their fans to feel neglected), users’ reactions, landing pages, paths between the pages, etc. This website is the place where your app’s users will land after you redirect them!

 

BONUS: Tutorials

As for the technical aspects, you can find many tutorials on the Internet. Start with these:

  1. Responsive webdesign 101
  2. CSS @media queries and plugin guide
  3. Responsive Web Design: A Visual Guide

 

Did you enjoy the article? Would you like to add a little something? Do you want to discuss? Share with us in the comment section!