Web Development

The best web designs of 2013

My picks for the top designs of 2013

This is my list of what I consider the best examples of web designs, web user interaction, parallax scrolling design, and responsive web design in 2013. I viewed and tested all of the sites in several desktop browsers, including Chrome and Firefox, as well as on an iPhone 4 in Chrome and Safari for iOS. The featured websites are presented in no particular order. 

All screenshots in this gallery were taken by Ryan Boudreaux for TechRepublic.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

9 comments
xbandnet
xbandnet

Generally I tend to agree with wizarrddrummer! Snazzy pictures and fancy layout do not make for good web design. Similarly I began coding before the first HTML 1.0 standard. In my humble opinion, the web is for accessing information and applications. Its purpose is to improve the quality of life, not overwhelm you with images of creative designs.


I do appreciate the creative the artistic types contribute and believe this also serves a purposes, however the web is a user interface and more "web" designers should give consideration to streamlined cleaner approaches. I lean in the direction of small light weight graphics and media backed by strong DHTML5, PHP and Java Script.


The best approach is when you can marry the programmer with the graphics designer, it is very rare that you find these two strong capabilities in a single person.

johnhallms
johnhallms

I'm glad you didn't include this web site.


I am using Firefox and Windows 8. With tracking blocked, none of the links work - neither the web site examples nor the horizontal menu bar at the top. With blocking turned off, the links work.  


I'll turn blocking back on when I've sent this message and read your opinions on your selections.

wizarddrummer
wizarddrummer

PART I
Best Web Designs?
@#) $^$$^&$^#@ $*$#@ ^_)*(*$& ($ #@&!

Politely said, the Web designs that coming out of the Universal Design University suck pretty badly these days.

So many sites with hideous overly complex code that contains a level of Gee Whiz programming (Developer's saying look how cool I can be) to a degree that I have never seen before!

It's abysmal.

What makes me a good judge? Oh, I don't know, I started using the World Wide Web a FEW WEEKS after this page: http://info.cern.ch/hypertext/WWW/TheProject.html  and the code to compile the world's first browser was released by Tim Berners-Lee published it when there were only a few web pages in existence.

My first complaint and it's one that I can not illustrate because my one and only digital camera is not working.

A screen shot only captures the digital signature of what colors are being transmitted it is NOT an accurate representation what a user is actually seeing displayed on his or her monitor(s).

In the 22+ YEARS that I have been using the WWW I have never seen so many sites using medium to light GRAY to display text on WHITE backgrounds. It's a trend because this was not as popular 5 years ago and CERTAINLY NOT THE CASE more than 8 years ago. I can't find any sites today that have been upgraded that do not use copious amounts of GRAY text.

Gray is one of the WORST colors you can pair with a WHITE background for displaying text. The only colors that are worse than Gray would be a pastel YELLOW or PINK!

Gray is unique because it uses all of the RGB pixels. On monitors incapable of separating all 256 shades of GRAY correctly and/or on top of that, monitors that can't display a true bright WHITE or the deepest BLACK the text disappears into the background. When GRAY text is Italicized it becomes even worse.

That being said, I have a PLANAR PX2230MW Monitor that is (after spending many, many hours) calibrated to the best that the monitor can deliver. It's all I have and I can tell you that I have issued more complaints about website readability in the last few months than I have issued in the 21.5 years before this COMBINED!

On this page, http://www.techrepublic.com/blog/web-designer/tutorial-how-to-implement-the-parallax-scrolling-effect-part-2/ I have to use the mouse wheel to make it much larger to see the code because the gray text is barely discernable against the White background on my monitor. On some sites it is so bad that I have to highlight the text with the mouse. Here is a site that uses lots of GRAY text, but every single word on this site is completely readable on my monitor. http://www.couchtuner.eu/

Remember that first web site page from CERN? Sure it was simplistic but what makes it elegant is that it is pure and everything on it is very readable. It loads fast; there isn't a whole lot of processor grabbing gobbledygook code running in the background. It is KISS at its best.

I have no problem with gray as long as it doesn't interfere with my ability to read it. In terms of aesthetics it's a very DRAB look. What ever happened to Navy Blue or Forest Green or Maroon to display text? To passé? Not in vogue anymore?

I'm not going to waste your time with screen shots of things that you can't 'see' from my perspective.

Then there is the horrible programming (bugs on top of bugs) ... and within that, User Interfaces / Navigation that are tedious and cumbersome to use.

Yahoo, recently changed their email. Their new vastly unIMPROVED email is so tedious to use that I had to find another email client. There are too many things that are just completely wrong with that interface that I don't even know where to start. It's sad that Yahoo will offer POP3 to the people in ASIA but here in the USA a clunky IMAP is all that they will give forcing most users to deal with their lackluster interface.

Now, thankfully, I'm now back to using an email interface that doesn't hinder my workflow.

Yahoo's new email has so much code running in the background (including their dancing logo) that when you press the backspace key to get rid of three or for words by HOLDING down the backspace key you can't see the cursor and letters disappear until AFTER you release the key. And if you single stroke the key, the typematic rate is slower than the old 300 Baud Acoustic Modems!

I think that the kids today that are developing websites do not have a good handle on work flow when it comes to User Interfaces.

LOOKING Cool far outweighs simple get it done fast, with the least amount of clicks and gizmos that User Interfaces use to have.

A huge offender; Google can manage to index Yotta (perhaps even much more) Bytes of information but they present it in a tedious, unintuitive User Interface that makes users click on more things to get something done.

One or two clicks extra to get from Point A. to Point B. doesn't sound like much until you multiply that by 1,000's of instances per day over many years. That's hundreds of thousands of extra clicks. I call it website calisthenics.

wizarddrummer
wizarddrummer

PART II
Just a few examples...

On Google's UI what happened to the menu options at the top, where a user could select maps (without typing a destination or location in) with a single click. Maps is now hidden in an Icon so there are two clicks to get to the Maps now.

Then, while you are using Maps (another clear example of non intuitive design) why is there no "Place Push Pin Here" so that we can Pin places without road directions? Why is there no option to place an anchor point and drag the mouse or place a pin to see as the crow flies distances? Why isn't there a simple drag a rectangle zoom in feature that would allow us to choose, very quickly what we want to see in detail?

Google Images: Why is there no "Less Than a Certain Size" or "Small" or "Approximately" in the search list?

Why do we now have so many sites with the endless scrolling option? It plays havoc with what used to be a very efficient slide bar at the side.

YouTube's very disappointing and dismal disappearing Volume control that disappears within yet another disappearing control bar is so tedious that it's like a Chinese water torture! It's time to play the "Hover Game" folks every time we encounter a badly produced video! Even if the mouse remains over the control, poised to change the volume, it disappears anyway. An excellent design would be to pop up ALL of the controls as soon as the mouse enters the region and then leave them there until the mouse is moved away; no fade in or fade out is necessary.  

Why show us a slide that indicates what has been buffered when it has to reacquire the video again with the spinning wheel if we mouse to a different location?

Every time I want to go to the highest resolution, I have to go to a gear that presents me with set of sub menu options, one of which, is the screen resolution; that I then have to click in order to see what's available and then I can choose the highest one that's available. Often times it is at the highest level so I've wasted 3 clicks to find out I can't change anything! Why is it hidden inside a gear? There's lots of space on the bottom of the video to display these frequently used controls where one click would get the job done.

Yahoo, with its new CEO Marissa Mayer, (a Google transplant) has certainly put her touch on Yahoo. She spends more time on animated Logos than making sure the site is functioning properly and not tedious to use.
The classic email was quick, very readable, easy to use and got the job done very efficiently.
http://l.yimg.com/a/i/us/msg/site/blog/basie_screenshot.jpg

In the new email (log in and see for yourself) you can't sort the From or Subject anymore, email addresses become Buttons that can't be copied or pasted. A site called TV-Fanatic has done the same thing within a User's Profile settings where they define favorite shows. If you want to delete 20 of these in a row, you can't simply drag and then select and hit the delete key, you must click on each [x] on every single button and then when one is deleted they all change position (website calisthenics again).

The email interface is cumbersome. The workflow is now more tedious, time consuming, frustrating, difficult to read and impossible to navigate quickly with options that I never use and options that I Used to use eliminated. I've been using email since the mid 80's I know what works for me and their email doesn't work for me anymore!

I was able to compose 22 new emails and reply to 7 others, in my new email interface with POP3 more quickly than I can reply to single email in Yahoo's new interface. THIS IS NOT PROGRESS!

Why, after decades of being able to watch videos on line are we now confronted with with:
http://s10.postimg.org/66xdxduix/Yahoo_Dot_Com_Is_Now_Full_Screen.jpg
http://s29.postimg.org/vp2r1qhhj/Vimeo_Dot_Com_Is_Now_Full_Screen.jpg
with more and more sites following suit. What's the purpose? I know that it is FULL screen, I can SEE it! I ALSO KNOW that I can revert back to the normal view by hitting the escape key! Why am I being presented / forced to make a choice between pressing an Allow or Deny button?

I could go on and on and on, but my point is this: Virtually ALL of the new websites, and refurbished websites are being designed by people that idolize the major online web presences.

They are emulating what Yahoo, Google, Facebook, Microsoft (to some extent) and others are doing with the new trendy Walmart (every body that shops there is wearing the same styles of shirts) design look and feel. Everything is getting more GRAY and more tedious to use, but, hey it looks cool right?

The truth is, sometimes, I miss the gaudy (very individualistic) web sites of the mid to late 90's. At least they were more genuine and varied. Who doesn't like a paisley background with purple text? I'm joking but, back then, there was very little GRAY text anywhere.

Even though I have not visited any of the sites on this list yet, I am confident (just as I was confident that there would be a C: and a WINDOWS directory in each and every new release of the Windows OS with some legacy code dating back to CP/M)  that there are going to be many of what I consider less than stellar design elements that I have just described above, within them.

For me, the web has not progressed as much as it has regressed.
Just my two cents ($1.83 adjusted for inflation)

g01d4
g01d4

The Cost of Carbon website may use trendy technology but the design is still poor. The intro is tedious and unnecessary and the long scroll beyond the main window is annoyingly difficult to step through and difficult to parse (Firefox 26.0). Since I don't use G+ or FB that's as far as I bothered to go.

gamesb00k
gamesb00k

@xbandnet  "I lean in the direction of small light weight graphics and media backed by strong DHTML5, Python and Java Script."  Fixed that for you!

R.Santiago
R.Santiago

@johnhallms I have same issues here, using FF as well. But the site works well with Chrome or Opera, which is a shame because shouldn't be that way 

leonardcrl
leonardcrl

@wizarddrummer As a compatriot yours (in years but not skills)  I have battled  the same problems with the "grey" text.  My solution was several trips to the Ophthalmologist tweaking the old specs and finally getting interocular lens replacement in both eyes.  That fixed the problem of the grey text.  I was so bad I didn't even know the Firefox logo had blue instead of brown in it.  

Now that said I totally support you that there is entirely too much wasted code and "cool" stuff cluttering the browser pages.

BOUND4DOOM
BOUND4DOOM

@g01d4 I totally agree. I never figured out what the site was even for. It was not intuitive in any way. 


Find your cost of carbon,  ok, I will click there. Now log in with Facebook or Google, umm no, I have no idea who you are and I don't trust you with that info so enter in random name, use my location. It shows if carbon use increases I am at risk of flooding and drought. Ok. that was a epic waste of time. If there is more to the site. I couldn't find it.  Mystery Meat Navigation?