From Design to Development: Notes for Designers
Over the years we’ve spent plenty of time nerding out on the smallest of details in order to make a website load as fast as possible. That is our job after all. However, some of the performance bottlenecks we encounter can actually have little to do with the development process and very much be related to the design of a site.
At Select Interactive we’ve had the benefit of working with some wonderfully talented designers over the years. And one thing we’ve noticed is that some designers come from more of a print media background and aren’t familiar with web performance best practices or web design tools. There’s absolutely nothing wrong with that, but we want to make sure everyone we work with understands what is involved in the process of bringing a web design to life and how we can work together to make the best possible product.
To help spread our knowledge and experiences we have started to compile a list of notes over the years that we have shared with our design partners. Below are some of the more frequently brought up topics that we’d like to share. We welcome anyone wishing to discuss in more depth or offer feedback to email us at contact@select-interactive.com or comment at the bottom.
Web Design in Photoshop or Illustrator? Or Sketch?
It’s 2017 and web design is no longer a simple fixed width layout. With all of the different smart phones, tablets, laptops, and monitors available today websites must be able to adapt and function at any dimension. The days of designing websites in Photoshop ended a long time ago and we do our best to discuss with designers the reasons why. In fact, we haven’t accepted web design layouts/artwork in Photoshop in over 3 years. It’s one of the first things we make sure to mention when working with a new design team.
Illustrator and especially Sketch provide far better tools and abilities for handling the needs of web design today. Being able to export assets at different dimensions, as vector graphics, and design modular systems/components has become critical in web design today. Illustrator and Sketch provide these and many more great advantages.
Sketch has grown quickly in popularity, especially for web and app design, but we’ve noticed a number of designers are still very unfamiliar. Some really helpful tools that Sketch connects with are Zeplin, InVision, and Principle. If you haven’t spent time looking in to Sketch, we HIGHLY recommend it.
Fonts
Fonts are one of the slowest loading assets of a website, so keeping the number of required font files to a minimum always helps! It’s not very well known, but each font variant (i.e. bold, italics, etc…) are all individual font files. So it’s important to remember that if a website needs to have the regular, regular italic, medium, medium italic, bold, and bold italic versions of one font family, that’s actually 6 font files that need to be served.
It’s also not widely known by designers that the way fonts are rendered in design tools such as Illustrator, Photoshop, and Sketch do NOT always match the way browsers render fonts. We always recommend testing a font in a browser before making a final decision or presentation to a client so there are no surprises when it comes to viewing in the web.
There are some great online tools to preview, select and serve fonts for websites. Two of the best are Google Web Fonts and Adobe TypeKit.
Images
Aside from videos, images on websites account for the majority of data and bandwidth required. Large, uncompressed images can drastically slow down the load time and performance of a website. We’ve found that many people are not aware of the best ways to export photos from tools such as Photoshop/Illustrator and upload or send us images that are a much larger file size than needed. When saving images for a website we highly recommend the Save For Web option in both Illustrator and Photoshop.
When the Save for Web dialog opens, the next step is to modify the quality. While you might think it’s best to always have the highest quality, the reality is the human eye really can’t notice the difference in image quality in most cases. We recommend setting the quality to 60 when saving JPGs. If you see a noticeable difference when adjusting, then modify the quality until satisfied, but the lower the quality, the smaller the file, and the faster it will download and render on a website.
The next thing to notice on this dialog is the Progressive and Optimized checkboxes. When saving JPG files we highly recommend the use of Progressive JPGs for the web. Progressive JPGs will load in blurry at first and sharpen as the file downloads, rather than the old days of seeing an image load from the top down. This provides a better overall experience for the end user as they will see an entire image, even if a bit blurry at first.
The last thing to mention regarding images is the file type. We recommend saving all files in JPG format unless transparency in the image is required. When using transparency in an image it will need to be saved as a PNG file.
Retina Displays
The last thing we’ll touch on is how to properly use images such as logos and icons on retina display devices. First, if you’re asking “what is a retina device?” — retina devices are the high end displays on devices such as iPhones, iPads, MacBook Pros, new Android devices, and a number of new PC laptop lines hitting the market.
These devices require images that are actually twice the size they appear. So for example, if we were to use a company logo on a website that is 100px by 100px, it should really be served with a 200px by 200px image to ensure pixel perfect rendering. If we were to use a 100px by 100px image it will appear blurry/fuzzy on any retina display. The downside to this is screens such as the Apple Thunderbolt display, and the majority of monitors from manufacturers such as Dell, Samsung, LG, Acer, etc… are not retina displays. This means using an image that is twice the size needed on these screens is actual detrimental to performance because it is going to be a larger file size with no benefit.
The best solution is to use SVG files! When displaying a company logo, social media icons, or app icons, we highly recommend the use of SVG files. Being vector format they can scale to any dimension and be pixel perfect at all times. This is a huge win as we no longer need to create logo files at different dimensions for use on different screens. One SVG file can be used to solve this problem.
