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 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.

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.

The Cost of Carbon (mobile)

The Cost of Carbon site viewed in Chrome for iPhone.

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.

Fueled (mobile)

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

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.

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

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

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.

NYT "Snow Fall" article (mobile)

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

Clouds Over Cuba

Clouds Over Cuba (mobile)

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

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.

Behance (mobile)

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

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.

Disney.com (mobile)

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

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.

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.

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. 

The Great Disconnect (mobile)

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