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 web. In the US alone, people spend more time on apps than on a website.

SEE ALSO: Hot User Input Design Patterns for Mobile

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 more than web-based content.

The popularity effect of Pintrest, Instagram, Viddy and others has had a leading role on 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.

Are you looking for responsive website templates and online website builder?

Get Startup Design Framework now!

Use coupon code START50 for 50% off!

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 has been followed.

Some factors, such as finger tapping instead of using a mouse and time and space limitations forced app designers 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 many 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.

 X-PRIME GROUPE

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.

Sam Dallyn

In this sample note how images and icons are being used for navigational purposes.

Viens-là

In this example the large font and icons are very similar to the mobile app design.

Hunie

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.

35mm Design

Neverbland

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 taping a button in a collapsible panel or pop up when a finger is swiped across them. We see that approach in websites too.

Denny's Restaurants

Denny's Restaurants

In the above sample, notice how horizontal tab options and drop downs (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.

Land of the nomads

Avanti Communications HYLAS 2

qGallery

Sexy Slider

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.

Papaya Clothing Online

IdeaPaint

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.

Gavin Castleton

Iconized web

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.

Lore. Learn more

ZURB

Sliding

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.

Head2Heart

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.

Neverbland

Viens-là

Image based navigations

Instead of just text we see an image or icon representing the navigation bar.

Sadowsky Berlin Branding

Zabawnik

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.

Bartle Bogle Hegarty

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.

Intellisult

Skype

Skype invites viewers to download and take an action as soon as they open the page.

Conclusion

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.

Saya Behnam has been a graphic as well as web designer, mixed media artist and an entrepreneur for more than 10 years. She lives in US and runs her design studio. She provides graphic and web design articles and tutorials in her blog www.arterruption.net. Follow her on twitter @saya4.

Newsletter

2 Comments
  1. Maneet Puri Aug 23, 2:13 pm

    Really informative! An apt presentation of mobile app impact on the websites we have today. As we can see, web is all about dynamic evolution and being inspired by the prevalent trends. The common trend that is enraging the market right now is of Smart phones and Android apps, which is why the websites are gradually shedding their old image of being just simple n’ informative.

    Reply
    -1
  2. Kenneth Aug 26, 2:41 pm

    That’s unbelievable! I thought that desktop web influences the mobile one, but it turns out that it is happening in the order direction as well. Thanks for the insight. I’ve never even thought about it.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters