Skip to content

TechRepublic

  • Top Products Lists
  • Developer
  • 5G
  • Security
  • Cloud
  • Artificial Intelligence
  • Tech & Work
  • Mobility
  • Big Data
  • Innovation
  • Cheat Sheets
  • TechRepublic Academy
  • CES
  • TechRepublic Premium
  • Top Products Lists
  • Developer
  • 5G
  • Security
  • Cloud
  • Artificial Intelligence
  • Tech & Work
  • Mobility
  • Big Data
  • Innovation
  • Cheat Sheets
  • TechRepublic Academy
  • CES
  • See All Topics
  • Sponsored
  • Newsletters
  • Forums
  • Resource Library
TechRepublic Premium
Join / Sign In
Developer

The best web designs of 2013

By Ryan Boudreaux140 December 19, 2013, 12:40 PM PST

Image
1
of 21

BestWebDesigns_121913.gif
BestWebDesigns_121913.gif
The best web designs of 2013

My picks for the top 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,rnweb user interaction, parallax scrolling design, and responsive web design inrn2013. I viewed and tested all of the sites in several desktoprnbrowsers, including Chrome and Firefox, as well as on an iPhone 4 in Chrome andrnSafari for iOS. The featured websites are presented in no particular order. 

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

BestWebDesignsFigA_121913.gif
BestWebDesignsFigA_121913.gif
The best web designs of 2013

The Next Web

The Next Web

rnThe Next Web (TNW) isrna media company that promotes international technology news, business, andrnculture, and their website is a great example of responsive web design inrnaction.

The site is built using a combination of HTML5 and jQuery forrnmenus, easing, mouse wheel, sticky, hint, touch swipe, vertical news ticker, portfolio,rnand small menu scripts. The site also uses Web Open Font Format (WOFF) web fonts, includingrnff-tisa-italic, ff-tisa, source-sans-pro-bold, -light, and -regular, andrnss-pika.

This is a look at TNW displayed in Chrome desktop. 
BestWebDesignsFigB_121913.gif
BestWebDesignsFigB_121913.gif
The best web designs of 2013

The Next Web (mobile)

The Next Web (mobile)

TNW’s mobile version is easy to navigate and is a nice way to read its articles. This is a shot of TNW displayed in Chrome for iPhone.

BestWebDesignsFigC_121913.gif
BestWebDesignsFigC_121913.gif
The best web designs of 2013

The Cost of Carbon

The Cost of Carbon

The Cost of Carbon website by The Climate Reality Project allows users to determine their carbon footprint and carbon cost based onrnwhere they live by connecting with either their Facebook or Google+ account.

This site highlights the use ofrnscrolling with illustrations and is responsive, leveraging CSS forrntypography elements, applications, and fonts. Several WOFF fonts used includernCalibreWeb-Regular, CalibreWeb-SemiBold, and a custom font named CarbonTab. Scriptsrnutilized include an application JS, imod-content JS, and modernizr JS.
This is the site viewed in Chrome desktop.

BestWebDesignsFigD_121913.gif
BestWebDesignsFigD_121913.gif
The best web designs of 2013

The Cost of Carbon (mobile)

The Cost of Carbon (mobile)

The Cost of Carbon site viewed in Chrome for iPhone.

BestWebDesignsFigE_121913.gif
BestWebDesignsFigE_121913.gif
The best web designs of 2013

Fueled

Fueled

Fueled is a mobile design and development firm out of NYC that creates applications,rnservices, and projects for iPhone, iPad, Android, and the web.


In addition to a smooth flowing andrncreative use of the parallax scrolling technique throughout the site, Fueled also utilizes HTML5, the normalize css, and the @font-face rule for several Googlernfonts. It uses a TypeKit font license, along with its CSS filernloading JS. Other scripts include conversion.js, JQuery, and Modernizr 2.6.2.  


This is a look at the Fueled site in Chrome desktop.
BestWebDesignsFigF_121913.gif
BestWebDesignsFigF_121913.gif
The best web designs of 2013

Fueled (mobile)

Fueled (mobile)

This is a shot of Fueled viewed in Chrome for iPhone.

BestWebDesignsFigG_121913.gif
BestWebDesignsFigG_121913.gif
The best web designs of 2013

Pitchfork's "Glitter in the Dark" article

Pitchfork's "Glitter in the Dark" article

Pitchfork’s “Glitter in the Dark” article by Laura Snapes about Bat for Lashes singer Natasha Kahn has won severalrnawards, including the Best Visual Design and Function Webby Award. It’s one of the bestrnexamples of the parallax scrolling technique that I have seen for onlinernstorytelling.

The web page embraces plenty of HTML5 including the parallax scrolling effects using data-scale, data-width, data-frames, data-factor, and data-vector, in addition to multimedia element the audio player. The web page also utilizes CSS3 and includes ease-in, ease-out, transitions, opacity, alpha filters, and several interstitial interval and region classes, and jQuery along with JavaScript, and several calls to Amazon Web Services.
Other highlights include multiple images, a featured playlist ofrnsongs from the Bat for Lashes album The Haunted Man, a full screen option, and an option for standard vs.rndynamic page view.

This is a screen capture of the Pitchfork article viewed using Chrome desktop.   
BestWebDesignsFigH_121913.gif
BestWebDesignsFigH_121913.gif
The best web designs of 2013

Pitchfork's "Glitter in the Dark" article (mobile)

Pitchfork's "Glitter in the Dark" article (mobile)

This screen capture shows Pitchfork’s Glitter in the Dark article in Chrome for iPhone.  

BestWebDesignsFigI_121913.gif
BestWebDesignsFigI_121913.gif
The best web designs of 2013

NYT "Snow Fall" article

NYT "Snow Fall" article

The New York Times (NYT) “SnowrnFall” article by John Branch is one of this year’s bestrnexamples of web design and storytelling. The website utilizes several instances of the HTML5 video element along with a creative use of the parallax scrolling effect. In addition, the website incorporates the HTML5 presentational and organizational elements for article, aside, canvas, details, figcaption, figure, footer, header, nav, section, and summary.

This is a screen capture of the NYT site displaying the “Snow Fall” article in Chrome desktop.
BestWebDesignsFigJ_121913.gif
BestWebDesignsFigJ_121913.gif
The best web designs of 2013

NYT "Snow Fall" article (mobile)

NYT "Snow Fall" article (mobile)

This is a screen capture of the NYT site displaying its “Snow Fall” article in Chrome for iPhone.  

BestWebDesignsFigK_121913.gif
BestWebDesignsFigK_121913.gif
The best web designs of 2013

Clouds Over Cuba

Clouds Over Cuba

rnThe online documentary Clouds Over Cuba by The Martin Agency /rnTool won the Webby Award for Best Navigation Structure and for Cultural Institutions and is another great storytelling example forrnonline media.
The site presents the story of the Cuban Missile Crisis by incorporating several WOFF fonts (agaramondpro-regular,rnfuturastd-heavy, and futurastd-medium) and a slew of gif, jpg, andrnpng image resources. Script files that define several functions and actions include data.js, ga.js, and a customrnjfk.min.js, and one minifiedrnstylesheet file contains all the CSS for the site.
The HTML5-based website includes anrnoption for closed captioning, amazing navigation between sections of the story, including a real-time calendar of the events, a timeline display tracks at thernbottom of the screen during the documentary, and a document dossier is available. The ability to sync with your mobile device and a chapter selection option arernalso provided.
This is a screen capture of the site as seen in Chrome desktop.
BestWebDesignsFigL_121913.gif
BestWebDesignsFigL_121913.gif
The best web designs of 2013

Clouds Over Cuba (mobile)

Clouds Over Cuba (mobile)

This is a screenshot of the Clouds Over Cuba site viewed in Chrome for iPhone.

BestWebDesignsFigM_121913.gif
BestWebDesignsFigM_121913.gif
The best web designs of 2013

Behance

Behance

rnThe self-promotion and portfolio website Behance by Adobe provides a marvelousrnplatform for creative folks from many disciplines to share their work and projects and display their best stuff to prospective clients. Creatives can also follow or connect with people who have similar interests and/or whose work they admire.

Winnerrnof the Webby Award for Self-Promotion/Portfolio, Behance is built on HTML5 technology and uses itsrnown font be.woff, includes several JS files including for activity, network,rnand navigation, and includes several stylesheets for comments, responsive, footer,rnand text box lists.

This is a screenrncapture of Behance in Chrome desktop.

BestWebDesignsFigN_121913.gif
BestWebDesignsFigN_121913.gif
The best web designs of 2013

Behance (mobile)

Behance (mobile)

This is a screen capture of Behance as seen in Chrome for iPhone.

BestWebDesignsFigO_121913.gif
BestWebDesignsFigO_121913.gif
The best web designs of 2013

Disney.com

Disney.com

Another fun website with a responsive UX is Disney.com,rnwhich views wonderfully on all devices. It’s no surprise that Disney is keeping up with creative expressionrnon the web, as the top of its web page has this unique code snippet quoternfrom the master of “Imagineering” himself, Walt Disney, which is commented out justrnunder the doctype declaration as shown below:

rnrn

rnrn

rnThe website utilizes JQuery and several stylesheets, including ones called application, fixins, responsive-desktop, and responsive.

This is a screen capture of Disney.com as seen in Chrome desktop.
BestWebDesignsFigP_121913.gif
BestWebDesignsFigP_121913.gif
The best web designs of 2013

Disney.com (mobile)

Disney.com (mobile)

This is a screen capture of Disney.com’s site as seen in Chrome for iPhone.

BestWebDesignsFigQ_121913.gif
BestWebDesignsFigQ_121913.gif
The best web designs of 2013

The National Society of Collegiate Scholars

The National Society of Collegiate Scholars

The National Society of Collegiate Scholars is a 501(c) nonprofit organization that recognizes college students who are high achievers. Its website utilizesrnDrupal along with a series of CSS sprites to deliver an exceptional responsivernwebsite experience with easy to use drop-down navigation, along with socialrnmedia connections that are popular with the organization’s member base.

This is a screenrncapture of the site from Chrome desktop .
BestWebDesignsFigR_121913.gif
BestWebDesignsFigR_121913.gif
The best web designs of 2013

The National Society of Collegiate Scholars (mobile)

The National Society of Collegiate Scholars (mobile)

This is a screen capture of the National Society of Collegiate Scholars site as seen in Chrome for iPhone.

BestWebDesignsFigS_121913.gif
BestWebDesignsFigS_121913.gif
The best web designs of 2013

The Great Disconnect

The Great Disconnect

The Great Discontent (TGD)  is a website that offers not only a wonderful userrnexperience but also plenty of inspiration for web developers, web designers,rnand graphic artists. Its introduction says the site “… is a journal of interviews focusing on creativity, risk, and what connects us as artists.” 

Originally created by Ryan and Tina Essmaker, TGD has grownrnto include Josh Long as part of the creative team. The archive of interviewsrnincludes folks with backgrounds ranging from business, comedy, arts, design,rnmotion graphics, illustration, music, writing, development, photography,rneditorial, and more. 

The websiternutilizes WOFF fonts including ss-social-regular, script files, which include jquery.fittext,js, jquery.letterning.min.js, jquery.min.js, jquery.unveil.min.js, and modernizr.custom.js, and a responsive images script (responsiveimgs.min.js), and several other script files. Stylesheets include arnseparate typekit fonts CSS file, a screen.css, and an ss-social-regular CSSrnfile. I also see a custom stylesheet for each interview page (e.g., seth-godin.css for the interview highlighted here).

rnrnThe TGD interview with Seth Godin is displayed in this screen capture as seen in Chrome desktop. 

BestWebDesignsFigT_121913.gif
BestWebDesignsFigT_121913.gif
The best web designs of 2013

The Great Disconnect (mobile)

The Great Disconnect (mobile)

This is a screen capture of the TGD’s site as seen in Chrome for iPhone.

  • Developer
  • Account Information

    Share with Your Friends

    The best web designs of 2013

    Your email has been sent

Share: The best web designs of 2013
Image of Ryan Boudreaux140
By Ryan Boudreaux140
Thirteen years of web and graphic developer experience.
  • Account Information

    Contact Ryan Boudreaux140

    Your message has been sent

  • |
  • See all of Ryan's content

TechRepublic Premium

  • TechRepublic Premium

    Guidelines for building security policies

    PURPOSE These guidelines from TechRepublic Premium will help you define the necessary ingredients of a security policy and assist in its proper construction. They’re designed to work hand in hand with the subjective knowledge you have of your company, environment and employees. Using this information, your business can establish new policies or elaborate on those ...

    Provided By TechRepublic Premium Published:  Mar 2023 Modified:  Mar 2023 Read More
    View This Now
  • TechRepublic Premium

    Hiring kit: Artificial intelligence architect

    PURPOSE Recruiting an Artificial Intelligence Architect with the right combination of technical expertise and experience will require a comprehensive screening process. This Hiring Kit from TechRepublic Premium provides an adjustable framework your business can use to find, recruit and ultimately hire the right person for the job. From the hiring kit: DETERMINING FACTORS, DESIRABLE PERSONALITY ...

    Provided By TechRepublic Premium Published:  Mar 2023 Modified:  Mar 2023 Read More
    Learn More
  • TechRepublic Premium

    Hiring kit: Autonomous systems engineer

    PURPOSE Hiring the right Autonomous Systems Engineer requires a specific and precise recruitment process, supported by a thorough understanding of the project requirements. This Hiring Kit from TechRepublic Premium provides an adjustable framework your business can use to find, recruit and ultimately hire the right person for the job. From the hiring kit: DETERMINING FACTORS, ...

    Provided By TechRepublic Premium Published:  Mar 2023 Modified:  Mar 2023 Read More
    View This Now
  • TechRepublic Premium

    Hiring kit: Application support engineer

    PURPOSE This Hiring Kit: Application Support Engineer from TechRepublic Premium provides an adjustable framework your business can use to find, recruit and ultimately hire the right person for the job. From the hiring kit: DETERMINING FACTORS, DESIRABLE PERSONALITY TRAITS AND SKILLSETS The skillset of successful Application Support Engineers is marked by balancing the technical expertise ...

    Provided By TechRepublic Premium Published:  Mar 2023 Modified:  Mar 2023 Read More
    View This Now

Services

  • About Us
  • Newsletters
  • RSS Feeds
  • Site Map
  • Site Help & Feedback
  • FAQ
  • Advertise
  • Do Not Sell My Information

Explore

  • Downloads
  • TechRepublic Forums
  • Meet the Team
  • TechRepublic Academy
  • TechRepublic Premium
  • Resource Library
  • Photos
  • Videos
  • TechRepublic
  • TechRepublic on Twitter
  • TechRepublic on Facebook
  • TechRepublic on LinkedIn
  • TechRepublic on Flipboard
© 2023 TechnologyAdvice. All rights reserved.
  • Privacy Policy
  • Terms of Use
  • Property of TechnologyAdvice