3 quick tips for both web designers & developers
Web development topics are broad, ranging from visual design to backend architecture and optimising browser networking. A casual search without being specific could land you on a sea of content to start from scratch, while others emphasise higher-level strategies. What if you already know web developments and just want to learn some techniques to up your game? Here are three tips that can be easily integrated into your day-to-day workflows, and they are useful to both web designers and web developers too.
1. Be intentional with image types
Usage of images is pretty common so it’s very useful to know the differences between raster and vector images plus when to use them — raster for complex texture details with shading, and vector for clean lines and shapes that can be scaled up without losing quality. It’s best to start with the source from designers and supply the assets with the proper image types accordingly while developers should know when to request or look for the correct formats. A special note for raster images, using modern formats like WebP can give you a better quality-to-file size ratio. Either designers or developers can optimise the SVGs exported from a design tool, there are online guides and tools (e.g. SVGOMG) available. Even with these handy tools, we should still beware of base64 encoded raster images sitting inside SVG, it usually happens when a raster image is inserted into a vector-based design, the result is an image with unnecessary bloat.
2. Be lazy with loading
You probably know that there’s no need to load everything immediately when serving a web page, perhaps we could consider that right from the design phase. Designers could include loading screens or animation as part of the design, especially for heavy pages or components, which then can be implemented with mechanisms like dynamic imports and React Suspense (or the equivalent from other libraries).
Developers could also easily add the loading=”lazy” attribute to non-critical images or even iframes so that they load only when they are about to enter the browser’s viewport. The distance from the viewport threshold to trigger lazy-loading assets is something designers can consider in the design phase to optimise “above the fold” experience if needed; do note that the threshold can change based on browsers and even connection speed.
3. Be collaborative with each other
This one is not exactly a technical tip, but it could be the most important one. A product could be best implemented if designers and developers can work together around the platform and technical limitations, or capture the opportunities to enhance the product. While there’s no one-size-fits-all way to collaborate, one way to start is by asking each other for one pain point with the current process. Maybe the units for dimensions in the design are not inconsistent, maybe the margins in the implementation are always off, or maybe the assets in Figma library and the npm package are not in sync, it can be anything but pick only one pain point that you could work on to address. Once you’ve done that, maybe try another one, as long as designers and developers are communicating instead of being in silos, we’ll be able to improve from there.
There, no grand visions or genius strategies here but don’t underestimate the impacts these seemingly simple tactics could have when they are included as part of the delivery process. As the saying goes — “Success is the sum of small efforts, repeated day in and day out”.
