With so much business going on over the Internet, companies are rushing to expand and upgrade their websites. But not enough of them are realizing that responsive design is a very important element, and that it has to be applied in practical ways.
Even company websites that do cater to smartphone users might not do it efficiently or effectively.
For example, one of the most important places to have smartphone-friendly design on the website is on the landing page.
Extensive research has found that high numbers of smartphone users are likely to leave a site if the landing page doesn’t seem responsive. If they don’t see a menu, if they can’t click into other parts of the site, or if they have to scroll too much to find key information, they’re probably leaving, and not coming back.
With that in mind, here are some specific responsive design elements that companies are now putting into their landing pages, to keep first-time smartphone visitors engaged and coming back.
No-Border Lists
A lot of the practice of making a landing page smart phone friendly involves using the small available space to your advantage. That’s why a lot of companies are doing away with the drop-down list boxes that dominated the desktop age, and instead going with borderless lists on one side, usually the left side, of the screen. Getting rid of the need to table a list gives designers a little more space to work with — and each pixel is important when it comes to smartphone UX design.
Expressive Graphics
On desktops, you have room to tell a whole story on the landing page. But with responsive design in play, that task gets a lot harder.
Many companies are going with a simpler approach, based on the old saying that “a picture is worth 1000 words.” In many cases, we’re talking about creating a simple line drawing cartoon or a vector graphic that shows the value proposition of a product or service. Sometimes the company uses a speech balloon attributed to a cartoon character to try to get some message out without taking up too much space.
These in-page graphics are another way that companies shrink the landing page footprint to make it easier for smartphone users to navigate.
Usable Forms
Web forms are one of the most sophisticated forms of visitor engagement and lead generation that you can find online. But making them fit a responsive landing page can require some unique design principles.
The web form has to fit the small screen of a smartphone, but it also has to be readable. It doesn’t take much to make a web form too large to be rendered well on a smartphone screen.
One of the best fixes for this is simple — companies will take an entire form on a desktop site and split it into consecutive forms of one to three fields per piece. This way, the smartphone user starts out filling out the first few fields, maybe ‘name’ and ‘e-mail,’ and goes to a subsequent screen for more detail, for example, demographics like age and gender and location. Another option, if that’s feasible, is to make smartphone form much simpler and shorter to grab only the essential information.
Responsive Icons
Responsive icons are a huge issue in landing page design for smartphones.
Icon design works differently in a responsive design environment. Icons have to be simple, often with specific small numbers of line contours. For example, a “home” icon, rather than an elaborately drawn house, will be something as simple as a square and a triangle.
All of this design work builds landing pages that will attract and retain smartphone users. Ask WebSubstance about how to create a company website that works for everyone, and for every device. We’ve designers, engineers and consultants who specialize in user experience for smartphone devices. You’ll see your brand visibility and customer engagement follow
