WORDPRESS & SMARTPHONE

DESIGNING FOR SMALL SCREENS

Without the need for an app responsive design takes care of how website pages adapt to various screen sizes. With WordPress adaptive layouts are a given.

Getting a website page to adapt is almost automatic with WordPress. The platform is already responsive and adapts to mobile and tablet natively before any page layout design is created. So the focus is really about transferring design to small screens to be optimally set. Optimally set up means getting the aesthetics, brand feel, accessible, clarity of message and user engagement right. With mobile design there are a set of principles to be adhered to and when not applied properly the mobile website site can loose a lot of it’s effectiveness.

mobile ui design
ui-layout-mobile

VIEWABLE FOLD PORTRAIT MODE

UI

Portrait mode on mobile has a screen area that when maximised for display creates clarity and impact.

The art of designing effectively in portrait mode is to utilise the full screen area block. Creating content with the viewable fold in mind aka portrait mode makes for a more structured and impactful display. Content and brand message make more sense both in scanning mode with this design methodology. Unless blog based endless lines of text should at least be linked to from a designed block to minimise bouce rate.

Designing in sections means clarity of your brand message, higher engagement and lower bounce rates. A visually engaged user is going to stay on a site longer while the share actions will increase.

Endless scrolling of the same content will soon lead to boredom. You have got to keep your users visually engaged and surprised. But it doesn’t mean you need something amazing to show.

smartphone-user-engaged

IMAGERY

VISUALS

Sliders, slider, I want a cool slider! Everyone asks for this, but on mobile a slider is not good. Why?

Sliders tend to be rectangular especially home page sliders. It all looks good on your desktop, however on mobile they will work against you objectives. This is because of loading times and the fundamental design. Firstly, sliders are generated using javascript and this takes up valuable bandwidth on mobile, increasing loading times and leaning toward that user frustration level. Also several images are usually involved in a slider which further eats into mobile bandwidth.

Secondly,  sliders are typically designed in a horizontal format and while good on desktop only fill one 5th of the viewable fold on a smartphone screen. Thereby taking out any impact and clarity of message. There is a proper way to have sliders if you must, that work effectively and this is to have the slider fill the viewable screen area, but in order to achieve this the left and right side of the slider needs to be cropped. To this extent the image must have the subject matter in the center of the image itself.

UI DESIGN

LAYOUT

It’s not good enough to have just a responsive website anymore. You also need to think about the actual content layout on mobile. How it’s displayed will affect conversion rates from mobile users.

There is one fundamental for designing content on smartphones, keep it engaging. If this is done correctly there is a significant increase in conversion rates from mobile phone users. It’s not rocket science! It just means using the available site content and displaying in a smart way so that there is impact, clarity and engagement.

Designing For SmartPhone Screens

EXPERTISE

CONSULT

Don’t assume that your developer knows how to design effectively for mobile. After all in larger agencies there are information architects whose job it is to consider and implement just site content with defined goals for only mobile devices.

In a lot of cases a developer may not even be aware of the correct fundamentals for designing a website for mobile. He or she may not be paid enough to think about this or advise the website owner. Putting price as the main consideration when handing over your website project and without proper advice is risky business. It’s best to get advice from an expert so that your decision making becomes informed.