Since the introduction of the iPhone in 2007 and the push toward larger phone screens in recent years, the amount of content and the quality experience users want from their devices has increased dramatically. Now with screens averaging in the 5-inch range, your web design needs to include more than just plain text. You need to integrate visual media, such as pictures and video, to create a richer user experience.
Visual Elements
The Internet is becoming more and more visual, even from a desktop experience. Hundreds of millions of hours of YouTube is watched daily, and BuzzFeed, which relies heavily on images and GIFs, is in the top 100 most popular websites in the world.
Because desktops are static, they require a strictly vertical layout. However, this limitation does not exist for smartphones with touchscreens. Once a web developer begins to play with what a touchscreen can do, more modern design elements tend to be more intuitive. For instance, you can swipe vertically to move up and down a page, tap an item to bring it to the forefront and swipe to move things horizontally. So, when designing your mobile site, keep these expanded options in mind.
Another popular style is to use a seamless site, where you can access all the information from a single page with an infinite scroll. This helps to cut down on having to reload the page, which should be avoided at all costs. While a desktop user may have the luxury of waiting a few seconds for a page to load, mobile users have a higher demand, so you must keep load times to an absolute minimum.
Performance
Speed and reliability are the lifeblood of a good mobile site. According to Google, the goal for load times should be no longer than one second. Any longer than that and you run the risk of the user being dissatisfied and abandoning your site.
There are ways to keep your performance high while still keeping a visually appealing site. Many major companies such as Apple, Google and Microsoft have realized that it is possible to have light weight sites that are still aesthetically pleasing. They use a minimalistic, flat design so they don’t have to rely on processor heavy utilities that three dimensional sites use. By using simple typography in conjunction with bright, contrasting colors, buttons and information can be made larger, which keeps users from accidentally pressing the wrong buttons.
Layout
Accurate touchscreens on modern smartphones such as the iPhone 6 allow the use of finer detail controls, but you still need to be careful because there are some limitations. For example, you need to think about how close together you place buttons and other items. If they are too far apart, then there is wasted space. But, if they are too close together, you have the chance of the wrong button being pressed and users getting frustrated.
Any sort of content that needs to be added by the user, such as addresses, phone numbers and email, needs to be broken up into small chunks because of the relative difficulty of typing long pieces of information on a smartphone. Drop down tables and automatic moving to the next field help keep the frustration to a minimum.
Using responsive design helps keep websites more relevant as time goes on and as the devices continue to change.
