Performance as Design

With much of the world swiftly moving toward mobile, the time has come to look at the way we design as well as develop websites. With the introduction of media queries and responsive techniques, websites have become a great fluid frontier featuring robust desktop designs and scaled-down versions for their mobile counterparts. Unfortunately, with great power comes great responsibility.

As mobile devices quickly become the gateway to the Internet, it falls to developers and designers to provide the best experience for users. The future of website design needs to involve more in-depth collaboration between the visionaries and the builders, to deliver optimized performance-based products for consumption.

Today’s biggest concern is performance. Offering highly interactive, video-enriched, animated-GIF-y, slideshow-happy experiences for users is great. At some point, though, performance has to be brought into the discussion. The best time for that to happen is during planning, not in the middle of development.

Quite often I have seen responsive websites require duplicate code to make a design happen, hiding one portion of almost the same content and showing the other depending on the device. This goes against what responsive is supposed to mean. Responsive should be the exact same content styled differently as it pertains to screen real estate. A lot of today’s designs are almost completely different sites from mobile to tablet to desktop. This has caused bloated websites, which need to be slimmed down.

Proposal

Performance-based design can go a long way to alleviate the overweight web page. A video background looks great on desktop, and most users don’t mind the two-second wait, but when it comes to a mobile device, users do not like to wait for something that is not necessary and will kill their mobile plan.

Using a well-thought-out CSS gradient can be just as effective as a 100KB hero image. Well-designed typography can be a substitute for a video background. Image grids with links to the images can be just as graphical as an image slider. Designing mobile buttons, links and styling first, then translating them to desktop can make for huge file size differences and will make the mobile experience look as if it were designed instead of thrown together.

Flashy interactions such as animations, parallax and image sliders are great for desktop, but for mobile the trade-off in performance just isn’t worth it. These things can be planned in a way that benefits the user by using methods such as lazy loading (for long, one-page parallax sites), conditional loading (does this page need the JavaScript/animation/Facebook share?), and setting a performance budget. Setting realistic parameters during the design phase can really make a difference in file size and load time. Retina images (two times the original image size) can also cause a performance problem, with so many calls to the server for large images. Well-placed flat design can make a difference here, without selling out the overall design.

Closing

With the complexity of modern website functionality and design, it is up to the designers and developers to produce award-winning websites, not only in design, but performance as well.