As we close out 2012, I can safely say that it has been a milestone year for designers. New technologies are popping up every day that make our lives easier and allow us to stretch our talents further. Over the course of the year, a few recurring trends have popped up among some of the major site redesigns. The good news: most of these can be implemented by blog and website owners with very little effort or code knowledge. Here are a few of my favorite trends to watch out for in the coming year:
By the way: this is in no means an exhaustive list, but merely meant to be a snapshot of things to come.
1. Dynamic Typography
Gone are the days when Helvetica, Arial, Times, and Georgia ruled the roost when it comes to fonts. While not necessarily unique to 2012, the use of non-standard web fonts (fonts that are not included with an operating system) has increased dramatically as new and innovative ways of serving them have been created. Here are a few of my favorite web-font sources:
Google Fonts
With a massive library of fonts, and a price tag that can’t be beat (free!), Google has become a go-to resource for web designers. Their web font directory is completely searchable by style, weight, and thickness; you’re guaranteed to find a font that will suit your needs. Implementation is even easier: simply drop a piece of JavaScript into your <head> section. Once that’s done, call the font family in your stylesheet, and you’re done!
FontSquirrel
FontSquirrel has a great selection of off-beat fonts, separated for ease-of-discovery by grouping (grunge, retro, etc). While the selection is good, the delivery method is a bit more complex: instead of hosting the font files on their server, you have to download them, store them on your server via FTP, and then link to where they are on the server. Once that’s done, the rest is the same: call your font family in the stylesheet and you’re done.
TypeKit
Typekit was purchased by Adobe not too long ago, so one would argue that they’re the best. They have a wide selection of professional font families available that other services don’t; classics like Gotham, for example. They have a limited selection available for free, but to get to the majority of the collection you have to pay a fee. Once you’ve selected your fonts, however, two lines of JavaScript will fix everything for you – you don’t have to call them manually from your stylesheet, call them inside of TypeKit instead.
My Favorite Fonts
I’ve chosen a few fonts from each service to showcase as some of my favorites:
Serif Fonts
Sans-Serif Fonts
Display / Script Fonts
2. Large Photo Backgrounds
As internet connections get better, photos are becoming more and more prevalent – not just as accents to content, but as part of the design itself. Couple that with the semi-new CSS3 standards, and designers are taking photography to a whole new level. It’s not uncommon to see designs and blogs with photos spanning the width of the site itself.
How to Set a Large Photo Background
This is fairly easy, but it does require a bit of thinking. Specifically, you have to make sure that the background is high enough resolution to accomplish what you need, but not so large that even high-bandwidth devices take too long to download it. I recommend no more than 500k-700k for your file size – any more will be too large, and any less will be too compressed (and will look terrible).
Upload your photo, and use this code in your stylesheet:
body{background: url(images/image-file.jpg) no-repeat center top;}
This sets the background image, tells it to not repeat (or tile), and aligns it at the top-center of your site. If you want to scale the image, you can add the “background-size” attribute:
body{
background: url(images/image-file.jpg) no-repeat center top;
background-size: 100% auto;
}
This will cause the background image to always be 100% wide (and the height will scale accordingly) – great for responsive designs (which we’ll talk about momentarily).
Examples of Photo Background Sites
Here are a few sites I’ve designed or seen online that utilize a large photo background:
3. Responsive Design
I want to go on record saying that responsive design is the most important thing to happen to web design in the recent years. So important, in fact, that the W3C has recommended that all sites strive to be “one web” accessible by all devices – something in which responsive design excels.
Responsive (or adaptive design, as it’s sometimes called) means that a design will adjust itself depending on the size of your browser or the device you are viewing it on. Meaning, instead of having a mobile website, you have one website that adapts itself and responds to the “viewport” (the size of your viewing device from edge to edge). Responsive design is made possible through the use of @media queries.
What are @media Queries
A @media query is nothing new to web designers; we’ve been using them to attach stylesheets for years. However, recently, designers have been utilizing its parameters (specifically, “max-width” and “min-width”) to allow different styles for different screen sizes.
A media query looks like this:
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
This tells the browser to apply styles to only devices 959px wide and below. Anything above that will ignore any styles put here.
Using @media Queries
This is a bit more complex than some of the other things we’ve talked about, since you have to have knowledge of CSS to implement, but here are the basics. First, we include this in the <head> section of our site:
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
This code tells our site to scale according to the width of the device – it’s an important step in making sure things are appropriately sized. Next, we include the media queries we want to use. This is my favorite set – you can set them however you want, but I’ve included common breakpoints in device sizes:
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
This includes breakpoints for all mobile devices (under 959px – great for people who utilize a 960px grid system), tablets, all phones, landscape phones, and portrait phones. Now, the hard part – apply the styles you want to get the site to look how you wish.
If it looks intimidating, that’s fine: there are a lot of pre-built themes and templates that have responsive elements built in.
Examples of Responsive Design
Here are a few examples of sites utilizing a responsive design
Summary
2012 has been a fantastic year for web designers, by far. And if these trends are anything to judge by, 2013 will be even better. These are but three of the emerging trends and resources we have at our disposal, and many of them can be implemented easily by site owners. Between large photo backgrounds, dynamic typography, and responsive designs, we can create sites that function well and look amazing.
What other design trends do you see coming in your favorite websites and blogs?
Editor’s Note: Want to learn more about design from Mitch? Check out his session at NMX in January, entitled “Advanced Blog Design: The Latest Tools, Trends & Best Practices You Can Implement Today!“
Nice post and I like the nav style you did on the mobile sized responsive page. I hate when people have it switch to a drop down style nav menu like with elegant themes.
Not sure if it’s noteworthy enough to add to a list like this but I think that social media integration showing feeds, Facebook comments, etc. and working them in with pages (not just sharing buttons) will be huge as well.
Hey Mark,
I do (sometimes) have it switch to a drop-down, but it depends on the size of the navigation. Plus, I can (with a drop-down) show the relationship between pages (and actually indent them to show parent/child relationships) which does make it a bit easier to navigate.
To be honest, I love the iOS Apps (facebook, WordPress App, etc) way of doing menus, and I want to find a way to integrate that in the future – I just haven’t had time to research it.