Web pages built to capitalize on the technology and traffic trends from five years ago are structurally and fundamentally unequipped to operate on the modern web. The exploding mobile adoption rate, particularly of smartphones, has dramatically changed how web pages are built and operate. The introduction and proliferation of tablet devices and Wi-Fi networks have also played a role in the changing web design landscape. With the proper tools and design techniques, your team can adjust the company web page to accommodate these sweeping technical changes.
File Size
Back in the days of dial-up, before broadband access became the norm, the total file size of a web page was extremely important. Slow connections could take minutes to fully load larger pages, creating a bad experience for the visitor. If a web page takes too long to load, it’s very likely the visitor will leave the page and look for the same information, product, or service elsewhere.
To a certain extent, broadband has spoiled developers over the years, putting less and less stress on the size of a web page–allowing content to be the primary emphasis. However, mobile web users run into two problems with larger websites:
- The page can take a very long time to load over a 3G connection (when 4G is not available).
- Larger web pages can quickly chew through the user’s data plan.
The mobile web doesn’t have the same speed or bandwidth consumption, in most cases, when compared to a broadband connection. For example, a 20MB page could take over a minute to load on a slower connection–and loading a dozen of those pages can consume nearly a quarter of a gigabyte of data from a visitor’s monthly allotment. Page size is also important for SEO, since search engines tend to prioritize faster web pages in search results.
Content
Web performance optimization services can be a major help in identifying ways to reduce your data footprint without compromising content quality. Images, for example, can account for more than 60% of a page’s data–and PNG images generate massive pages compared with JPG images. Also, running scripts on every page of your site that are only actually used by a small fraction of those pages creates a substantial data pool. Removing them wherever they’re unnecessary can improve page loading times.
Screen Size
Responsive web design, a new design technique that uses a feature called “media queries” to rearrange website content based on the size of the screen, has stepped up to simplify design for a multi-platform Internet. Responsive web design allows smartphones, tablets, and desktop computers to display a website’s content in whatever way corresponds best to the size of the device. When properly utilized, your developers don’t even need to create separate sites for desktop, tablet, and mobile devices.
Make sure your team avoids the potential pitfalls of responsive web design. A common practice is building a desktop site that is then cut down for use on mobile devices. Unfortunately, this can cause mobile devices to download a substantial amount of “invisible” content, affecting load times and consuming unnecessary data. These days, it’s typical for mobile devices to make up 60% or more of a website’s traffic–so it might be an even better idea to design the site first and foremost for mobile devices.
Interface
While touchscreens pre-date the smartphone, they never took off as a computer user-interface device before the mobile revolution. Now that touch is the only interface method on many web devices, web design elements like “mouseover” to expand content no longer work. Web pages that aren’t touch-friendly need to be reworked for optimal use on the modern web.
Website optimization will, by definition, create a better experience for visitors to your site. Best of all, it hits you right where it counts–your bottom line. The less data your site services, the less it costs to operate. Optimizing your site and reducing page load times is an investment that pays for itself.