Trends, Expectations, and Truth About Web Design 2013

Trends, Expectations, and Truth About Web Design in 2013HTML5 and CSS3, vendor prefixes, frameworks and pre-processors, responsive design (RWD), touchscreens, retina displays and HD design, SVG, custom fonts, large typography, full-screen (or large) and blurred photo backgrounds, parallax and infinite scrolling, color blocking, retro interfaces, centered headers, fixed header bars, skeuomorphism, minimalism, gamification, user experience, open source – these and many other words are names and signs of web design 2012. But what about 2013? What will be important next year?

Below you’ll find a collection of summarizing and predictive articles and posts. Some predictions are repeated many times, some are unique. Which are true and to what extent? We’ll find out the answer only in 2014.

What are your expectations and predictions for 2013? Feel free to share them in the comments.

Web Design 2013

Expected Trends

1). Web Design: 20 Hottest Trends To Watch Out For in 2013
http://www.hongkiat.com/blog/web-design-trend-2013/
by Jake Rocheleau: “All throughout 2012 there has been an enormous surge in new web design trends… Ideally these trends represent favorable ideas in the web design community. However designers will always have their own opinions when it comes to design terms, so take these ideas with a grain of salt.”

2). The State of Web Design, 2013
http://dbushell.com/2012/12/10/the-state-of-web-design-2013/
by David Bushell: “To wrap up 2011 I wrote a few thoughts on web design looking forward. Because I found it so helpful to remain focused with this personal reference, I’m doing it again this year.”

3). Future trends in web design: predictions for 2013
http://www.webdesignerdepot.com/2013/01/future-trends-in-web-design-predictions-for-2013/
by Jenna Scaglione: “I spoke with 11 designers and creative professionals about what they foresee for web and UX design in the coming year. Enjoy!”

4). 10 Web design trends you can expect to see in 2013
http://thenextweb.com/dd/2012/12/30/10-new-web-design-trends-you-can-expect-to-see-in-2013/1/
by Amber Leigh Turner: “In 2012 we have seen several new trends appear in web design, one of the most notable being the rise of responsive design… In this article, I’m going to share with you ten predictions I have about web design trends that could make their way into 2013.”

5). Six Expected Web Design Trends in 2013
http://smashinghub.com/web-design-trends-in-2013.htm
by Ali Qayyum: “On one hand you will be designing websites to please clients by following trends set in 2012 and on another hand, you will be designing stuff in a way so that you can set new trends for 2013. Today, in this article we will discuss some of our predictions as far as web design trends in 2013 are concerned.”

6). Web Design trends you can’t ignore in 2013
http://designreviver.com/tips/web-design-trends-you-cant-ignore-in-2013/
by admin

7). Discover the 10 hottest trends in website design
http://www.creativebloq.com/web-design/trends-website-design-10121055
by Claudio Guglieri: “The world of web design is changing fast. Claudio Guglieri, art director at New York agency B-Reel, identifies 10 key trends you need to know about.”

8). 10 Web Predictions for 2013
http://www.sitepoint.com/2013-web-predictions/
by Craig Buckler: “…while we may not have hover boards or day trips to the moon, technology and the web is evolving faster than ever.”

9). Why 2013 Is the Year of Responsive Web Design
http://mashable.com/2012/12/11/responsive-web-design/
by Pete Cashmore: “Media companies like ours are seeing a major shift in the consumption habits of their audiences. Those organizations that don’t act may find themselves behind the curve. Here’s why.”

10). What’s Hot in 2013: Our Picks
http://net.tutsplus.com/articles/general/whats-hot-in-2013-our-picks/
by Jeffrey Way: “I asked our Nettuts+ writing staff to compile a list of the technologies that they’ll be keeping a close eye on. Now these aren’t necessarily brand new, but we expect them to spike in popularity this year.”

11). Trends in User Experience
http://www.uxmatters.com/mt/archives/2012/12/trends-in-user-experience.php
by Janet M. Six: “As 2012 ends, it’s a good time to consider what the future of user experience might bring – in terms of both cultural shifts that impact UX professionals and UX design trends.”

12). The Future of User Experience Design
http://designmodo.com/future-user-experience-design/
by Marcin Treder

13). W3C’s Ian Jacobs on the future of HTML5
http://www.netmagazine.com/interviews/w3cs-ian-jacobs-future-html5
by Craig Grannell: “We recently reported on the split between the WHATWG HTML ‘living standard’ and the W3C HTML5 snapshot-oriented specification, while WHATWG spec editor Ian Hickson gave us his thoughts regarding the technology’s future. In this interview, W3C head of communications Ian Jacobs talks to .net about the split, forking issues, processes, and what sponsorship from Adobe, Microsoft and Google will mean for the W3C.”

14). The Future of CSS Layout presentation at Future of Web Design conference
http://zomigi.com/blog/future-css-layout-fowd/
by Zoe Mickley Gillenwater

15). Emily Lewis on the future of microformats
http://www.netmagazine.com/interviews/emily-lewis-future-microformats
by Tanya Combrinck: “Author and designer Emily Lewis answers your questions about microformats, designing for mobile, going freelance full-time.”

16). Web Design 2013: Emphasis on Website Performance?
http://www.htmlcut.com/blog/web-design-2013-conversion-and-performance.html
by admin

Skills for Web Designers in 2013

1). Big question: what skills does a digital designer need in 2013?
http://www.netmagazine.com/features/big-question-what-skills-does-digital-designer-need-2013
by Tanya Combrinck: “There seems to be a perception (or maybe even tensions) that designers should be experts in everything. You need to be an expert in UX and visual design. The flipside is: should these things be kept as separate roles?”

2). 10 Development Trends and Skills for Developers in 2013
http://smashinghub.com/10-development-trends-and-skills-for-developers-in-2013.htm
by Ali Qayyum: “As per some recent researches, the software developer is expected to be the highest paid job in 2013. In order to reach the heights and stay ahead of other software developers, you must be aware and be ready for the skills and trends expected to rule the year 2013.”

3). Tech Jobs In 2013: Open Source All The Way Down
http://readwrite.com/2012/12/31/tech-jobs-in-2013-open-source-open-data
by Matt Asay: “It’s a good time to be in technology. According to the December 2012 Dice hiring survey, 64% of hiring managers and recruiters surveyed expect to hire more tech employees in the first six months of the year, versus 47% for non-tech roles. Life looks even better for tech professionals with open source experience.”

4). The Web Design Survey 2012: The Results Are In
http://designshack.net/articles/design-shack/the-web-design-survey-2012-the-results-are-in/
by Jonathan Brealey: “…a picture of what web designers in 2012 think about their work, where they think the industry is headed, and how they do business.”

5). The results of the .net survey 2012
http://www.netmagazine.com/news/results-net-survey-2012-122019
by Oliver Lindberg: “…we now present a unique profile… of the web design and development industry as a whole. It provides a wealth of data on topics ranging from web expertise and salaries to software preferences and trends in upcoming projects. 68% of the respondents are based in UK, USA and Canada. So, importantly, we received a healthy number from other countries as well.”

6). 15 New Year’s resolutions for designers
http://www.webdesignerdepot.com/2012/12/15-new-years-resolutions-for-designers/
by Cameron Chapman: “…people who explicitly make resolutions are ten times more likely to achieve their goals than those who don’t. To that end, here are fifteen New Year’s resolutions web designers may want to consider making for 2013. Obviously you don’t need to commit to all of them, but you might consider taking on a couple for 2013, as away to inspire yourself to improve your professional life.”

How We Will Remember Web Design 2012

Trend Reviews

1). Review of Popular Web Design Trends from 2012
http://speckyboy.com/2012/12/20/web-design-trends-2012/
by Jake Rocheleau: “I want to use this article as a flashback over the year 2012 and review some exciting design trends. Many of these ideas have been around for years, yet have just recently made their way into mainstream topics of discussion. You will notice more of these trends written about in tutorials and web blogs as we forge ahead into 2013.”

2). Top 15 Web Design Trends of 2012
http://smashinghub.com/top-15-web-design-trends-of-2012.htm
by Ali Qayyum: “These trends have introduced and include some great new design techniques and they have been playing a great role in designing trendiest websites. Also, implementing these features is not a big deal because they are easy to understand with less complex coding.”

3). Design Trends: The Present, The Future, and You
http://speckyboy.com/2012/03/27/design-trends-the-present-the-future-and-you/
by Jessica Moon: “Whether you agree with them or not, design trends can teach us important lessons on what works and what doesn’t for users. They’re popular for a reason. The true value of a trend, however, lies in its longevity. If you can identify trends that have the potential to last in the distant future, you will have a great advantage in making your own work successful.”

4). Web Design Trends for 2012
http://blog.wearepropeople.com/web-design-trends-for-2012/
by Corina Ciripitca: “Whether it is about colors, coding, shapes, interactivity – trends are the ones that relate to a certain period of time in web design and most designers take them into consideration in order to be up to date with everything. Trends are also defined by usability, so in my opinion they should not be ignored when designing a web page. Here is a round up for just some of the web design trends for the year of 2012.”

5). Symptoms Of An Epidemic: Web Design Trends
http://uxdesign.smashingmagazine.com/2012/03/15/symptoms-of-epidemic-web-design-trends/
by Espen Brunborg: “…design and aesthetics work in mysterious ways, and no sooner does one Web design trend leave us before another appears.”

6). Easier to Understand 10+ Web Design Trends For 2012
http://www.andysowards.com/blog/2012/easier-to-understand-10-web-design-trends-for-2012/
by Brianne: “Trends are a requisite for the development and growth of web design. The trends in the field of web design are born, enhanced, and leads to the development of other trends. Based on the emerging trends over the years, especially towards the end of 2011, web design is expected to witness the following trends in 2012.”

7). The Top 10 Web Design Buzzwords and Hot Topics for 2012
http://designshack.net/articles/webstandards/the-top-10-web-design-buzzwords-and-hot-topics-for-2012/
by Joshua Johnson: “Though CSS3 and HTML5 are still at the top of our discussion lists, I decided to look around and see what other terms and buzzwords are major topics for 2012. Read on to see what web designers are ranting and arguing about these days. Along the way you’ll find over fifty excellent articles to check out that will brush you up on each topic.”

8). Current trend is not about beauty, it’s all about function: Have a look
http://www.webdesignbooth.com/trends-in-web-design/
by Alia Haley: “…trends are what help to add the wow factor in the design. It is also to be understood in this context that we need to talk more of functional excellence than aesthetic splendor if we need to create deep set impression in the minds of the users. Have a look at the instances we have picked up that give you the clearer picture on the demands of a web design.”

9). 10 Web Predictions for 2012: the Results!
http://www.sitepoint.com/2012-web-prediction-results/
by Craig Buckler: “Twelve months ago I published 10 Web Predictions for 2012. In this article, we’ll look at the accuracy of my prophecies.”

10). 12 Awesomely geeky things we’ve loved in Web design in 2012
http://thenextweb.com/dd/2012/12/26/x-things-weve-loved-in-web-design-in-2012/
by Harrison Weber: “Here’s a list of 12+ trends, products and toys we’ve loved in 2012, the useful, the funny and everything in-between.”

HTML5, Technologies and Web Standards

1). 5 Trends In HTML5 In 2012
http://readwrite.com/2012/12/26/5-trends-in-html5-in-2012
by Dan Rowinski: “At the end of 2011, the mobile industry believed that HTML5 was on the cusp of ubiquity. Everybody would be using it to build apps and mobile websites and we would finally see real operating systems based on HTML5 start creeping towards acceptance. HTML5 was to become the dominant development stack, taking the mantle from all those native apps that had come to dominate the iOS App Store and Android’s Google Play. What actually happened is that HTML5 more likely took a step back in developer acceptance in 2012. ”

2). HTML5 Fact or Fiction. Developers React to the Hype
http://www.kendoui.com/html5-adoption-survey-2012.aspx
“…with the majority of developers surveyed (82%) believing it is important to their job within the next 12 months.”

3). The developer’s guide to new exciting web technologies
http://www.netmagazine.com/features/developers-guide-new-exciting-web-technologies
by Bruce Lawson: “Bruce Lawson, open web standards evangelist for Opera, looks at some nifty new browser technologies that are not part of HTML5, including WebGL and SVG.”

4). Five things you didn’t know the web could do
http://www.netmagazine.com/features/five-things-you-didnt-know-web-could-do
by Eric Bidelman: “Eric Bidelman, senior developer programs engineer on the Google Chrome team, presents some practical uses of what’s possible with HTML5 and CSS3 today, including the CSS Flexible Box Layout Module and the HTML5 Filesystem API.”

5). Hot in web standards: May 2012
http://www.netmagazine.com/features/hot-web-standards-may-2012
by Lea Verou: “n the first of a regular series of reports, Lea Verou summarises the latest need-to-know developments in the fast-moving world of the Working Groups.”

Responsive Design

1). The Year is 2012 and This is The Year in Responsive Design
http://www.zurb.com/article/1136/the-year-is-2012-and-this-is-the-year-in-
by Ryan: “This year, we’ve further dug our heels into responsive design, committing ourselves to becoming the best at it with Foundation, our front-end framework. We weren’t the only ones. Other than being the year of the apocalypse-that-never-happened, 2012 was also a big year for responsive design. Here’s some of the best the year had to offer.”

2). Redesign Trend in Tech News Sites: Big, Responsive and Content Heavy
http://www.usabilitypost.com/2012/12/05/news-sites-redesign-trend/
by Dmitry Fadeyev: “There’s a new trend in the redesign of technology news sites, which has emerged with the move towards responsive designs. The new wave of redesigns sees the old blog format being transformed into a full-screen, app-like experience, with multiple columns, fixed position elements and a global navigation bar at the top of the page.”

Typography

1). 10 Web Type Trends for 2012
http://www.howinteractivedesign.com/push/10-web-type-trends-2012
by Jason Cranford Teague : “You’ve learned the history and basics of web typography. But what are the major web type trends you should be aware of when working in web design? Look for these 10 trends in web typography to take us through 2012 and beyond.”

2). The hottest typography design trends for 2012
http://www.creativebloq.com/typography/biggest-type-design-trends-2012-812539
by Rob Carney: “Typography is changing fast, and designers need to stay abreast of developments. Discover 20 trends that will inspire you to think differently about your own use of typography.”

Backgrounds, Headers, Footers, and UI

1). Creative Background Styles and Trends in Web Design
http://tympanus.net/codrops/2012/08/17/creative-background-styles-and-trends-in-web-design/
by Carrie Cousins: “The right background style can really set the tone for your website. We’ll explore some great examples and current trends in website backgrounds that include large images, bright colors and bold patterns.”

2). Design Trend: Blurred Backgrounds in Web Design
http://vandelaydesign.com/blog/galleries/blurred-backgrounds/
by Steven Snell: “In this post we’ll showcase 16 examples of this trend for your own design inspiration. See how other designers are using blurred backgrounds to create beautiful web designs, and maybe it will spark some ideas that can be put into practice in your own work.”

3). The State of Design in 2012: Six Header Design Trends
http://designmodo.com/header-design-trends/
by Keith Bryant: “Many of the design trends we’re currently seeing are borne out of this evolution towards mobile-friendly web content. Let’s look at some of the header design trends that we can expect to see as mobile technology grows.”

4). Footer Design Trends
http://speckyboy.com/2012/05/01/footer-design-trends/
by Keith Bryant: “The humble footer – long ignored by web designers – has become a site of a sudden burst of creative energy in the past few years, as designers realize the flexibility of the footer as more than a mere placeholder for contact and copyright info. Facilitating this change has been a gradual move away from a fold-centric design ethos, which focused on concentrating major design and navigational elements ‘above the fold’. With the abandonment of this ‘above the fold’ design approach, the footer has become the unit of choice for experimentation with design and navigational elements.”

5). Interesting Trends in UI Design
http://designshack.net/articles/graphics/interesting-trends-in-ui-design/
by Joshua Johnson: “Almost more than any other area of design, interfaces are extremely subject to the ever changing whims of designers and if you’re not in the loop, you could find yourself creating UI that feels outdated. Read on to see what’s trending!”

6). 16 Of The Year’s Best Ideas In UI Design
http://www.fastcodesign.com/1671459/16-of-the-years-best-ideas-in-ui-design
by Mark Wilson: “2012 was a very big year for the future of UI. Here are our favorite projects to catch up on before 2013 takes over and this whole list is, inevitably, antiquated.”

7). Web Design Trend: Color Blocking
http://www.queness.com/post/13302/web-design-trend-color-blocking
by Carrie Cousins: “Using square (or rectangular or even curved) colored boxes as a design tool are beginning to show up almost everywhere.”

8). User Interface Design Trends for Streaming Video
http://webdesignledger.com/tips/user-interface-design-trends-for-streaming-video
by Jake Rocheleau : “In this article I’d like to look into some UI components for designing streaming video websites. Often flash players and mobile web video is super important. And with social networking features these websites are growing more popular every day. It’s actually exciting to look into online video streams and how you could design a similar layout for one of your own projects.”

UX

1). The Top 5 Website UX Trends of 2012
http://uxmag.com/articles/the-top-5-website-ux-trends-of-2012
by The Catalyst Group: “User interface techniques continued to evolve in 2012, often blurring the lines between design, usability, and technology in positive ways to create an overall experience that has been both useful and pleasurable.”

2). 10 UX things we remembered in 2012
http://www.netmagazine.com/features/10-ux-things-we-remembered-2012
by Stuart Pill: “TH_NK’s senior experience designers Stuart Pill and Gavin Wye present 10 key takeaways from 50 hours of usability testing.”

3). 6 Mind-Blowing Things I Learned about UX in 2012
http://abetteruserexperience.com/2012/12/6-mind-blowing-things-i-learned-about-ux-in-2012/
by Jenna Curry: “Since June, I’ve spent countless hours reading, watching videos, writing articles and talking to other professionals about UX and how to build websites work better for businesses. Here is what I’ve learned…”

Retina Displays and HD Web Design

1). Apple’s new iPad will transform web design
http://www.netmagazine.com/news/apples-new-ipad-will-transform-web-design-121830
by Craig Grannell: “Retina display will add complexity but also push vector graphics.”

2). Ready or Not, Here Comes HD Web Design
http://designshack.net/articles/html/ready-or-not-here-comes-hd-web-design/
by Joshua Johnson: “Are you ready for HD web design? Do you know how your sites will look on a new generation of high resolution screens? What steps can you take to prepare yourself and what skills will you need to stay relevant in the years to come?”

3). See also the round-up Retina Display – The Future of Web Design. Internet Overview.

Opinions: Web Losses, Dying Trends, Clichés, and Other Thoughts

1). The Web We Lost
http://dashes.com/anil/2012/12/the-web-we-lost.html
by Anil Dash: “The tech industry and its press have treated the rise of billion-scale social networks and ubiquitous smartphone apps as an unadulterated win for regular people, a triumph of usability and empowerment. They seldom talk about what we’ve lost along the way in this transition, and I find that younger folks may not even know how the web used to be. So here’s a few glimpses of a web that’s mostly faded away.”

2). Web Design Trends That Died Out (Or Are Dying)
http://designrshub.com/2012/05/web-design-trends-that-died-out-or-are-dying.html
by Manuel Garcia: “Here we will look at a few of the things that have been and gone, and those that are just on the way out. In doing so we’ll illustrate the liquid nature of the internet and hopefully help to avoid making similar mistakes in future.”

3). 5 Overdone Design Trends
http://www.orphicpixel.com/5-overdone-design-trends/
by Mars Cureg: “There are thousands of posts about how to keep content fresh but it is just as important to know what to stay away from to make your clients stand out among the sea of web templates. Here are the design trends we never want to see again.”

4). Avoiding Common Design Clichés
http://www.evolutionarydesigns.net/blog/2012/09/21/avoiding-common-design-clichs/
by Rob Toledo: “Inspiration is a starting point, but we need to strive for originality! Be aware of these common design clichés, and avoid them like you would Comic Sans.”

5). 5 Design Lessons That I Learned From Writing 85 Web Design Critiques
http://designshack.net/articles/css/5-design-lessons-that-i-learned-from-writing-85-web-design-critiques/
by Joshua Johnson: “I’ve personally written up a whopping eighty five of these things thus far (#85 will be posted later this week). That’s a whole lot of design advice! Read on to see what I’ve learned about web design in the process, both from the good examples and the bad.”

6). A Strange and Sudden Design Trend
http://www.webmaster-source.com/2012/12/12/a-strange-and-sudden-design-trend/
by Matt: “Practically overnight, several major blogs rolled out similar redesigns that follow this emerging trend that Usability Post has documented. Suddenly, Mashable, The Next Web and ReadWriteWeb all have new designs that feature prominent top bars (which are primarily statically positioned), responsive designs that fill the viewport, flat colors, big image, and annoying columns that scroll independently from the rest of the page.”

7). AND THE SURVEY SAYS… “Mobile First” Is A Dumb Strategy
http://www.businessinsider.com/survey-mobile-first-bad-strategy-2012-12
by Henry Blodget: “In short, we use all of our gadgets. And we read ‘Business Insider’ and other publications on all of them. So the idea that we would suddenly drop everything and design Business Insider for, say, smartphones first just doesn’t make any sense.”

8). 4 Things That Are Changing Web Development
http://newevolutiondesigns.com/4-things-that-are-changing-web-development
by Tom McCracken: “Just when you start to think that things may be slowing down a bit, here comes another wave of change for web developers. This recent shift is primarily focusing on improving user experience by removing noise, or unnecessary crap from websites. Change is a good thing. These concepts appear to be based on practicality and common sense.”

Resources and Freebies

1). The best of 2012 for designers
http://www.webdesignerdepot.com/2012/12/the-best-of-2012-for-designers/
by Cameron Chapman: “…we’ve gathered up the best of what was new over the past year in one place! We’re not including everything (after all, some resources are no longer available, sites may have changed hands, apps may no longer be active, etc.), but rather have put together a true ‘best of’ compilation, with more than 100 entries.”

2). The 20 best new tools for web design and development of 2012
http://www.netmagazine.com/features/20-best-new-tools-web-design-and-development-2012
by Mark Penfold: “Mark Penfold compiles a top 20 from his monthly roundup of the best new tools that saw the light of day this year – and many are free.”

3). Our 50 Favorite Web Development Resources from 2012
http://speckyboy.com/2012/12/18/50-web-development-resources-from-2012/
by Speckyboy Editors: “…what can you expect to find in this years roundup? Pretty much everything a developer could ever need: CSS frameworks & tools, HTML5 resources, JavaScript frameworks & tools, web editors, mock-up tools, application frameworks, responsive layout tools and resources… and on and on.”

4). 50 Most Useful jQuery Plugins from 2012
http://speckyboy.com/2012/12/10/jquery-plugins-2012/
by Speckyboy Editors: “…Web Page Layout Plugins, Navigation Plugins, Form Plugins, Slider & Carousel Plugins, Chart & Graph Plugins, Image Effect Plugins, Video Plugins, and finally, everything else in-between. And mixed in with all of that you will find plenty of plugins that will help with your responisve layouts.”

5). 120 Impressive Collections of jQuery Effects From 2012
http://www.webdesignersblog.net/coding/150-impressive-collections-of-jquery-effects-from-2012/
by Shevaa

6). Best web design tools you should be using for 2013
http://10steps.sg/articles/design-articles/best-web-design-tools-you-should-be-using-for-2013/
by Aaron: “Now, putting a website on the web is as easy as using a wordpress blog. Nevertheless, for designers who need to do customization work, web development tools are still essential to make your work easier. Here are some of the best web development tools introduced in 2012 that you should be using for 2013.”

7). Top Apps for Graphic Designers 2012
http://www.idapostle.com/top-apps-for-graphic-designers-201/
by Steve Zelle: “Out of the many apps I download for my iPad and iPhone, very few end up being used regularly. The following is a list of the apps that survived the year on my devices – the ones that I think most graphic designers will find make their working day a little easier.”

8). Free Fonts: Ultimate Collection 2012
http://designmodo.com/free-fonts-2012/
by Adrian: “Here it is the long-awaited panel of free fonts for the year 2012! We have tried to gather a large collection of fonts for all occasions. You can download them for free, and some can even be used for commercial purposes.”

9). Our Most Popular Free Resources from 2012
http://vandelaydesign.com/blog/free-resources/most-popular-2012/
by Steven Snell: “One of the things we try to do frequently is release free resources that can be used by our readers: WordPress themes, UI sets and PSDs, icons, textures, and backgrounds.”

10). 30 Free Minimal Responsive WordPress Themes from 2012
http://speckyboy.com/2012/12/27/minimal-responsive-wordpress-themes-2012/
by Speckyboy Editors: “In this round-up we have compiled some of the best free, responsive and minimal WordPress themes that have been released in this past year (2012). All work perfectly as is, but their real beauty is that they are a fanatstic foundation for further development.”

11). Top 20 Free WordPress Themes of 2012
http://wpmu.org/top-20-free-wordpress-themes-of-2012/
by Sarah Gooding: “One of the highlights of 2012 was the large number of excellent free WordPress themes released into the wild by benevolent open sourcers.”

12). Usabilla: Our 15 Most Popular Articles of 2012
http://blog.usabilla.com/our-15-most-popular-articles-of-2012/
by Sabina Idler: “Here is a list of this year’s top 15 articles on the Usabilla Blog.”

13). Our Favorite Tutorials of 2012
http://psd.tutsplus.com/articles/web/our-favorite-tutorials-of-2012/
by Grant Friedman: “2012 was a big year for Photoshop. In April, Adobe released Photoshop CS6 and launched the Creative Cloud, and more recently announced the Photoshop 13.1 update. During that time, our authors produced some amazing Photoshop content. In this article, we wanted to take a look at some of our favorite Psdtuts+ tutorials from 2012.”

14). 10 Free Online Books for Web designers
http://www.webdesignfact.com/2012/12/free-online-books-for-web-designers.html
by admin: “…we have collected 10 free online books to add to your collection. From classics that you know to new presentations transformed in pdf files, we have 11 files for you.”

15). The top 20 web conference talks of 2012
http://www.netmagazine.com/features/top-20-web-conference-talks-2012
by Oliver Lindberg: “2012 in review: we asked web designers and developers from both sides of the Atlantic to recommend their favourite talks and presentations from the last 12 months. Here’s what they’ve come up with.”

16). The 10 hottest 10 Things lists of 2012
http://www.techrepublic.com/blog/10things/the-10-hottest-10-things-lists-of-2012/3531
by Jody Gilbert: “Favorite posts this year included several IT career topics, along with Windows 7 speed tips, HTML5 tags, development project mistakes, and cross-platform tools.”

Inspiration

1). The top 25 responsive sites of 2012
http://www.netmagazine.com/features/top-25-responsive-sites-2012
by Oliver Lindberg: “2012 in review: our expert jury selects the best uses of RWD they have seen this year. In 2012 responsive web design really went mainstream. Two years after Ethan Marcotte’s seminal article on A List Apart, it wasn’t just a concept anymore. Big brands started to embrace it, and many are represented in our roundup.”

2). The Best of Responsive Web Design 2012
http://www.inserthtml.com/2013/01/responsive-design-2012/
by Johnny Simpson: “In the past year we have seen the rapid movement of mainstream and general web design to responsive CSS and HTML. This has been a boon for the mobile web industry, and provided us with websites we can actually use on mobile devices.”

3). The top 20 HTML5 sites of 2012
http://www.netmagazine.com/features/top-20-html5-sites-2012
by Oli Studholme: “2012 in review: HTML5 Doctor Oli Studholme nominates the websites that made best use of HTML5 this year, including a range of useful developer tools and online resources.”

4). The top 20 CSS sites of 2012
http://www.netmagazine.com/features/top-20-css-sites-2012
by Val Head: “2012 in review: designer Val Head selects 20 of the best uses of CSS we’ve seen this year.”

5). Best of Web Design in 2012
http://webdesignledger.com/inspiration/best-of-web-design-in-2012
by Gisele Muller: “The sites we will show here were featured because of use of textures, images, typography, navigation and much more. So take your time and browse through these designs to see what was memorable in 2012.”

6). Line25 Sites of the Year: The Best Designs of 2012
http://line25.com/articles/line25-sites-of-the-year-the-best-designs-of-2012
by Chris Spooner: “This special end of year post features the best of the best, pulling together the awesomest designs from all 2012 Sites of the Week posts into one showcase of super cool designs. Which design was is your favourite?”

7). More Examples of Fresh Effects in Web Design
http://tympanus.net/codrops/2012/03/24/more-examples-of-fresh-effects-in-web-design/
by Mary Lou: “Another set of websites that use some unconventional and fresh effects.”

8). 21 Inspiring Examples of Illustrated Elements in Web Design
http://webdesignledger.com/inspiration/21-inspiring-examples-of-illustrated-elements-in-web-design
by Gisele Muller: “For our last web design inspiration list of 2012 we decided to gather examples of beautiful illustrated elements in web design.”

9). 30 Incredible Websites With Video Backgrounds
http://artatm.com/2012/10/30-incredible-websites-with-video-backgrounds/
by Jitu

10). 25 Best Parallax Websites, Jquery plugins and tutorials
http://www.animhut.com/tuts/parallax/
by Sriganesh.M

11). 6 of the Best and Worst Parallax Scrolling Websites for Design Agencies
http://abetteruserexperience.com/2012/12/6-of-the-best-and-worst-parallax-scrolling-websites-for-design-agencies/
by Ben Snyder: “Parallax scrolling itself refers to different layers of the website moving at different speeds when a user scrolls down the page… When done correctly, parallax scrolling actually adds to the message the designer/company is trying to convey.”

12). Restaurant Web Designs: 40 Yummy Cafe & Restaurant Websites and Trends
http://designmodo.com/restaurant-web-designs/
by Tatiana Titkova

13). Websites Design for Mobile Applications: Trends and Examples
http://designmodo.com/web-design-mobile-apps/
by Adrian: “…we’ll describe the most common trends in the design of websites for mobile applications. Do not take these recommendations as a basis and don’t use them unthinkingly on all sites.”

Internet, Search, and Marketing

1). 2012 KPCB Internet Trends Year-End Update
http://www.slideshare.net/kleinerperkins/2012-kpcb-internet-trends-yearend-update

2). Data Monday: Best of 2012
http://www.lukew.com/ff/entry.asp?1675
by Luke Wroblewski: “As we head into 2013, and leave a full year of Data Mondays behind us, here’s the sets of data from 2012 you found most interesting.”

3). Mobile stats show worldwide divide
http://www.netmagazine.com/news/mobile-stats-show-worldwide-divide-121995
by Craig Grannell: “iOS leads in the US, but China uses ‘less capable’ browsers.”

4). 2012 Top Scary Trends in Tech
http://www.zdnet.com/2012-top-scary-trends-in-tech-7000006689/
by Jason Perlow

5). Google In 2013: 11 Predictions
http://www.informationweek.com/mobility/smart-phones/google-in-2013-11-predictions/240143080
by Thomas Claburn

6). Google Doodles – The Best Of 2012 Edition
http://webexpedition18.com/articles/google-doodles-the-best-of-2012-edition/
by Slobodan Zivulovic

7). Infographic: 2012 Online Video Stats & 2013 Predictions
http://socialtimes.com/infographic-2012-online-video_b112645
by Megan O’Neill

8). 10 of the Most Memorable Marketing Campaigns of 2012
http://blog.hubspot.com/blog/tabid/6307/bid/33931/10-of-the-Most-Memorable-Marketing-Campaigns-of-2012.aspx
by Rachel Sprung: “…the following 10 companies’ campaigns were truly memorable to us, and they’re definitely worth a second look.”


 

Web Design 2013: Emphasis on Website Performance?

Web Design 2013: Emphasis on Conversion and Performance?For web design 2013 should be a year of the website performance and conversion. I don’t mean so-called PSD to HTML conversion. I say about the ability of websites to convert visitors into buyers (or Likes, repeat visitors, and so forth).

But why does web design need to make an emphasis on the website performance and conversion in 2013? They should always be on the top of the list. Unfortunately, “should” does not often mean “is”. However, when the economy is not good, businesses and individuals have to remember the role of conversion and that one of the main tasks of websites is to help companies and people to achieve their business and living goals. This circumstance may strongly affect web design in 2013 and stimulate a more pragmatic approach to the web.

Let’s look at some popular web topics of 2012 and possible trends of 2013 through the prism of the website performance and conversion.

Responsive Web Design (RWD)

Responsive Web Design (RWD)“Responsive” has been one of the most used words in the web design community this year. Lots of large websites have been redesigned responsive, many of web designers have started to develop such websites regularly. Three practical lessons from 2012 are that

  • RWD is first and foremost about user experience and content, rather than about devices
  • RWD shouldn’t be a set of tricks, it should be a clear regular procedure
  • Responsive web design doesn’t have to mean sacrificing the website performance

A responsive website may look good on different mobile devices. But what is the sense of it if it’s slow and with tricky and bloated code? Solving one part of the problem, we shouldn’t forget about others: loading and reaction times crucially affect website visitors and their loyalty. So, 2013 has to be a year when web designers and developers will combine responsiveness and adaptivity to the user behavior and advanced device functionality with performance and, as a result, increase the website chances to attract, retain, and “convert” visitors.

The work in this direction has already started. For example, see a number of December’s posts on 24ways.org.

Frameworks and Preprocessors

Frameworks and PreprocessorsRecently we’ve collected some thoughts about frameworks, preprocessors, and libraries used in the front-end development. The bottom line: even taking into account that people vary in their behavior (some of us prefer to use only the most modern gadgets and software, while others are more conservative) and in their circumstances (whether they have enough time to learn new tools or not), the opinions are too much different.

I remember the time when programmers wrote and tested their code on the paper first and only then went to computers. Programmers didn’t know the “Copy-Paste” function and used to count bytes, strive to develop as small programs as possible and respect neat code. First IDEs automated a lot of routine (command-line) operations and immensely improved the working efficiency. Some IDEs provided great templates and examples which were a real coding academy.

Windowing operating systems introduced a new level of complexity. Now even the “Hello, world” program could require more than 3 lines of formatted code. Demand on software for the graphical OSs was high, and hand coding became considering as an obstacle. The IDEs transformed into comprehensive development platforms with lots of options, libraries, templates, their own programming rules and language dialects, as well as communities and fans.

The IDEs separated system and application layers in application development and made it more rapid. On the other hand, a typical program became comparatively large and had a complex file structure (under DOS a program installation often meant just to copy a few files on a hard disk, in Windows it was a much more complicated procedure). Performance quite often suffered, but it was alleviated with fast hardware development. One more sign of those times was that some programmers knew exactly how to develop an application with the help of IDE but couldn’t do the same without it. Nevertheless, new applications offered an unprecedented level of interactivity and control over the computer for users (several apps working simultaneously, possibility to switch over apps by a single click, Copy-Paste between apps, just to name a few), and very soon they absolutely conquered the users’ hearts and market.

Now history is repeating itself. Web development – both front-end and server-side – has been becoming more and more complex and sophisticated every single day. And we need assistants again. Demand creates supply, and now we have a lot of CSS generators and preprocessors, HTML frameworks, Javascript libraries and code snippets. They add an important abstraction level and help to separate the system (cross-browser compatibility, polyfilling, and so on) and application layers, provide useful templates, pre-made controls and functions. Surely these tools help to develop websites faster. As usual the side effects are a bigger size, suffering performance issues, and a lower level of understanding and even creative freedom.

In my opinion, these tools are here to stay. However, they need improvements to generate an acceptably optimized code and provide reasonable website performance. On the other hand, developers (and clients?) should be aware of their shortcomings and use them wisely to achieve a reasonable balance between development costs and the website efficiency and user experience.

Social Buttons

One more point which I’d like to discuss is disappearance of social buttons from some websites. Sure, it is not a global phenomenon as the foregoing, but it is important for the website conversion too and looks like an interesting fashion (or fad?).

If the website conversion rate is high yet traffic is small, usually it is an unacceptable result. This is the reason why the website owners strive to attract as more relevant visitors as possible. A common recipe to achieve this goal is search engine optimization. If done right, SEO may essentially improve the website ranking and provide an additional traffic. Unfortunately, in spite of all recent updates Google’s algorithm still is not perfect. Just take a look at the results of this search:

Strange Google results - screen shot

 
Number 1 on this list is a website which in its essence is a doorway to another website: it contains only one post of 124 words length but with a link to the target website. ‘Sample Page’ of the blog is not even deleted. It takes a few seconds to understand that the title is borrowed, moreover, it is written with a mistake. Nevertheless, this is the best result from the viewpoint of Google.

That is why a lot of businesses and website owners add social media optimization to their website promotion mix. Today the social network buttons are a generally accepted way to share the website content, and clicking them has become a habit for many people when they want to bookmark or inform about a favorite post or image. Surely, the social buttons shouldn’t be obtrusive or play the role of the main element of the website design. But when they are absent at all, I reckon that the website owner clearly points out that he or she doesn’t want their content to be shared or promoted and the website doesn’t need new visitors/clients. Will that be reasonable in 2013?

Conclusion

In my dreams I have a pocket-sized device which I can attach to flexible screens that can be carried in a small box. If I need a phone, I don’t use additional screens at all or use a small one. If I need to check my email or work with my documents in the clouds, I attach a middle-size screen. If I want to watch a film on Youtube, I take the biggest screen. And every time I want the same (high) loading speed and expect only nice look and feel of websites, otherwise I’ll leave them in a few seconds. Is the web ready for such challenges? Hope it will, because good dreams should come true.