Performance as Design
February 19, 2015
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.
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.
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.
Prioritizing Performance in Responsive DesignBrad Frost
7 Responsive Design Tips to Revamp Your WorkflowMashable
So, You’re a Web Designer, Right?Codrops by Tympanus