‘When you pour water in a cup, it becomes the cup. When you pour water in a bottle, it becomes the bottle. When you pour water in a teapot, it becomes the teapot’, – these are the words of legendary Bruce Lee, who wasn’t only martial artist and actor, but a great philosopher. Although the famous quote mentioned above had slightly other purposes when vocalized, it perfectly fits the subject we are going to prod in this article.

In our times we use devices with touch interface, game controllers, mice and keyboards, T9 keypads; not to mention 3D holograms that willing to be the next best thing in the industry. Do mobile devices outplaced desktop-base ones? More likely yes, yet there is a big way to go.

Responsive layout of one’s page plays major and significant role in our days, although it seems that this is not an outdated subject of discussion in 2015. Major companies publish interesting statistics which brings to a conclusion that there is still a lot of work to accomplish. For example, recent launch of Google’s new algorithm system, checking for mobile-friendly or responsive sites, brought official statement that there was an uptick of 4.7% of sites that are now more mobile friendly, compared to early 2015 statistics. Yet, Google refuses to publish a full list of stats in press releases regarding this subject. Some other researchers from SE geeks bring to the following numbers claiming that more that 11-18% of web pages on the Internet are not responsive.

Some other reports claim that 46% of people using mobile devices constantly report about issues when viewing on fixed layout. These fixed layouts or pages are traditional, non-responsive websites, which still cover more that 75% of Internet. In the same published as a press announcement, it states that there is 44% of people, stating that navigation was difficult on smaller devices.

Concepts of responsive design differ, depending on CMS and other major factors. Yet it is pretty much easy to understand whether a page or a website is responsive or not.

So before jumping into the list of criteria, let me remind that concept of a responsive layout is like an art, with some major principles, but with allowance to be creative, whether you build a theme or a plugin. So catch the most important and primary responsive design principle directives.

[wds id=”2″]

1. Smaller screenwidth , no horizontal scroll
2. Bigger screenwidth , content still occupies large part of the screen
3. Smaller screen, containers do not become smaller
4. Smaller screen,text size does not become smaller
5. Smaller screen, sidebars go to bottom of a page or hide
6. Smaller screen, less free space
7. Smaller screen, text and images do not overflow their containers
8. Smaller screen, menu items become hidden
9. Smaller screen – sticky menu, or some other ways for quick navigation

First things first: built on a flexible foundation

So the first thing each user want to consider when looking for a responsive plugin or a theme for CMS platforms is it’s flexible foundation. For this, of course person behind the project knows that web pages and posts have multiple layouts built on a grid, containing images, widgets, sidebars and more filling the space of a page.

Rule number one you want to take into consideration it’s the appearance of your webpage on multiple devices. You don’t want to miss any important feature of your web page when viewed on mobile. This is why modern developers use the mobile first strategy, which has the goal to increasing tendency to design their products for mobile devices first before making any designs for desktops.

Yet fair to mention that the main objective stays the same, which is to bring the full content that is available on desktop, yet present it in a clean and uncluttered interface. this will allow mobile visitors to scan your site fully. For this case content of the page shall have perfect positioning. Whether it is menu location at its primary place or a specific one appearing on mobile only, custom header image or text, site title and description, sidebar or widget. Usually mobile themes are built on one-column principle or layout, this is why mentioned factors are so essential.

How to test if your website is responsive

Although it is impossible to test a website or a theme on all devices at once, there are some nice and helpful tools, called emulators, helping users to recreate a view on devices.

One of the most popular ones is included in Google’s Chrome Browser’s Developer Tools. In April 21, 2015 Google announced about its major Mobile-Friendly Test platform in Google’s Developers tools, allowing to analyze a URL and report if the page has a mobile-friendly design. It takes some 1-2 minutes (depending on your website) to present a pretty report of a website. The tool claims to mimic one’s site on a range of devices. Allowing to select a device, browser, version of it and even create custom mode. It still works pretty much fine in most of the cases, but I can not miss the facts it being useless. So, I would not recommend this tool as a 100% accurate and shall suggest to double check on another platform as well.

There are some iOS, Android and cloud base emulators and some of them cost money, but probably the cheapest and best way to test responsive design is by scaling the window to different sizes and view at least on one android and ios device. Although, let me mention that some font issues or characters; or scroll and touch, swipe issues can come between to which emulators do not reproduce well. Yet, you may be interested in online tools too. For example, BrowserStack or BrowserLing are pretty much 70% accurate tools that allow to test a website for cross browser compatibility across 700+ browsers. The principle works on the same way as you’d use Chrome’s inspect element tools for mobile view.

Working with web developers

IF you chose to work with web developer, make sure yourself that you have considered the following aspects before paying someone to make your website responsive or mobile-friendly.

First of all meet the experience this or that developer has. Ask for portfolio of responsive and mobile-friendly websites they build. Whether it is a web development company or an individual, all the groups shall have some base to present for clients in an open source. You may ask if developers of which you are approaching to have any experience in transitioning a desktop site to a responsive. Read customer reviews. If it is a WordPress theme, then don’t forget to check how many people have the theme actively installed and what are the ratings of the theme. Also, check what issues people might be having with the mobile versions of their sites in forums or review pages.

Know your customers’ needs

At the end of this article, remember that depending on your business, you want to gather some information about your clients and check whether they are skilled enough in area of your industry. Make sure that developers understand what you want, what are the most important pages or areas of one’s website you want to bring on spotlight. Learn about your target audience. Check how many percent of your site visitors view pages on mobile. This will allow you to pick priorities correctly. Mobile industry can not be ignored any longer as number of smartphone users shall surpass 2 billion in 2016.

So, these are the 6 essentials you want to consider:

1. Simplify the navigation
2. Use a single-column layout
3. Don’t underestimate font and button sizes
4. Avoid fixed width
5. Test, test, and test again

Eventually the future holds some enthusiastic prospects and besides developing web pages for apps, we will integrate them with mobile devices such as watches, rings, bracelets, holograms and more.