Web Trends 2012

Content Structure First

Know the structure of the content before you design, so you know what type of content you are dealing with. You don’t have to have all of the content or texts before you start, but you need to know some facets about the content before you dig in. The “Content is King” mantra is getting a bit old, but the reality is that content writers still aren’t getting the attention they deserve. 

Responsive Design

Is responsive design just a fad? Are mobile phones and tablets going away? No! Yet again, we are forced to learn how to deal with the winds of innovation. Web design is changing, and responsive design is about learning how to deal with a new landscape. More and more people are browsing on their mobile phones, and that number is only going to increase.

Back to Fluid Layout

With responsive design, an old debate has resurfaced: should we design our sites using fixed pixel-based layout or fluid layout using percentages? While both options are valid, fluid layout is more “future proof,” and can adapt better to new devices. It’s also easier to manage when dealing with the ever growing number of screen resolutions. Using a fluid layout, you can build a site that behaves like a fixed-width site, but can easily change and adapt to your needs without having to rewrite a lot of CSS code.

Open Source Fonts

Finally, we can start using other fonts that are different than the ones installed on the user’s computer. Google Web Fonts is an awesome place to start looking for fonts to use in your design. I’m always amazed by the quality of some of the fonts that are available. Right now Open  Sans and Droid Serif are my favorites.

More Parallax

Parallax background were big last year, and will likely continue to be in heavy use. These are a bit gimmicky, but can produce super interesting results when executed well and not overdone — especially when using to many layers and heavy backgrounds that drain resources on the users computers and slow the experience down.

Into View Animations

Using a jquery plugin like inview, developers can easily code animations when elements on web sites come into view. This can go very well with a simple parallax background, and is a great tool for designers for creating a narrative by using simple animations that are triggered when the user scrolls down a page.

Responsive Design: Why use a fluid layout?

When developing a responsive web site, one of the first decisions one has to make is whether to use a fixed (pixel/em) or a fluid percentage based layout. As a developer and a designer, a fluid layout can offer a robust and flexible way when building responsive web sites. Here are a few reasons to go fluid:

  • Fluid layout can help you future proof your design, making your site adaptable to new devices. With new phones and devices coming out every week, new resolutions are being introduced faster than before. 
  • Unless you are using a very smart compiled CSS solution, fluid layouts are more flexible and easier to change and update than fixed layouts. Changing the width of your site can be as easy as modifying the max-width rule for your site’s container.
  • There are indicators that fluid layout saved considerable time on development. Because of the proportional nature of fluid layouts, you do not have to recalculate grid columns for each break point in your site.
  • With media queries you can optimize readability for your users. A fluid layout has been thought to hurt readability because of long text lines on large screens.  Using the benefits of responsive design you can turn that around.

Responsive design is still very new, and developers are working to find solutions to the problems that have arisen. But it’s not all problems, however; responsive design can also be a great opportunity to advance the web in a new environment, given that users are increasingly consuming the web on mobile phones and tablets.

Requirements for a responsive CSS framework

I have been working on a CSS framework for using when building responsive web sites. In the process, I have been thinking about the requirements for such a framework. Here is a list that I am following:

  • Moible first: Mobile devices should only load the needed CSS, and nothing more, to optimize bandwidth usage.
  • Fluid/Liquid layout: No questions about it, responsive sites have to be percentage based all the way. Doing it with pixels is simply not practical.
  • Fixed/Elastic gutters: Design above technical perfection. Designers want the gutters to be proportional to the content and not the screen size. This is why the gutters should be defined in ems.
  • Simple and flexible: I decided not to make guesses about how developers would be using my grid system, but instead, tried to make it flexible and usable for as many styles of web sites as possible.
  • Stand-alone: Focus on the grid system and layout aspect, and not reinvent things already been solved, such as reset styles and mixing (although those things might be nice to have as an optional download).
  • Compiled CSS: I think most developers should be using some version of a compiled CSS language by now. If anything else, it really does speed up the development process.

History of layout in web design

In the beginning (back in early nineties), there wasn’t much in the way of design or layout on the web. Everything was basically a single column layout, with very long lines of text. Around that time, somebody got the fine idea of using tables to create columns that could include many paragraphs of text and photos and not just simple data. This would cause quite the debates for many years.

One layout to rule them all

Soon after the realm of web design gathered momentum, the idea that one true layout would suffice seemed to prevail, now lovingly referred to as the Holy Grail. These ideas were mostly formed around the notion that the web needed only one good layout that could serve most needs. The template that formed the Holy Grail included two or three columns, and was a blend between a fluid percentage-based layout and a fixed one; it had fixed sidebars and a fluid center, for instance. From a design perspective, this was very far from being optimal.

Fluid/Liquid layout

Roger Johannsson notes in his post Fixed vs. Fluid layout from 2005:

“I don’t think we will ever come to a consensus on the issue, so there isn’t much use in sharing my point of view”

Designers who wanted to push the envelope with their designs would still mostly use a fixed layout, as it was too hard to implement complicated designs using a fluid layout. No one could foresee at that time the mobile change that would dominate by the year 2011, making a comeback for fluid layouts necessary.

Elastic! Pixel or em-based layouts

Around the same time, the idea of elastic layout was starting to gain some traction. An elastic layout is defined in ems, and was perfect for the browsers at the time, all of which implemented zooming by scaling the font size. Because of this, one could make a site using ems that would zoom proportionally in the browsers. By 2009, however, most browsers had switched to a full-page zoom that rendered the elastic layout useless by all standards.

Back to pixels

After browsers started to implement full-page zoom, it looked as though the pixel layout would rule again. Elastic layout did not make sense anymore, and few people were talking about fluid layouts, except for some hardcode bloggers that had never let go of the Holy Grail. Pixels were the most economical to implement, and made developers’ lives easier, as they enabled the design layout to appear identical across the various browsers — a requirement that was becoming obsolete due to Internet Explorer’s lack of support for CSS3.

Typography and grid systems

Slowly, the best practices from print design are being adopted by web designers. This trend has taken a long time to develop, and in the last few years, we have seen a big shift to the use of more complicated grid-based layouts on the web, and even base-line grids. The days of the Holy Grail layout, whereby one layout was thought to fit most needs, are never coming back, and we can only hope that web designers continue to implement proven techniques from print design.

Responsive design

In 2009 mobile phones and smart phones start influencing web design in a big way. More and more users are browsing on their phones, and that has created a need for a flexible layout that can adapt to users’ screens and devices. At the moment, there seems to be a relative consensus on fluid/liquid layouts being the best bet. The main reason for this is that there are simply too many different resolutions out there for a fixed layout to make sense for a web site that is going to account for its mobile users, in addition to desktop users. Mobile usage has yet to peak, so for now, its likely safe to say that this trend will continue for at least the next few years.

Recently, we have also seen an explosion in CSS frameworks that try to streamline web designers’ work. We will likely continue to see the introduction of newer and more flexible CSS frameworks, which will most likely be built using compiled CSS languages such as LESS; specifically, we will likely see more fluid frameworks that will work well with media queries and mobile phones.