How Apple Changed Web Design

It wasn’t really all that long ago that the Internet was full of websites with pages that took forever to load, contained Flash animations that crashed browsers, and had clunky graphics everywhere.

And then in a poof of digital smoke on a stage in San Francisco in late June 2007, all of that changed forever. The Internet was preparing to morph quickly, forced by a single word: iPhone.

Apple logo with Steve Jobs silhouetteThe summer and autumn of 2007 were defining moments for Apple, a company that only six years earlier was on the very brink of bankruptcy, and that had just welcomed back its estranged founder, Steve Jobs. Where the change in Apple occurred that year was when the world finally became captivated by the Cupertino-based company and its revolutionary line of products. Devices such as the iPhone, iMac, MacBook, and iPod embodied minimalist and sleek design characteristics while at the same time providing functionality significantly above what Apple’s competitors had available at the time.

With the iPhone’s minimalist design, sleek user interface, and revolutionary input (touch screen) the center of the world’s attention, Apple had a captive audience for the first time since the Macintosh debuted in 1984. Also paying attention were the web designers and developers who created the websites that consumers would browse in the iPhone’s most compelling feature — its desktop class web browser, Safari. Safari on the iPhone could render web pages as no mobile device to come before it: it had a full webkit rendering engine which displayed all website content exactly as it appeared on a desktop browser, allowed the page to be navigated with the flick of a finger, and individual elements could be zoomed in on with a simple gesture. All at once, the Internet opened up to anyone, anytime, any place they happened to be.

The problem with this was actually quite a simple one. Up until the iPhone was released, all website designs were optimized for a larger screen and a mouse as the input device. Mobile versions of websites were void of graphics, contained a simple set of text links, and rarely consisted of more than a brief description of the business and a phone number.

Things had to change for iPhone.

In early 2008 with millions of iPhones in use around the world, two new types of websites began to emerge: redesigned websites with features in mind for iPhone users, and mobile-only sites that mimicked the look and feel of native iPhone applications. Both had a tremendous impact on web design as a whole.

The first change, websites designed with features in mind for iPhone users, instantly rejuvenated a World Wide Web infested with Flash animations. With no support for Flash, the iPhone provided an instant hurdle. How were videos and web applications going to be displayed on the new device? The answer was simple. Abandon Flash altogether and come up with a new Web standard: HTML5. HTML5 has enabled video, animations, and web applications to be displayed on websites without the need for Flash or any other third party plugin. The result is websites that load faster, diminished risk of computer infection due to malware embedded in interactive content, and greater consistency among the world’s most popular web browsers.

quoteThe Internet was preparing to morph quickly, forced by a single word: iPhone.

Also changing was web design itself. To make navigating a page easier for mobile users with a touch screen, web designers quickly began to use “block elements” everywhere — larger clickable areas on menus, cleaner web pages, minimal design elements such as simple headings, fewer images, and more text-based content. The outcome is remarkably Applesque as modern web design trends just look like Apple’s own style.

With the release of the iPad in 2010, mobile optimized web design trends rocketed into the “required” category of any web designer. Now that roughly one-fifth of Internet traffic originates on a mobile device, the web design community simply can’t ignore the necessity of mobile friendly elements.

So if there was a point to be made, hopefully it’s a little clearer where our modern web design trends originated from. Take a look at your favorite website on your desktop browser, and then on your mobile phone. If they look pretty much the same on either device, and if navigating the desktop version of the site on your iPhone or touch screen device is a relatively easy process, send a shout out to the late Steve Jobs. It all started with one man’s vision and the company that had the resources to make it happen – Apple.


ImaginedAtom is a New Orleans web design and development company specializing in website design, mobile web development, HTML5 web and mobile applications, graphic design, and e-commerce development.

Be the first to leave a reply!

Leave a Comment

* required

Well this is unusual! It appears your version of Internet Explorer is pretty darn out-of-date. In order to view this website and most others as they were intended, you'll need to update your browser. Don't worry, this is easy and takes only about a minute.

Download Google Chrome (modern, fast, beautiful, easy to use browser) by clicking here. After it's been saved to your computer, double-click on the saved file and follow the installation instructions. We'll be waiting patiently for you while you're away.