So, as we approach the end of the year, it is customary for us all to take a moment and reflect on the successes and failures of the last 12 months. Working in an industry that moves faster than Usain Bolt with a tailwind - this can be a bit of headache for us web designers. We've witnessed the arrival of HTML5 and CSS3, the iPad and a handful more mobile devices to design for, Google's ever changing ranking algorithm and web-typography (to name a few).
As always we have done our best to respond accordingly. Aaron Gustafson and Ethan Marcotte said “to hell” with device specific design and brought 'responsive web design' into the spotlight. In the spirit of progressive enrichment Modernizr allowed us to indulge in and . Font-squirrel's '@font-face generator' gave the everyday schmuck the confidence to play with web typography, while Type-kit took it one step further and provided us with a whole new playground. It has been a whirlwind year for our industry and although I could, as I’m sure others will, go into much greater detail about 2010's success stories I'm not going to. In true web designer fashion, before 2010 is barely signed-off, I am going to move on, and begin to speculate as to what will prevail in the forthcoming year. Behold.
1. More Accurate Semantics
With the arrival of HTML5 and it's army of more accurate structural elements I expect to see an increase in new sites being pieced together by more logical mark-up, as opposed to divs and spans alone. All future and current browsers will handle these new semantic elements just fine, even if they don't technically 'support them'.
“What about IE?” I hear you cry. Of course IE doesn't handle unrecognised semantic elements well, but this handy script from Google takes care of all of that. It's a little bit ‘hacky’, but when was working with IE not?
In addition to the new HTML5 semantic elements, there is also the newly emerging ARIA specification from WSC which better explains to assisting technologies what structural semantic elements actually are. e.g. This div is actually a banner or this input box is actually a search box.
ARIA or WIA-ARIA is relatively well supported across browsers, however, because of it's on-going development it – like HTML5 – is not as-yet fully supported.
Resources:
Inspiration:
2. In loving memory of Georgia (1993 – 2010).
If Georgia was a footballer it would most definitely be Ryan Giggs. Emerging at around the same time, they have been a prominent force in their respective fields for the best part of two decades. But it's fast approaching 2011, Ryan doesn't quite have the legs anymore and his equally adept counter-parts, once consigned to the misery of the bench, are now ready for the big- time. Football metaphor aside Georgia is rapidly being replaced by it's serif team mates. With wider support for typefaces such as Vollkorn, OFL Sorts Mill Goudy, Droid Serif and the increased support for @font-face, designers are beginning to branch out. Expect a Georgia testimonial in the very near future.
Resources:
Inspiration:
3. Get Real.
In an industry ever-evolving to meet the needs and expectations of the user, we find ourselves at yet another corner-stone. Users, spoiled over the past few years with a plethora of real-time data and real-time communications served up by social networking, are beginning to expect it. The user's appetite for real-time, contextualized data is increasing and static, out of date content is losing it's value.
Resources:
Inpiration:
4. Responsive Design
This year we saw the introduction of 'responsive web-design' into the web-designer's vocabulary. In-short: responsive web design uses fluid grids, flexible images, and media queries to produce more 'layout agnostic' HTML pages. This means that one design can gracefully adapt to different screen sizes and devices. Some would argue that this 'one-design-fits-all' approach ignores context. Mobile users will require different information from desktop users, and while I would agree that responsive design is not the best solution for 'mobilizing' a site, I think these people are rather missing the point. At the end of the day a lot of what we can do as designers is limited by budget. Should we be afforded the luxury of a client with a large budget, and a requirement for 'mobilizing' their site, then we should look to approach these various devices independent from each other. Essentially the information will remain the same but the Information Architecture and user experience should be tailored to the user's requirements, whilst also taking into account how the user interacts with the device.
However, even when budgets do not permit, or there is no specific requirement for a mobile site we should still be doing more to make our designs adapt, or 'respond' to the various devices they are going being viewed on. We spend a substantial amount of time making sure our site's look right across numerous browsers, but when it comes to designing for different view-ports, we have been somewhat lagging behind. With Ethan Marcotte's new book 'responsive web design' due to land in the Spring, could 2011 be the year we stop dragging out heels?
Resources:
Inspiration:
5. Take a break
Again, not another new subject. Liz Danzico has been presenting her talk 'Adding By Leaving Out: The Power of the Pause' to audiences across various events during the course of the last year. She talks about how pauses give meaning to other content and how the unrelenting bombardment of information can reduce how much the user actually takes in. As designers we like white space, but we've had a tendency to fill it for no good reason, other than to make the appearance or experience more fluent, and less jarring, or simply to try and deliver as much information as possible. Whilst this does have it's merit, the pauses themselves can be extremely important. White space is just one easy example of where 'adding by leaving out' can be easily implemented into our design process. Print designers are usually much better at the implementation of white space than web designers and I can see 2011 being a year, not full of, but strategically structured with white-space and more print-inspired layouts.
Inspiration:
Comments