Leading industry experts reveal their top tips on building a more efficient web.
A better web means a better experience for everyone. Users should be able to reach what they need without worrying about how they're accessing the internet. Developers and designers should be creating sites that can be smoothly maintained and updated. A better web does more than just work, it works well – for those who consume it and those who build it.
A better web is a more efficient web. Efficiency is at the heart of our projects, whether it takes the form of accessibility, responsiveness, content strategy or page load performance. From choosing the right CSS property to asking yourself the crucial questions that will make a whole project viable, efficiency is not just about going faster, it's about making things better. It's about, well, empathy.
We reached out to web designers and developers far and wide to hear their top tips and advice. Their suggestions span a wide variety of topics, all with a better, more efficient web at heart. Each of these tips is a door onto a new mindset that we invite you to consider and explore.
The more we share, the more we learn. We hope you'll find some new areas to dive into, even if you're a seasoned web designer. Go forth and learn.
01. Ask questions
"Who are you building it for?" says UX designer Dylan Wilbanks. "Why do they need it? Where will they use it? What devices will they use? Have you talked to them? If not, who has? How will you know when it's done? What's the test plan? Is anyone building a prototype? Do you understand what you're being asked to build? Do you have answers to any of these questions? No? Then get them answered before you build."
02. Listen to your code
"Screen readers present your web page exactly as the HTML is written," says information architect Anne Gibson. "So do search engines. Writing semantic HTML improves the experience for both, and includes a host of other benefits (to find out more of these, take a look at Paul Boag's article at here).
"Try checking the semantic quality of your pages by listening to them on a screen reader. If your page sounds out of order or clogged with detritus, clean up your HTML. Screen readers can be more than 'just' accessibility tools. They can be used to help us write cleaner, more semantic, easier-to-maintain markup."
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
03. Protect the web's inherent accessibility
The Great Discontent is a great example of what can be achieved with new techniques, while remaining accessible
"The web is an accessible medium," says co-founder of Perch Rachel Andrew. "An HTML document can be accessed by anyone, on any device, on the slowest of connections. Every choice you make as a designer or developer can protect that inherent accessibility, or it can damage it. That's a lot of power you have there. Use it wisely."
04. Take advantage of conditional loading
The Cotton Bureau site uses conditional loading to ensure potential customers aren't kept waiting
"Every web page consists of 'the thing' and a bunch of stuff that's not 'the thing'," says well-known web designer Brad Frost. "Conditional loading is an essential tool for creating feature-rich experiences that still load fast and prioritise core content. Look for opportunities to conditionally load social buttons, comments, related content and more. For more information, take a look at this article by Jeremy Keith."
05. Use Ceaser to write cubic-bezier
"CSS transitions can be simpler to deal with than keyframe animations," says Jamie Kosoy, president and head of technology at Arbitrary. "But customising them with timing functions can feel pretty daunting.
transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear easing */
"If writing out Bézier tweens by hand isn't your style, have no fear. With Matthew Lein's animation tool Ceaser, you can quickly use one of Robert Penner's easing equations or build your own. Animate away!"
06. Use height-based media queries
"Make use of height-based media queries," advises Dan Denney, a frontend developer at Code School. "These are great opportunities to improve experiences when the available height is limited. It varies according to design, but with the right adjustments you can often reduce the need for scrolling and improve readability. If the design has interactions or notifications, be sure to adjust them for limited heights as well. See an example here."
07. Keep the big picture in mind
"Don't make your technical choices before you understand anything about the problems you should be solving," says Sally Jenkinson, consultant and solutions architect at Records Sound the Same. "Introducing solutions too early can mean experiences end up being dictated or limited by technology, both for your visitors and administrators. Instead, make your selections with the big picture and your wider project team in mind.
"Many technologies can do everything and anything, but should they? What's the knock-on impact on people, processes, technology and experiences?"
08. Use namespaceing for your CSS files
"CSS file names are a glossed-over opportunity," stresses entrepreneur and systems designer Claudina Sarahe. "Namespaceing provides helpful clues to the contents of the file. If a partial doesn't produce output, append .config.scss; if a file imports other partials, append .manifest.scss."
09. Employ easy image fallbacks
"Responsive images are complicated, but while the RICG was getting the specification together, we found some opportunities for quick wins – brief syntaxes that could make a big difference for users," says Mat Marquis, an open web engineer at Bocoup. "One of those was the addition of a type attribute on source, allowing you to serve alternate image formats with responsible fallbacks:
<picture>
<source type="image/webp" srcset="image.webp">
<img src="image.png" alt="A rad wolf.">
</picture>
"WebP for browsers that support WebP and a plain ol' PNG for images that don't, and just one request either way."
10. Master debugging in JavaScript
"Never underestimate the power of the console.log," says Raquel Vélez, senior software engineer at npm. "When trying to understand a specific line, tag it with a useful piece of information. Something like console. log('foo; a=', a) will help you know what a is with respect to a function foo. When trying to isolate a bug, log everywhere that you think makes sense, with console. log('boom1'), console.log('boom2') and so on, so you can see exactly where your code is breaking."
11. Make your background images responsive
Using background-size: cover; makes it easy to create responsive background images (audubon.org)
"For beautiful and responsive background images, regardless of a screen's width," says designer Julie Ann Horvath, "use the CSS property background-size:cover;. In addition to visual scalability, using background-size: cover; when specifying the size of a background element automates the pixel ratio the image will display at, without having to specify it in additional rules or markup."
12. Use mixins to create complex grid systems
"My students were learning how to build grid systems, as well as the power of using Sass mixins," says Sam Kapila, design instructor at The Iron Yard. "So as a class, we built a mixin that would help create a flexible grid system. You can find it here on CodePen.
"At the first breakpoint, the grid system can have any number of columns, but the mixin itself will add the total number of columns with the total number of gutters (which is less one gutter than column). Then a margin-right is added to the floated column. The mixin is variable-dependent – specifically column width and gutter width. Finally, a :last-of-type resets the margin-right for the last column in each row."
13. Think about conversations, not pages
"Thinking mobile-first is a useful way to approach the prioritisation of page content, and to decide which parts are critical and which can be loaded conditionally later," says graphic designer and frontend developer Paul Robert Lloyd. "However, this exercise still assumes the presence of an interface. To build truly universal and accessible websites, we need to look beyond visual appearance. An alternative approach might be to think about pages as being part of a phone conversation; what information might a user request, and how might the web page respond?"
14. Provide keyboard support
"When building interactive interfaces, remember to provide keyboard support," says Monika Piotrowicz, frontend development lead at Shopify. "Mouse events can also bind to keyboard events, keyboard focus should update as new content is shown or hidden, and the escape key can help cancel interactions. By taking these steps, keyboard users can get the same great experience as anyone using a mouse! Check out this demo."
15. Design quickly in the browser
"A nice way to design new features in-browser is to sketch the new thing directly in the code, to show to others," says designer and frontend developer Frances Berriman. "Mark the parent element of the new feature with a class like sketchy, letting you apply styles to it to show it's a work in progress, or quickly comment all the sketchy bits out at once for a clean product demo."
16. Simplify your code
"Have you ever needed to return a value, but only if another test returns true?" asks coder and designer Sacha Greif. "For example, you might write something like:
"If user.isAdmin() returns false, the whole expression will return false. However, if user.isAdmin() returns true, the expression will return the value of password."
17. Convert fixed widths to percentages
"A simple way to start transitioning a site from fixed-width to a responsive format is by converting all its widths to percentages and removing floats," says Inayaili de León Persson, lead web designer at Canonical. "If your main container is 900px wide, change that to a max-width instead – change columns and other elements to the percentage they take up on the page rather than pixel units, and so on. Then look at your site on a couple of devices and you'll get a good idea of the next steps: they might be fewer, and easier, than you think! The process of making ubuntu.com responsive is explored at here."
18. Embrace the title field
"Nailing the title field can be an easy way to classify on the backend and clarify on the frontend," advises Corey Vilhauer, UX strategist at Blend Interactive. "Make things easier for editors by being clear what each title field means. One should be for navigation ('Classes'). One should represent the page's title, which will populate the <title> ('Our Classes'). And one should be used in the CMS to help keep things in order ('Class Listing'). Mix and match as your organisation requires."
19. Configure Git
"Save time by configuring Git," advises Stacey Mulcahy, senior technical evangelist for Microsoft. "Configure a global ignore file for files you will never want to commit. Place a gitignore file in '~/.gitignore' and then you can $ git config--global core.excludesfile ~/.gitignore."
20. Use Git commit hooks
"As new technology appears to streamline our workflow, we begin to adopt more and more dependencies," says Brian Suda, owner of optional.is. "How many people are regularly using Less or Sass to manage their styles? Or tools like JSLint for JavaScript? Tools to concatenate, compress and cache your assets?
"Inevitably we forget to run some commands and outdated files get saved into repos or pushed to production. We use Git commit hooks so we never forget. By setting up some pre-commit hooks, all of these commands are run each time we submit our changes."
21. Learn from issues and errors
"No matter how many times you've tested your application, and how many devices you've used, there will be unexpected behaviours," says developer Alex Duloz. "You will never, ever launch an application that doesn't contain bugs, so make it easy for your users to let you know about any issues they encounter while using your website.
"Leverage the GitHub API from your own website using a simple form. Log server errors and analyse them. And use something as trivial as window.onerror to keep track of JavaScript errors (or go for a try {} catch(e) {} at the entry point of your code). Take a deep breath, go live, and perfect your work based on that wisdom."
22. Feel how fast your site is
"Waterfalls aren't the only way to visualise your site's performance," says Lara Hogan, senior engineering manager of performance at Etsy. "On Webpagetest.org, you can create a video of how your site loads over time – simply check the 'Capture Video' box in advanced settings. This will help you feel how fast your site is from different locations and on different devices, and you can see what your users are truly experiencing."
23. Avoid long select boxes
"Stop using select elements for date of birth," says Alice Bartlett, frontend developer for GOV.UK. "Providing a date of birth is part of many basic transactions on the web. It's common to see select boxes used for dates of birth, but research shows that long selects are very difficult for those who are not confident with technology to use. Text inputs with server-side validation allow users with low technical confidence to transfer their understanding of paper forms onto web forms."
24. Scale icons with background-image: cover;
"If you're using the background-image CSS property to add and style an icon image," says freelance designer Julie Ann Horvath, "another option for scalability is background-image: contain;. While in theory you could use background-image: cover;, if the element containing the icon has rounded corners, cover may cut off parts of the icon image. contain will size it appropriately, and to scale."
25. Keep it short and sweet
"Be succinct in your emails and robust in your code comments," says , information architect Anne Gibson. "If you need practice in writing 'short and sweet', join the development community on Twitter."
