why design for mobile devices?
Why is it important to understand how to design for the mobile phone?
There is a straightforward answer. If you don't, you are blowing off the most significant portion of your audience.
Today, more people are exclusively using their mobile phones rather than laptops or desktops. And a design exercise in the conventional manner of a few years ago just will not work.
Statistically, there are no doubts about how cell phone and Internet usage are design concerns for website owners:
- Just the pure number of Americans that own a mobile phone speaks volumes, i.e., 96% of all American adults own a cellphone!
- Considering the number of Internet users on mobile devices, 80% of the USA use cellphones for web use
- 62% of the global Internet users browse on their cells.
Now that we realize how important mobile web design is, how do we do it effectively?
Realistically, there are two web design methods for mobile devices:
- adaptive web design
- responsive web design
what is adaptive web design?
Years ago, any design for web use would usually work universally. It was like the business card you gave your contacts; it looked different from your competitor's but was fundamentally the same square of paper as anyone else's.
As shown above, that is no longer the case. The Internet is now a venue for varying screen sizes depending upon the device.
The earliest method for dealing with the differing sizes was the adaptive way, which meant that multiple and quite diverse layouts were designed for the various screen sizes out there.
What happens under adaptive design is that the technique uses a particular static layout predicated upon the breakpoints on the screen.
The adaptive design detects the configuration of the device and loads the appropriate page design for it.
A minimum of six screen widths or pixel widths typically employs this design method: 320, 480, 760, 960, 1200, and 1600.
It seems like a lot of work to make the site function depending upon the viewer's device.
What this approach means is that you need to start with the narrows pixel width and work your way up.
For those that have an existing site designed the old way, i.e., at a single width, you can pinpoint which of the screen widths depending upon viewer demographics. By checking your analytical statistics provided by your web hoster, or using apps like Google Analytics, you can see the most used display widths by your visitors.
Whether retrofitting or designing from scratch, what may result is a screen that looks as if it "jumps" as it adapts to the correct width.
And from a maintenance standpoint, it can be burdensome.
Each time you add content or change the site's theme, you will be doing it repetitiously for multiple websites, and not just one. This requirement of adaptive design is something to take seriously into consideration before deciding how to plan your mobile-friendly site.
what is responsive web design?
Most of those reading this are either new to web building or are redoing an existing website on their own.
If that is your situation, and you aren't a full-fledged web designer, your best bet may be going the responsive web design direction.
There are many free and subscription-based programs or Content Management Systems (CMS software applications) that accomplish this with a minimum of effort. These systems provide automatic adjustments, which make device-responsive corrections to the screen layout ranging from cell phones to desktop screens. The changes are then previewable within the software applications themselves.
These types of applications appear in earlier sections of this website, where we dealt with website builders and CMS's.
While these applications are useful, there are still steps to be taken to make sure your site layout adjusts maintains its functionality across every device.
Here are some measures to assure the site functions properly after doing responsive design:
- Test the site using a variety of browsers and different devices.
- Organize relevant content so that it is visible no matter what screen the viewer uses.
- Emphasize visual content over text to make for a better small-screen experience.
- Remove irrelevant content so that small devices display content effectively, whether in portrait or landscape format.
- Check the larger pages' loading speeds to prevent viewer bounce.
- Make sure that menus work over each device type, like using hamburger icon menus on small screen devices.
- Review popups and banners to see how they operate on smaller screens.
- Optimize image file sizes for quicker loading and resize images to accommodate smaller screens.
- Verify that fonts are compatible with browsers across all screen sizes.
- Revise navigation, so that finger taps work as well as other input measures, like a mouse, stylus, or keyboard strokes.
- Design forms, call-to-action links, and logins to work with all devices.
These steps are suggestible and probably necessary because no software is perfect.
We have found that the best test is to have your spouse or significant other navigate the site on various devices. Without a doubt, they have the mysterious ability to find something wrong with anything that we do.
get ready to start
We hope that what you have covered has helped you to get on your way.
It may seem to be a challenge, but the most challenging part is deciding to start the process.
If you come to a roadblock, step away, take a walk, and get some fresh air. With a renewed look, the answers always seem to be there.
To help you, we promise these "we wills":
- We will continue to help you with the sourcing of tools to develop your website.
- We will provide the means on how to promote your site with methods that will expand your presence and authority.
- We will be updating our knowledge base constantly so that you continue to have unbiased, realistic, and up-to-date resources to accomplish your goals.
Just check out our homepage at webinfopros.com for information in these areas.
Good website building!
Web Info Pros
