According to Google Analytic statistics, roughly 70% of website visitors access through mobile phones.

WordPress themes are mostly response design. One theme adapts to PCs, tablets and mobile phones. As mobile phones and tablets emerged later than PCs, web technology is initially based on PCs, and gradually converted and developed for mobile phones. The development of Html, CSS, and JS versions is based on their compatibility with earlier devices. Support standards for tablets and mobile phones are added afterwards. This forms a path dependency. Design of WordPress theme is no exception as most of it is based on PCs. Horizontal screen arrangement is adjusted to a vertical one according to the size of screens. Menu is shrank to a button, and displayed on mobile phones in an overlaying format.

The UI design of mobile apps does not have the burden of PC compatibility. It can start from scratch and generate a good user experience based on phone screens. For WordPress theme design, we believe the “compatibility and consistency” requirement between mobile phones and PCs needs to be reconsidered. UI design for mobile phones comes first, while its compatibility with PCs can be worked out afterwards.

Take the UI design of e-commerce website as an example. As the size of mobile screen is limited, in order to display as much as possible,

1. An extremely simple top with only the logo and search box is designed.
2. The main menu on the top is cancelled. A menu on the bottom is designed , which is consistent with the original APP. As regular overlay menu occupies the entire screen, users can only see texts and icons without their corresponding products when selecting the menu, and can hardly get a good experience.
3. Product category page is accessed by a “sandwich” button in the bottom menu, or a button on the homepage.
4. Fonts of too small size are avoided, and page blocks are designed to be compact, thus improving text readability on mobile phone screens.
5. Repetitive contents on the page, such as duplicate company logos, emails, contact lists, and page links are avoided as much as possible.
6. WooCommerce’s product display is changed from two vertical columns to two horizontal rows.
7. A minimalist page style is adopted to highlight the products themselves.
8. Simplified page code with careful writing are used to replace the bloated code generated automatically, and dependency libraries are not used or loaded, thus to improve page loading speed on mobile phones.

In order to work on PC as well, page is widened to show more non-critical information:

1. The bottom menu bar designed for mobile phones is cancelled. Top menu, My Account icon and MiniCart icon are displayed.
2. Icons, as well as number of products under the category are added.
3. Some decorations are added.

When we design a theme, we always try to maximize its ease of use and compatibility. If you have any questions, please feel free to contact us.