blog

random posts about nerdy stuff

Design Consistency is Key


When designing, it's ideal to have an established style guide that outlines specifics such as font family, size, colors, etc. If the style guide is detailed and complete, a web project build is much easier to plan out. The developer can start building the CSS based on the style guid, creating assumed blocks of content, images, colors and fonts before any front-end HTML is written.

The Style Guide

The style guide sets the rules the design will follow, and details the specifics for each element such as font, color, size, etc. A detailed style guide should include HEX and RGB colors as well as alternate colors or treatments for any interactive elements such as buttons or links. For print media PMS and CMYK colors are important too. Find some great Style Guide Examples here.

A website design may have variations of common elements, such as a featured post that happens to be blue instead of gray. However, the element "post" would and should share much of the same style. These variations, when outlined in the style guide, makes it quick and easy to plan out in the CSS and HTML.

Example of two HTML blocks with CSS variations

The style guide can be made before or after the actual design comps are created, though having a thorough guide is useful for both designers and developers.

Use Symbols in Your Design App

Most design applications have tools in place that help keep your multi-page layouts consistent between pages. Apps like Sketch, Adobe XD, Illustrator, and Photoshop all have objects that can be reused and modified for each instance, and color pallets that help ensure you're using the same specific color on each instance. Using these tools, you can create one element that defines the base look, and change the content, color, image, etc. when used elsewhere. Cool thing about symbols is if you decide to change the base, those changes would auto update all instances of the symbol.

References

Sketch - Creating and Using Symbols
Adobe XD - Work with linked symbols
Work with Smart Objects in Photoshop

Writing Clean CSS/SCSS

So we have a style guide and some comps from Sketch or Adobe Illustrator and start building the website. First thing to do is look at all the common elements in the designs and write CSS classes for each of those blocks.

.block {
	background: white;
	border-radius: 6px;
	h1 {
		font-family: Georgia, serif;
		font-size: 24px;
		color: #666;
	}
	p {
		font-family: Arial, sans-serif;
		font-size: 14px;
		color: #999;
	}
}

Now that we've defined the default style for a .block element, we can create variations of that element with subclasses, perhaps in this case we want a dark background with light text while retaining the font and font size. We do that right within the .block CSS before the closing bracket.

...
	&.dark {
		background: #444;
		h1 {
			color: #fff;
		}
		p {
			color: #ccc;
		}
	}
}

In our HTML, we can create a .block element or a .block.dark element that will look identical other than the background and text color. The block design remains consistent with a variant option set to match the designer's comp.

Design consistency makes styling HTML markup quick and easy.

If the site designs adhere to the style guide with consistent block margins, padding, fonts and colors, it makes it easier to reuse those blocks elsewhere simply by changing the contents. The design language is cleaner if there aren't too many variations to common elements. For example, if we have a quote on one page that's within a gray box with 20px padding around the text, it shouldn't have 8px padding on another page. The style guide defines what an element looks like wherever its used. Unless absolutely necessary, you shouldn't need 20 dramatically different variations of a basic element.

Responsive Breakpoints


Visitors on your website use a wide variety of devices and screen sizes. It's important to plan the site's design for all of these to retain a great user experience. What might look great on the designer's 27" 5k screen might not fit as well on a visitor's 13" 1280x800 notebook. The way each block or blade of content is designed should cater to these, and other sizes either by how they're defined to behave or by using CSS breakpoints to deliver that same element with different styling.

Devices

Responsive website in multiple devices

We have much more than a simple list of devices to design for. Smartphones come in a variety of sizes as do tablets. Desktop and notebook users may not always view your site at 100% screen size, especially on an OS that lets you snap a site to the left or right of the screen. Tablet users may use the device in landscape or portrait. During the design process, it's important to plan for all of these viewports to ensure the site works and looks great across the board.

Design Process

Big images are great, but how much of the screen do they take up on a shorter display like a tablet or small notebook? If text is positioned in a specific spot on top of a hero image or slideshow, can it still fit if the image is smaller or shorter? These are things that are important to consider when building out the initial design to make sure things can be resized to responsively fit in different environments.

A simple way to plan for responsive when building a desktop sized comp is to consider how things will resize at less than your Photoshop art board. Does the left and right of the image get cut off if the image is at a fixed height, and is that still ok? If the height is a percentage retaining the original ratio of the image to avoid any cropping of the image, can the associated text on top of the image still fit and be readable?

Blocks of content should either be able to resize to fit different environments based on percentages, while retaining their readability. If at any point, like on a smartphone, the percentage widths of an element make it unreadable, a CSS breakpoint should be change the element to best fit in that particular size. Example: You may have four columns of content showcasing a list of top clients in your desktop comp. Four columns of text may not fit well on a smartphone, so the breakpoint will adjust the layout at these sizes to show the same content stacked in one column rather than side by side in four. Planning for this breakpoint in the design process with a comp helps ensure the site is true to the designer's vision while making sure it looks and works great in every environment.

Ask the client what device they use to make sure when they view the comps it looks great on their specific screen.

Many times, seeing display issues in a comp is as simple as viewing the design at 100% within the browser on a particular device. If a client's primary computer is a smaller notebook, and they look at the comp at 100% in their own browser (which may have a shorter height with tabs and bookmarks bar), it's easier to notice things like "Why can't I see this content above the fold?" or "This image is too tall for my screen.". Delivering a 100% JPG or PNG comp for review which can be viewed within the actual viewing environment can showcase precisely what the end result will be. A PDF or image viewed at sizes other than 100%, or worse - printed out on paper, can't accurately show what the final product will look in a browser.

Breakpoints

In most cases, two breakpoints can be enough: mobile (smartphones and tablet portrait) and desktop (tablet landscape and notebook/desktop). These two sizes fall into ranges of pixel sizes:

  • Desktop: 1024px - 1200px and beyond
  • Tablet: 768px - 1024px or < 1024px
  • Phone: < 768px (optional)

Setting a unique style for phone is optional as in many cases, tablet in portrait mode may look the same as on phone. Other breakpoints may take into account the device height too. A notebook might have a 1366px wide screen, but it's important to consider they only have 768px (minus the browser frame, tab and bookmarks bar, dock, etc) viewing height before scrolling.

Breakpoints should cascade from desktop down to smaller devices since we make adjustments from the larger size to fit on smaller screens.

"Mobile first" isn't always the best approach, especially if the design we're starting from are designed for a desktop browser. CSS means "Cascading Style Sheet", which means style declarations will cascade from top to bottom. Build your CSS for desktop then include your responsive edits to the original styles at the end, which will retain the desktop style for anything not overwritten for the other breakpoints. I like to keep my main CSS in a separate file from the responsive CSS to keep things tidy. In most cases, the responsive adjustments I make for extra large or smaller mobile sizes is relatively short. Keeping them separate is a tidy way of making things easy to locate.

Alternate Elements for Specific Viewports

Oftentimes, a multi-column layout works fine on desktop but has to be structured differently to fit on a mobile sized device. For example, we may have 2 columns with text on the left and 2 images on the right. On mobile, the default assumption would be "stack left column on top of right column", but in this case might not look as good. For this, I set a .mobile-only and .desktop-only CSS class that sets display: none; to completely hide an element in a breakpoint. This way, I can have a desktop version of the block HTML duplicated for mobile in the code, yet only one shows up on desktop and the other on mobile.

Resources

  • Browser Display Statistics - important to note that screen resolution does not mean the user's browser is full screen. People with larger screens can see content side by side in multiple windows, so actual browser size will usually be less than screen resolution, and height will always be shorter than screen resolution.

Vector vs. Raster Images for Web


In the world of HiDPI screens and responsive websites, having high quality images in your website designs is a must. Graphics, especially ones that include text, must be readable at varying sizes when viewed on desktop and mobile devices.

Each browser renders images a bit differently, and web browsers on Windows might render a bit different than on Linux or Mac.

Raster Images

JPG, PNG and GIF images are all raster images. This means that the image is made of pixels each with a single color. If you zoom in on a raster image, you'll see a grid of colored squares that make up the overall image. These formats are best for photos and photo-realistic graphics as they can be compressed in a way that alters pixels by their nearest color while still retaining the same look at higher compression levels.

Example of a rastor image

When a raster image is resized, the browser renders the resized image in the best way it can to retain the image clarity. Modern browsers will attempt to clear up the image with softening filters to prevent pixilation, an effect that looks like sharpening that can produce jagged lines most noticeable in Internet Explorer.

Example of a photo in multiple browsers

Vector Images

Vector images are a series of shapes and lines that can be resized without losing clarity. These image formats are made up of defined points, curves and solid shapes defined by shape, percentages, widths and hues. When a vector image is resized in a web browser, it'll always look clear and crisp.

Example of a vector image

All modern web browsers support the SVG file format for vector images. In most cases, an SVG file can be used like a standard image, though does not always support applied CSS filters. Since an SVG file is basically a text file similar to XML, you can target elements within the image for additional functionality by element ID. Cool stuff.

File Sizes

Having a website that loads quickly is important. The largest file sized elements in a site are most likely images and video, which is why compression is important. Each web asset should be created in the most effective file format possible considering how it'll look as well as how small the file size can be. A logo, for example, will probably look best as a vector image whereas a photo can be compressed as a JPG.

Let's take this iMac graphic, for an example. I exported it from Adobe Illustrator as an SVG, PNG and JPG file, PNG and JPG at 72dpi. Since it's a vector image to begin with, it's nothing more than a series of shapes that is considerably smaller as an SVG.

  • SVG - 4 KB
  • PNG - 13 KB
  • JPG - 20 KB

Browser Support

Now that all modern web browsers support SVG images both on desktop and mobile, it's a good idea to start considering this as an ideal file format in your web sites. Vector images look great on HiDPI screens on our tablets and phones as well as Apple's desktop and notebooks with retina screens. Since they look great at any resolution and can often be much smaller in file size, they're a much better solution than creating @1x, @2x and @3x versions of the same raster file for these different screens.

OlderNewer