Web Appification: The effect of mobile and app design on website layout

• 6 minutes READ

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.

Online Email Template Builder

With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Try FreeOther Products

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.

Sam Dallyn

Create Websites with Our Online Builders

With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.

Try Startup App Try Slides AppOther Products

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.

35mm Design


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.

Denny's Restaurants

Denny's Restaurants

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.

Land of the nomads

Avanti Communications HYLAS 2


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


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



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.

Sadowsky Berlin Branding


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.



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.

Saya Behnam

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.

Posts by Saya Behnam

Super-Intuitive Drag & Drop Template Generator

Create beautiful responsive emails and newsletters easily.

Learn more Try Free
Cookie Icon

We use cookies to ensure that we give you the best experience on our website. Privacy Statement.

  • I disagree
  • I agree