15 top web design and development trends for 2012

15 top web design and development trends for 2012

Craig Grannell quizzes the industry’s finest about the web design and development trends that will occur over the coming 12 months and that you need to be mindful of

2012 looks set to be an interesting year. The economic fallout continues to batter industries worldwide, seemingly with no end in sight; and many governments are doing their best to censor the internet, to deny citizens basic rights or prop up ailing media companies.

For web design and development, 2012 could be similarly turbulent. We’re in the midst of various skirmishes: mobile greedily gobbling up market-share from the desktop; native apps threatening aspects of the open web; paywalls barricading previously openly available information; the collision of consolidation and fragmentation; and skeuomorphism within interfaces contrasting starkly with new, innovative methods of designing and presenting information and content.

Short of owning a working crystal ball, it’s tough to predict exactly what’s in store, but a number of designers, developers and industry figures have given it their best shot. Here are their predictions for the industry over the coming year, and the trends you need to be mindful of in order to succeed.

1. Progressive enhancement

According to Happy Cog founder Jeffrey Zeldman, “the rise of mobile and the dominance of WebKit-powered smartphones over traditional desktop web browsing is convincing even die-hard skeptics to embrace progressive enhancement, HTML5, CSS3, and other tenets and aspects of standards-based design”. He adds that IE now more fully supporting standards should further bolster this “rush to embrace the shiny new”.

2. Responsive design

Zeldman continues that we’re also experiencing a “standards nightmare”, but in the hardware space: “There’s a plethora of devices out there with widely differing abilities – it’s never been more confusing or challenging to create brilliant interfaces that work across them all.” Because of this, he expects responsive design to play a big role in 2012, “bridging the enormous gulfs between platforms”.

Clearleft founder Andy Budd reckons this could be a means for “forward-thinking publishers to usurp Apple’s paywall on the iPad,” and predicts a gentle trickle of big responsive sites turning into a flood by year’s end: “It’ll be like the standards movement all over again.” But Flat Frog Design user experience strategist Erin Jo Richey thinks it won’t be plain-sailing: “Just because a site can shrink in size, that doesn’t mean all the information is equally valuable on desktop and mobile. The type of information users interact with needs to adjust as fluidly as the size of the site itself.” She says 2012 will therefore find more project leads and clients see past screen size and demand an appropriate strategy dictates the content that appears at various resolutions.

Responsive design, as per the website of Elliot Jay Stocks, will be commonplace by the end of 2012
Responsive design, as per the website of Elliot Jay Stocks, will be commonplace by the end of 2012

3. Flash will survive

Much was made of Flash’s supposed demise in 2011, yet designer Tom Muller forecasts that Adobe’s technology will have something of a resurgence during 2012: “Many people back the idea of not creating Flash sites, favouring web standards, and I’m less inclined to use it these days. However, I nonetheless believe it’s here to stay for a while.” Muller explains that during 2011 he was involved in three major projects that relied on Flash, simply because it remains the best tool for interactive video, animation and 3D online.

“Web designers and developers sometimes lose sight of what works and is demanded by a larger audience, due to preferring what’s considered ‘cool’ in their bubble,” he adds. “More big brands will shift from Flash, testing the water with HTML5 and CSS3 for focussed campaigns. But for entertainment sites, Flash is – and will remain – the predominant tool of choice to create engaging experiences. And that’s because those sites act as an extension of a movie’s universe, not only existing to serve cold information.” In gaming, Dull Dude Games founder Iain Lobb predicts an even bigger return to Flash: “Clients will try to steer things towards HTML5, because that’s where the hype is, but I think often the right thing to do will be steering them back towards Flash.”

Sites like Threaded show there’s still a place for Flash on the web
Sites like Threaded show there’s still a place for Flash on the web

4. Native support for plug-in features

Even if Flash thrives in 2012, the march towards extra browser-native features and power will continue, says Opera web evangelist Bruce Lawson: “As support for the various aspects of ‘HTML5 and friends’ improves and comes to more browsers and platforms, we’ll see greater pressure for native browser support of features that we used to use plug-ins for: camera and microphone access with HTML5 getUserMedia, and other things further out, such as support for adaptive streaming of multimedia.”

2012 will find more browser-native features that once would have required plug-ins, such as Sean Christmann’s video demos
2012 will find more browser-native features that once would have required plug-ins, such as Sean Christmann’s video demos

5. Appification takes hold

Remy Sharp, self-described ‘MasterChef of code and cookies’ maintains 2012 will see browsers get closer to the platform: “I’m expecting more high-quality, high-performance games running in the browser, in a way where you can’t tell if they’re native or not.” He also thinks we’ll see more sites working directly with files and other aspects of operating systems.

From a visual standpoint, Muller thinks this approach will find designers taking “major cues from tablet and screen interaction,” resulting in a “hybrid design that lives between ‘point and click’ and ‘touch and swipe’”. He also reckons 2012 will find skeuomorphic and heavily textured design lingering, not least due to Apple pushing it so hard on their devices. But publication designer Roger Black argues in a world of content, designers and editors will “have to shed this propensity to take what they know and convert it to something else”. He recommends: “Don’t think ‘newspaper on the tablet’ or ‘mobile magazine site’, for example, think ‘digital publication’.”

In terms of technology, social software consultant Suw Charman-Anderson reckons the convenience of apps is a boon for consumers but a pain for developers, in “having to create an app for every platform and deal with various store policies”. Beyond the native-versus-web-app row, she sees 2012 bringing about “widespread adoption of mixed native/HTML5 apps, where you can feed content to your apps across all platforms from a central source”. She cites Pugpig.com as an example: “They’re already merging iOS and Android with HTML5 and creating great user experiences. It’s only a matter of time before this tactic takes off as the only real way that smaller content producers can keep up with the demands of different platforms.”

Apple’s irritating penchant for skeuomorphic design will continue to influence designers, thinks Muller
Apple’s irritating penchant for skeuomorphic design will continue to influence designers, thinks Muller

6. Web app fragmentation

While web apps should find increased success in 2012, Lawson fears the year will also be one of fragmentation, replacing one group of proprietary systems (native apps) with another. “The spirit of co-operation between browser vendors will continue for the HTML5 spec, but not filter into other web stack specifications,” he says, sadly, noting that we’ve already seen Chrome-only apps. “A severe case of ‘not invented here’ can be seen in the 10 – yes, 10! – different app manifest formats invented by vendors instead of collaborating to make the W3C one better. This harms developers and, worse, lack of interoperability hurts consumers.”

Mozilla technical evangelist Rob Hawkes is optimistic that Boot to Gecko, Mozilla’s ‘operating system for the open web’  could boost the chances of web apps and “remove the reliance on proprietary single-vendor stacks for app development”. Initially focussed on mobile, it will implement a variety of Web APIs to access elements of mobile hardware.

Still in its early stages (the grab shows a UI mock-up idea from the Wiki), Boot to Gecko could aid in the fight against web-app fragmentation
Still in its early stages (the grab shows a UI mock-up idea from the Wiki), Boot to Gecko could aid in the fight against web-app fragmentation

7. Mobile gets bigger

Speaking of mobile, a no-brainer trend prediction is the continued growth of mobile traffic and usage. “Mobile web-based apps will dominate, and we’ll see the rise of mobile MVC frameworks like the one 37signals is working on,” opines Treehouse founder Ryan Carson.

In terms of market-share, mobile platform strategist Peter-Paul Koch expects mobile browsing to exceed 10 per cent in 2012. “Clients will clamour for mobile sites, and web designers and developers must be ready or risk losing clients,” he warns. Koch holds that making sites ready for mobile will also cause change for the good: “No more Flash, hover effects and pixel-perfect rendering in all browsers. Instead: responsive design, device APIs, and deciding which features are so important that they must be shown on the mobile site, along with an enhanced awareness that a website should work on any device.”

Mobile growth will increase the number of mobile-optimised sites in 2012
Mobile growth will increase the number of mobile-optimised sites in 2012

8. A device explosion

Easy! Designs Principal Aaron Gustafson thinks growth in mobile will lead to a major challenge: “Designers and developers will have to embrace the smaller tablet form factors – think Nook Tablet and Kindle Fire instead of iPad – as cheap tablet devices flood the market.” Lobb adds that this will lead to more developers “needing to own multiple devices, in order to check site compatibility”.

Designers will have to embrace smaller tablet form-factors in 2012
Designers will have to embrace smaller tablet form-factors in 2012

9. Respect beyond aesthetics

Designer and illustrator Geri Coady notes how we often say good design is invisible, yet “rarely take notice when a website or app shows incredible attention to detail not only in visual design, but in the choice of language and the behaviour of interactions”. She thinks that 2012 will find more designers and clients understanding that appearance alone isn’t everything: “We should treat style, content, and behaviour with equal respect – they must work together to strengthen the meaning and personality of a site, app, or brand.”

Such understanding will come from enhancing skill-sets (Carson reckons in 2012 that “any web designer who isn’t also a front-end developer won’t be able to find work”) or through collaboration. “I’d love to see more developers learning from designers, so we can do a better job of implementing designs. And vice versa, designers learning from developers, to understand what’s possible, and why some things are harder than others,” muses Sharp. The net result, says ‘Typomaniac’ Erik Spiekermann: “More designers will have an affinity with code and more coders will have an affinity with design”.

10. Social battles heat up

The importance of social networking sites will continue to grow throughout 2012, but opinions differ regarding potential outcomes. Developer Blaine Cook has an inkling that “Facebook will continue to wane in importance, and we’ll see more start-ups like Path, Instagram, Tumblr, and Spotify, where social interactions are being pushed out to the edges”. But Muller reckons “more social sharing networks and apps will try to take a piece of the Twitter and Facebook pie, but will actually end up integrating those into their service”. He also wonders whether Facebook will “offer tools to create sites, instead of just pages,” to satisfy people’s desire for “continued integration with social media, and services that allow you to share your life online”.

Social will continue to heat up in 2012, and Cook sees more start-ups like Path taking over from giants like Facebook
Social will continue to heat up in 2012, and Cook sees more start-ups like Path taking over from giants like Facebook

11. Growth of the two-screen model

“I think the two-screen experience will be big in 2012,” predicts Budd. With TV companies more aware of competition in the living room, they’re increasingly keen to push timely, relevant content to this second screen. “Examples in 2011 included the play-along version of a Million Pound Drop, and the Nature Watch tablet demo from the BBC,” continues Budd. “Numerous start-ups have moved into this space, including Shazam’s new TV-show tagging abilities, so expect much more in 2012.”

More companies will take advantage of the second screen in 2012
More companies will take advantage of the second screen in 2012

12. Distributed workforces

During the next year, Richey thinks the set-up of many companies will be atypical. “A new generation of young designers and developers entered the workforce in a time of lingering adversity. With a variety of technologies at their fingertips, many creatives have learned to find jobs, network, and acquire new skills from their bedrooms, the corner café, or a destination around the world,” she explains. “As the economy improves, many designers and developers won’t be willing to trade in their work style and relative freedom for a cubicle space. With a growing number of high-profile tech companies embracing a mobile and distributed workforce, employers looking for top-notch talent may need to re-evaluate their workplace culture.”

37signals CEO Jason Fried has condemned traditional office culture. Expect more companies to have atypical set-ups in 2012
37signals CEO Jason Fried has condemned traditional office culture. Expect more companies to have atypical set-ups in 2012

13. Stronger customer service

Headscape co-founder Paul Boag reckons 2012 will be the year of customer service within the web industry: “As web designers, we like to think we just build websites. We don’t. We also offer a service to our clients. We are often so obsessed with user experience, code and design that we forget other important factors such as good communication, understanding business needs and exceeding client expectations. If we are going to prosper in 2012 we need to blow our clients away, not just their users.”

14. Better value, not lower prices

Budd believes that the web industry is on a “continuous march towards professionalism” and this means designers and developers need to “up their game or run the risk of finding themselves in a price ghetto”. During 2012, he hopes to see a different approach from more designers: “Stop compromising standards and rushing out poorly planned and poorly implemented projects. Stop cutting corners and instead put in the effort required to deliver your clients exceptional value.” Spiekermann adds that clients will increasingly learn to react strongly to such attitudes and also “understand that websites are never truly finished, along with being more accepting of an agile process”.

15. Pushing the boundaries

Ending on a high, Edge of my Seat founder Rachel Andrew thinks 2012 will be a year in which technological and skills evolution could be rapid. “Throughout 2011, we saw browser support for parts of HTML5 and CSS3 improve to the point where we can really start to use this stuff in our work, and so we’re having to work out the new best ways to do things,” she says. “I’m finding on every project I start now I need to check myself, making sure I’m not doing something because that’s the way it has always been done when we now have new and better ways to achieve the end result.” Andrew believes 2012 will increasingly find designers pushing the boundaries of new technology, “experimenting, throwing away what doesn’t work or that which has been replaced with something better, and working out new best practices based on what we now have to work with”.

The fight for internet freedoms

Not a design trend so much as an argument for activism. A number of developers are concerned that lawmakers continue to argue in favour of curtailing internet freedoms, which in Europe and the USA is typically at the behest of media giants. Zeldman says that “like anyone with even a basic understanding of how the internet works, I’m radically opposed to SOPA,” which he refers to as a “truly terrible piece of legislation that would be impossible to enforce and would shut down virtually every site on the web […] and destroy the DNS system”.

Tumblr is one of several major websites that’s been active in opposing SOPA
Tumblr is one of several major websites that’s been active in opposing SOPA

Koch hopes if any country passes an insane law of this kind, “services will move or we’ll find creative ways around them,” while Lawson longs for people to stop using a ‘think of the children’ argument as an excuse for censoring content: “I’m a parent and don’t want my kids seeing [unsuitable content], but monitoring their web use is a parenting problem rather than one of censorship”. Regardless, 2012 will in part be a battle to stop governments seriously damaging the internet and therefore the entire industry.

38 comments

Comment: 1

Value of the social network is exaggerated. Maybe they become little less important, I really hope, in 2012.

Comment: 2

Is there no point for search engine optimisation (SEO) or general search marketing?

Should designers and developers also consider the ever changing environment of website development for search engines? This might be a point to discuss openly.

@Blackliteon I agree there is too much focus on Social Networking.

Think about this... A B2B IT firm providing hardware for example is not really going to benefit massively from SMM compared to natural and paid search marketing. "In my opinion"

I quote the legend that is Stephen Spielberg from today's BBC interview

"a tool in a very large tool kit and we have to learn to use our tools wisely and appropriately."

Although I have ripped Stephen Spielberg quote up a little it is a relevant quote in the world of web for designers, developers, seo specialists, analysts, etc

I believe there is a time and a place to bang the social media drum and it is not right for all.

Stephen Spielberg's full quote

"Tintin was the right film for 3D but I didn't think War Horse was. I think 3D is a tool in a very large tool kit and we have to learn to use our tools wisely and appropriately."

Cheers,
Joseph Gourvenec
SEO & Search Specialist

Comment: 3

What a great blog post, cheers for sharing this interesting theory of how you believe 2012 will pan out in the world of the web, of course you forgot to mention how 2012 doomsday might have a negative effect on the web also, only joking but that aside this is really an interesting post, and i think lots of these hypothesis will come true. This is a interesting time to be working in the world of web.

Comment: 4

I don't think "Stronger Customer Service" should be in this list as a trend for 2012. Surely any successful business knows that to survive and prosper customer service is a given.

Comment: 5

It's one of the most comprehensive lists of web design & development trends 2012 at the moment. Points 13 and 14 are very important, thank you for mentioning them, unfortunately they are often forgotten. Interesting tendencies are also expected in the PSD to HTML conversion market. We've tried to analyze them in our recent post "PSD to HTML Conversion at the Crossroads: Challenges 2011 and Outlook 2012" ( http://www.htmlcut.com/blog/psd-to-html-conversion-at-the-crossroads.html ). In our opinion, "Stronger customer service" and "Better value, not lower prices" could be especially important in this field.

Comment: 6

Great article. We're just building our new website and I'll think of this article as a checklist to hopefully cover us for the next 12 months... Before technology advances again and we need to start all over again!

Comment: 7

Agree with @htmlcut on #13.

Am very pleased to see a commitment to prioritising clients as a trend for 2012. About time. It's easy for people forget that clients let us innovate. Agency/Client partnership is very important #ClientLove

Comment: 8

I have to say I'm not looking forward to the prospect of having to own so many devices. In the house I already have two laptops (one Mac, one Windows), and iPod Touch - I think what would be great would be the development of virtualisation software in order to mimic other devices to effectively cross-test. Investing in tablet computers (plural) is an expensive business!

Otherwise I'm looking forward to having time to develop responsive websites and more mobile websites this year (I have at least one job where that's going to be needed).

And I hope clients understand the 'better value not lower prices' principle - so far in my experience they don't - possibly because of the recession and budget control, but it can make providing a very quality product quite difficult when you have tough budgetary constraints.

Looking forward to 2012 in design and development! (and I'm glad I design and code already!).

Comment: 9

#3 Flash will survive? Not likely.

So interesting, every-time some soothsayer goes and tries to advocate for Flash again, they almost always point you to some asinine example such as that vomit-inducing-trash listed above from resn.co.nz. To think someone or a team of people actually wasting their time and resources putting that together.

99% of the time, flash-based projects are pointless gimmicks.

If you'd like to explore a cool interactive html5 piece, check out http://www.ro.me/

Comment: 10

Rovo,

Your link does not work on my EVO, or my xoom, or my galaxy tab, or my ipad or my iphone, or my ie browser.

Are you seriously suggesting this as an alternative to something that works on 96% of all the world internet connected devices?

Html 5's huge selling point is that its supposed to work on mobile and run the same eveeywhere, yet your example does not work on any puts my mobiles, and only one browser on the desktop.

Also, since I was so curious I downloaded chrome to see it... what a waist of time, its just some 10 year old animated gif looking crap.

Comment: 11

Great article. I look forward to the battles between the social web, mobile vs website and of course the never ending browser wars. It will be interesting to see what techniques we will be using in design and development by the end of this year!

Comment: 12

Really exiting article. More things are happening around web. Let us see how the web will transform to next phases. Mobile development is very exiting and HTML5. But i dont think there is much scope for flash even though it may survive. Its great article. Thanks

Comment: 13

I think WordPress will get even stronger and mainly because of point 2, it now ships with a default responsive theme, twenty eleven and will get an update pretty soon.

Comment: 14

Good article. A lot of this stuff was happening in 2011 so the trend simply continue. One thing that isn't mentioned here is the number of sites hitting end of life this year and over the next couple of years. There are millions of ASP classic, Joomla and Drupal sites that cannot be easily updated that will need major overhauls. Also, there are countless business sites that need to go at least partially mobile.

Comment: 15

Glad to know about web design and development trends on 2012, this is very use full information on current trend.

Comment: 16

Great post. I must say that in my opinion, the best sites are clean and almost boring, but easy to use.

Comment: 17

Mobile responsive design is the key trend we are pursuing in our design at the moment. We develop using wordpress and the explosion of quality responsive themes by the likes of Studiopress are spurring rapid mainstream acceptance of responsive design. Once this approach becomes popular the question changes from "how do we do responsive design" to "why on earth wouldn't you".
Still plenty of sites for big businesses out there that are unusable on an iphone.

Comment: 18

the main focus is on Google this year. People are abusing the power of web 2.0. Content share and collaboration are mostly fake or ineffective. Social media is still confusing as to how it is benefiting a website's traffic and popularity. this year started with Google cramping addressing some of these concerns through their penguin and panda update. I believe there are a lot to come. But if there is anything good that came out in 2012 that is "responsive web design". It reduces the need of a mobile site specially made for handhelds. Instead it itself adapts and becomes a mobile friendly site. This surely is in the limelight.

Comment: 19

Responsive websites are the way forward. I just built my first one and it's so clever the way it displays on an iPad and a smart phone.

Comment: 22

Progressive enhancement and responsive web designs these two are my favorite. But as per my knowledge responsive web design is a leading trend among all of above mentioned.

Comment: 23

I usually follow the web design trends quite closely and I notice that there's a big decrease in the use of flash actually. I doubt it will stick around, but time will tell.

Comment: 24

yes, getting fixed with all devices and screen requires universal frames. even monitors to monitors there is variations

Comment: 25

Pretty cool, I see that flash is still in there and that's nice to see even though it sucks for SEO.

Comment: 26

All those platform make the work very difficult for programmer and web désigner...

Comment: 27

So interesting, every-time some soothsayer goes and tries to advocate for Flash again, they almost always point you to some asinine example such as that vomit-inducing-trash listed above from resn.co.nz. To think someone or a team of people actually wasting their time and resources putting that together.

99% of the time, flash-based projects are pointless gimmicks.

If you'd like to explore a cool interactive html5 piece, check out http://alrazaak.com

Comment: 28

Brilliant article now a days HTML5,CSS3 the advanced features are used.
3rd point it has mention about adding flash its really a good idea.

Comment: 29

Congratulations to your fantastic article. Not only do you know a great deal about it, you know how to present in a way that people will want to read more. Flash looks nice but I still think there are better ways to design a site and make it look equally nice as flash does. Not to mention that flash pretty much s*cks when it comes to seo.

Comment: 30

responsive design is getting bigger and bigger every day.

Comment: 32

I agree, to point 5 - flash is still the best tools for entertaining websites. Sadly it is not supported by apples devices which quite a few people use. I think it will be difficult for flash to survive, especially with html5 and css3 getting more popular.

Comment: 33

I’m bookmarking this one, undoubtedly returning thereto next time I redesign or create a new web site. nice stuff!

Comment: 34

The most recent trend is the inclusion of mobile functionality. But while the digital landscape continues to change at such a rapid rate, what does the future hold for the CMS ? The ongoing use of several smartphones like Apple iPhone, Blackberry and Tablet; marketing automation; social media as Facebook, Twitter, Orkut; clod computing, targeted online marketing tools; and various other trends in the online world have forced the vendors to think of novel ideas so that the customer base gets an excellent experience on their website. As the customers want to access the company information from anywhere on their hand sets, the mobile sites are becoming more popular.

Comment: 35

An excellent article. All the 15 points are well informative about updated trends and a guide for the web designers. I agree that mobiles and other devices will take the bigger stake in the web. But it is really a challenging task for designers and developers to give a compatible designs for all the devices.

Flash may be replaced with HTML5, css3 and Jquerys but it still a leader for web animations and gaming websites.

The real challenge is for designers and developers they need to update themselves ever. Its a nice article and should read by all the designers.

Comment: 36

What is Limited Liability Company (LLC)?
The Limited Liability Company or LLC is not a partnership or a corporation. Limited Liability Company (LLC) is a relatively new business structure allowed by state statute. An LLC is a distinct type of business that offers an alternative to partnerships and corporations, by combining the corporate advantages of limited liability with the partnership advantage of pass-through taxation.
http://www.infotaxsquare.com/

Comment: 37

Mobile trends are indeed the future... even Facebook is struggling to keep up with mobile users. This also makes things worse for Flash as iPhones and iPads dominate the mobile environment and do not support flash.

Comment: 38

Design for the mobile web will just keep getting better. Th artisitic or graphic aspects always lag the technology. Remember how awful the first sites on the looked?

Be sure to SEO your mobile sites for the mobile web and submit your mobile websites to directories and search engines built around mobility.
June issue on sale now!

The Week in Web Design

Sign up to our 'Week in Web Design' newsletter!

Hosting Directory
.net digital edition
Treat yourself to our geeky merchandise!
site stat collection