Svelte Web Design with SVG
Web designers who care about efficiency and speed might like to have a look at Sam Ruby's Blog.
All images are embedded SVG in the XHMTL. No bitmaps at all. Notice how fluid it is, how it scales with the browser's zoom in and zoom out controls (Control + and Control - in Firefox) and as you resize the browser window.
The page is small, just 14.5k of HTML plus 6.6k of CSS. There's 21k of JavaScript that isn't required for the design. Even the drop-down menu at the top works with Javascript disabled. Finally there a WOFF web font that adds 40k (another nice technique). It would be nice to have web fonts hosted for cross-site caching.
One disadvantage of designing sites this way is that the page must be valid XHTML for inline SVG to work. This makes it difficult to support older browsers properly, because the server must send the content-type as text/xhtml+xml, not text/html. This will cause older browsers to download the page instead of rendering it. You could work around that with user agent sniffing. I think that Internet Explorer might need that in any case.
Another disadvantage is that very few CMSs currently support generating valid XHTML, so it's difficult to know what tool we could recommend to help you to build and manage a website with inline SVG. Massimiliano of the Habari Project says:
I don't have any examples of blog software constructed this way... the only way to find out how many people would like having SVG on their blog is to provide a blogging tool which allows them to do it.
Both issues could be worked around by using external SVG (in separate files) instead of inline (embedded in XHTML). External SVG files are more cacheable but require additional HTTP requests to fetch from the server the first time.
Most older browsers do not support SVG images, so although the site degrades gracefully, it looks very plain without any graphics. You could work around this with a server-side renderer that converts the SVG to PNG for older browsers.
I think this is an excellent example of a great technique that we could be using for many more sites.
[...] the original: Svelte Web Design with SVG « Aptivate | A Blog for ICT4D Tags: another-nice, designing-sites-, include-inline, javascript, nice, page, page-must, [...]
[...] This post was mentioned on Twitter by Naomi , Paul Milford. Paul Milford said: Svelte Web Design with SVG « Aptivate | A Blog for ICT4D http://bit.ly/94RGtF [...]
It's good that the page is small; small file sizes make it easier for your page to load. It's quite an accomplishment, keep it up.
The source of Sam's blog looks nice, too: header and footer tags, etc.
Wow! Its great idea. small file sizes make it easier for your page to load. Thanks
Hey dude, ur post seems to be very useful.. Thanx 4 sharing!!!!!! but could u also suggest some tips for Choosing Effective Icons for Website...