As 2011 ends we take a look at what we can expect in the world of web design for 2012.
As the web continues to move forward toward an open, content centered existence, the future of its design is still unknown. For a long time, the standard web design was based on print design practices but it is safe to say that the web is not a static medium and has never been one. Throughout 2011 we have seen a rise in rich experiences geared toward user interaction and usability which is a far-cry from the simplified web designs of the past.
HTML5 became the most talked about programmer’s language and CSS3 became the lastest standard for CSS. We can expect more sites in 2012 to be built around HTML5 and CSS3. When thinking about devices, Responsive Web Design and Mobile became important trends; even Dries, project lead for the Drupal open source platform, stated in his keynote that “If I were to start Drupal from scractch today, I'd build it for mobile experiences first ...” We can be certain that in 2012 the buzz words for the year will involve: Responsive Design and Mobile First.
Open Type
2011 brought forth the OpenType fonts formart, which is the predecessor of TrueType. OpenType fonts can be seen as a tool to liberate web designers across the globe. The OpenType format known as “the @font-face revolution” gives designers a new embeddable and beautiful font library; for designers to play with. What this means is that designers have more control of the look and feel of their website.
Responsive Web Design
Responsive web design is the approach that suggest that design and development should respond to the user's behaviour and environment based on screen size, platform and orientation. When we think about Responsive design there are dozens of details that designers have to pay attention to, to ensure that the user experience remains constant.
In the past, when a user accessed a website, its servers pushed content to them based on what platform they were using- mobile, tablet or desktop web. But over the past year, engineers have begun to adopt responsive web design, which includes fluid widths, scalable images and adjustable layouts that remain consistent across all platforms, whether you’re accessing the site on a mobile phone, tablet, desktop computer or wide-screen.
The advent of responsiveness in web design now puts content at the center stage: how will we prepare our content for cross-platform delivery without having to recreate it every time? The answer, is to structure our content so we can create it once, then publish it everywhere. To do that, we need to find brand new ways to collaborate across disciplines.
Responsive web design not only creates a better user experience, it’s also economical. Companies only need to maintain one code base, which costs much less– and they don’t have to worry about version control. For example, if you have two sites, one for mobile and one for desktop, you carry the extra burden of syncing those builds.
Mobile First
With the rise of mobile users across all platforms many publishers are still focusing on their desktop site and treating mobile as an afterthought. Designer Luke Wroblewski published a book this year titled “Mobile First“ that makes the case for why web sites and applications should increasingly be designed for mobile first.
Primarily, the idea of designing for mobile first, or the mobile first movement, means that designers must focus on precision and necessity, which in turn creates a better desktop experience and higher convergence.
Apps Redefining the Web
CSS Layouts
In 2011 we saw CSS3 becoming the latest web standard. But what can we expect from CSS when it comes to layouts? The following are some CSS layout columns we can look forward to in 2012.
Multiple Columns
-
W3C Editor’s Draft
-
Browser support: Opera 11.1+, Firefox 2+, Chrome 4+, Safari 3.1+, IE 10+
You can render the content of any element into multiple columns simply by using column-width: <length unit> or column-count: <number>. As with paged content, you can use break-before, break-after or break-inside to control how the content displays within each column. You can also make one of the child elements span the whole set of columns by using column-span: all. Here is how that would look:
Columns are balanced out with content by default. If you would prefer that columns not be balanced, you can set that by using column-fill: auto property. Here is an example of the default behaviour (i.e. column-fill: balanced):
Exclusions
-
Draft specification (a combination of two proposals: “Exclusions” and “Positioned Floats”)
-
Browser support: IE 10+
Exclusions allow inline content to be wrapped around or within custom shapes using CSS properties. An element becomes an “exclusion element” when wrap-flow is set to a value that is not auto. The wrap-flow can take the following values: left, right, maximum,both, clear or the default value of auto. Here is how each of these values would affect the inline content around the exclusion element:
wrap-flow: right
wrap-flow: both
wrap-flow: clear
The wrap-margin property can be used to offset the space between the boundary of the exclusion element and the inline text outside of it. The wrap-padding property is used to offset the space between the boundary of the exclusion element and the inline text inside it.
What will this year bring?
What we do know is that the future of the web will consists of attractive and creative designs. We know that we want a rich user experience and we know it should be accessible anywhere. The web is not fixed and neither should our designs; the future is in the hands of the designers around world, only time can tell what this year brings.