Web Appification: The effect of mobile and app design on website layout
The arrival of smartphones, iPads and touch screens has had a significant influence on web design in the last couple of years.
We see a proliferation of new designs and technics that originated from mobile app design. This phenomenon has been referred to as the “Appification” of the web. In the US alone, people spend more time on apps than on a website.
In the last decade, we have seen how web design has moved away from heavy text-based websites to interactive, image-rich, video sharing applications. These applications engage the viewer with more than web-based content.
The popularity effect of Pinterest, Instagram, Viddy and others have had a leading role on the website layout. Even the older social networks such as Facebook have had to update their designs.
In-app design, performance is a key factor in a medium that imposes significant challenges on designers. In order to perform well and be user-friendly, they have had to change or adjust many design elements.
Many changes in app design originated from the limitations and constraints that smartphones and tablets have in their platform. Now, even though web site layouts do not have these same limitations, the same pattern and approach have been followed.
Some factors, such as finger tapping instead of using a mouse and time and space limitations forced app designers to make different decisions for how to use their space well. Lately, these decisions have become a standard base for web and mobile design.
In this article, I want to review some of the impacts that mobile and app design has had on websites.
Below, I separated the effects into some samples. However, you will find a combination of the factors named below in all or any of the given samples.
UI and UX supports the brand differentiation
In the past brand recognition was achieved only by presenting well-crafted content. Now, every app should “Wow” users in their first approach in design, along with prefect performance and error-free interactivity.
That is why we see the attention to web esthetic and interaction plays an even greater role on web and mobile development than ever before.
Using bigger fonts and buttons
Applications use bigger fonts and buttons due to the touch-based interface they utilize. This trend has slowly expanded into website design over time. In the following samples you see this effect.
In this sample note how images and icons are being used for navigational purposes.
In this example, the large font and icons are very similar to the mobile app design.
Using fewer features but keeping everything focused
On apps there are limited features, which has resulted in a streamlined and focused experience. Because of the inherent space limitations of the platform, app designers display only the most important information.
Currently, in the web designing community, the minimalist use of elements is getting more popular.
NeverBland used every element as sparingly as they could.
Using hidden features and drop-downs
Mobile apps use hidden drop-down menus under a tab or a button to hide information when it is not needed. Some examples are search refinements, product options and navigation. These functions are accessed by tapping a button in a collapsible panel or pop up when a finger is swiped across them. We see that approach in websites too.
In the above sample, notice how horizontal tab options and dropdowns (lunches, breakfasts, etc.) tuck all the information they want to present in the most concise and compact format.
For example, in the “Tour of America” you will see all of the available options with images in the drop-down without leaving the home page.
Using less Flash and more Java scripts, Html5 and CSS3 for animations
Steve Jobs’ decision to not support Flash on IOS had a far-reaching impact on the web and apps. We see how web designers have moved away from Flash-based design and have embraced more device-friendly formats such as HtML5 and CSS3. Even Adobe, the makers of Flash, recently introduced Adobe Edge to create animation using HTML5.
Also for many features, we see that JS works very well on websites.
Shown below are samples of HTML5, CSS3, and JS.
Excessive use of graphics (photo and illustration)
Open any app on a smart phone and compare the number of images to the text used. This approach is branching out into website design as well.
In the following samples note that most of the home pages are mainly images without much text.
Using a large photo as a background
This is a nice trend in new website designs that has its roots in mobile app design.
These large images are attention-grabbing and guide users to the story or concept they are trying to portray.
Before the rise of applications, the icons used in websites were used in limited areas like email, phone, and contact information. After apps started using icons for the purpose of conveying the main message, we see how web site designers are getting an advantage out of using icons on the website for more subjects.
See the large illustrative icons below.
We see how sliding navigations are getting more popular on the web. Many websites prefer to mimic the iPad paging technique in their website rather than the same old scrolling or navigation bars.
Please see in this sample how moving from page to page is like the sliding action on an iPad.
One page website
The one page website is another byproduct of Appification.
Users move up and down in one single page. Navigation is not similar to the old traditional format.
Image based navigations
Instead of just text we see an image or icon representing the navigation bar.
Magazine style website
This style is not just for blogging or online magazines.
It has become more popular due to having access to many options (tabs, videos, and menus) in one location.
Call to action on the home page
A few years ago a call to action button in the middle of a homepage without any introduction would have been very odd.
Now, this is very common. Without going to any other pages a company can invite viewers to download, fill out a form or provide their email address. This is due to the mobile users behavior patterns to make decisions quickly.
Skype invites viewers to download and take action as soon as they open the page.
In last few years we have seen how website design has borrowed heavily from mobile interfaces, tablets and apps. As viewers rely more heavily on these experiences, what will trends be in the next few years? What other effects will we be expecting to see in web and mobile design?
These are interesting questions, and we must be patient and watch to find our answers.