When approaching a website design for 2015 what are your design goals? Do they include mobile? What about responsive design? Here is what I think are the top 5 goals for website design in 2015.
- Mobile-first
- 100% width
- Responsive design
- Vector icons
- High density graphics
Mobile-first
The first and most important goal for a 2015 website is that mobile is the target layout. What does this mean?
- Create mobile layouts and mockups during design phase
- Use a mobile-first CSS framework, such as Bootstrap
- Use mobile-first CSS background images
- Focus on mobile-friendly typography and white space
To summarize a mobile-first design strategy is simple: build for mobile and then respond to users without mobile. What does this look like? The style, and CSS, of our website defaults to a mobile view. Then, we override that default style for those with larger display devices, perhaps in order: phablets, then tablets, then desktop, then super-sized devices like large computer and television monitors.
100% Width
The second goal for a 2015 website redesign should be to embrace 100% width layouts. Many of the website that were created before responsive layouts were accomplishable via the CSS media query used fixed width layouts. These fixed width layouts were targeting the desktop experience, often setting the width to be displayed on a monitor using a pixel dimension of 1024 x 768. Today’s websites must embrace layouts that use 100% of the screen width. This is a must for smaller screen devices.
Responsive Design
If a responsive layout is not part of your 2015 design goals, well, then, you are not designing for the present and the future. A responsive layout must be a design goal for websites today so that we can target users on a variety of web-enabled devices. In the purest goal, you should design your website to be viewed on a device of any size. This means using all percentage based measurements, with no breakpoints. However, the reality is that we often want to target specific devices that our users are commonly using. In my opinion a responsive design should target 3 main breaking points:
- Mobile
- Tablets, or devices with 768 pixels or more
- Desktop, or devices with 992 pixels or more
Responsive design is not only about using CSS media queries to target the variety of devices, and their sizes. It is about using modern web design techniques to ensure the best experience for users on these devices that have limited resources: screen size, bandwidth, battery, etc. Some of those techniques include:
- Use responsive media, Set the img, iframe, object, embed, and video elements to have the width and max-width properties set to 100%.
- Use
<picture>element and CSS background images. Load the appropriately-sized image for the device to avoid downloading unnecessarily large images. Note, the picture element is not yet widely adopted. - Use SVG vector-based images when possible. SVG has been widely adopted by browsers. As long as your website targets users > IE8 (jeesh, I hope so), then you should be using SVG images.
Vector Icons
CSS3 introduced the concept of web fonts. With this capability we are able to define a custom font that is loaded by the browser, using a variety of file formats. The end result was twofold. First, the web was freed from the restricted set of fonts adopted by browsers ages ago. Second, the font doesn’t necessarily have to be latin characters (or any other character set for that matter), we can also create symbol fonts. Here are some common vector-based icon fonts (in no particular order):
High Density Graphics
As the number of users with displays that have a high density of pixels continues to grow it becomes increasingly important to make high density graphics an integral component of your 2015 website design. Apple calls their high density displays “retina displays”. Other manufacturers are calling them “Ultra HD” displays. Whatever you call it, as web developers we want to ensure our users have the best possible experience. I wrote an article last August that introduced Retina and Responsive HTML5 Images. I suggest you check it out.
Anything Else?
Did I miss something? Is there something on your top 5 list for 2015 website design that I did not mention?