All posts tagged ‘beautiful websites’

File Under: HTML5

Beautiful Websites: Google’s Book of 20 Things

If you’re looking for a nerdy book to give that budding programmer in your family this holiday season, Google has you covered.

Best of all, it’s free (you cheapskate) and it’s written entirely in HTML5 (you nerd).

The book is called 20 Things I Learned About Browsers and the Web. According to the forward, it’s “a short guide for anyone who’s curious about the basics of browsers and the web.”

It covers the structure of the web, then offers primers in HTML, JavaScript and Ajax, then offers a glimpse at what’s next in the world of browsers and web apps. There are also discussions about privacy, security, open source software, and design.

The book was written and built by the Google Chrome team, so the bulk of the technical stuff highlights features in Google’s browser. Under the hood, there’s some cool tech going on. There are fancy CSS type treatments and animations throughout. They’ve also recreated the familiar page-flipping animation as you thumb through the book, which frankly smells like the 1990s but adds a rather quaint touch here.

It’s a solid demonstration of how HTML5 can be used to present content in a compelling, “featurey” way. Plus, it’s not just for kids — I learned something new flipping through it, though I’m not saying what. I have a reputation to uphold.

See also:

File Under: Location, Visual Design

Beautiful Websites: Stamen’s Pretty Maps

We’ve seen some colorful map mashups in the past, like Hypercities and HeatMap, but few are as abstract and beautiful to look at as Stamen Design’s Pretty Maps.

The aptly-named app pulls sets of geodata from various freely available open mapping projects and plots them atop one another. Pretty Maps grabs street-level data from OpenStreetMap (the “Wikipedia of maps”), land formation data from Natural Earth and place-name and place-shape data from Flickr shapefiles — Flickr’s outlines generated by the tags people have attached to photos taken in that place. So all the data is from crowdsourced databases and either public domain or licensed through the Creative Commons. The maps are generated using TileStache and PolyMaps, two open source tools developed in-house at Stamen.

The result is a map that’s not so much usable for navigation as it is pretty to look at. Cities degrade into abstract and unique blobs, with pastel colors overlaying one another. The shapes are alien looking in texture and density, but instantly recognizable if you’re already familiar with the terrain.
Continue Reading “Beautiful Websites: Stamen’s Pretty Maps” »

File Under: Web Standards

Developer Creates a One-Line Website

The self-proclaimed “minimalist and perfectionist” Sime Ramov has developed his own technique for publishing incredibly stripped-down web pages.

View source on his blog, and you’ll see what we mean.

In Sime’s words:

There should only be one request when you hit any page. So page views equals hits. This is because CSS is inlined, and data URIs are used for images. If you look at the source of this page, you will notice everything is on one line, i.e. minimized. CSS and HTML are minimized separately and then inlined.

That wasn’t enough for me so unused CSS selectors are removed on a page-by-page basis. This means each page uses just those CSS elements and declarations which are actually present on any given page.

He writes everything in Markdown and uses Pandoc to incorporate templates. He also admits that he “stole” the majority of his ideas from Mark Pilgrim‘s scripts. No worries — the web is built on so-called “stolen” code, and he did the right thing by telling us where he got it.

There’s a debate about whether his method is actually more or less efficient going on at Hacker News.

NB: Yes, I realize I’m using the incorrect character to write Sime’s name, but the Croatian graphemes aren’t rendering properly in our WordPress installation for some reason. I have the Wired hamsters on it.

See Also:

File Under: Ajax, JavaScript, Web Apps

Beautiful Websites: Slippy for Presentations

Jordi Boggiano has created Slippy, a lightweight library for building animated, browser-based slideshow presentations. Slippy is very simple — check out a short demo and view the source code. Grab the code from github.

It’s written in HTML and it uses JQuery for the interactions (touch the space bar, use the arrow keys, or click the mouse to go to the next slide). It also uses Syntax Highlighter, a bit of JavaScript that pretties up snippets of code — we use Syntax Highlighter for tutorials here on Webmonkey — so it’s especially useful for presentations where you’re showing code examples. Jordi points out that Slippy can run your scripts in pretty alert() boxes (rather than the standard, boring browser alerts) to show your examples in action.

Composing a presentation is simple. Just hack a basic HTML file. Each slide is in its own <div>, and all the markup beyond that is standard HTML. Bravo!

See Also:

Beautiful Websites: Former Apple Designer’s Amazing Photo Gallery

matasblog

Slick photo gallery plug-ins for JQuery, Dojo and other JavaScript libraries mean that the days of the boring thumbnail grids are well behind us. But the same ease-of-use means that slick slideshows are everywhere — it’s hard to stand out.

Unless you’re Mike Matas. The former Apple designer and co-founder of Delicious Monster recently unveiled a new photo blog that has perhaps the slickest, yet simplest, gallery script we’ve ever seen.

Perhaps more impressive than the clever slide navigation and the blurred background photos, what’s really amazing about the site is how simple the interface is — Matas manages to pack in everything from embedded maps to comments without overwhelming the photos.

The only caveat is that the site requires a modern web browser with support for emerging standards. Internet Explorer users; nothing to see here. Also note that performance lags a bit in Firefox 3.6 compared to WebKit browsers like Safari and Chrome.

We’d hate to see a million ripoffs of this design, but if you want to do something similar, the site’s developers, Chi Wai Lau and Nefaur Khandker, say that it was built using the MooTools JavaScript framework.

Check out our three-part MooTools tutorial on Webmonkey if you want to learn more about using the free UI framework.

One very nice touch we like on the site is that scrolling changes the URL so there’s no back-button breakage. Unfortunately, if you turn off JavaScript entirely you notice that the site doesn’t function at all, which is worth remembering should you consider doing something similar.

See Also: