RSS
 

Archive for April, 2011

For Your Script Loading Needs

15 Apr

Advertise here

As JavaScript usage has skyrocketed over the last few years, so has the sheer number of scripts that are being loaded in an average web page. With these script tags comes a lot of baggage, such as blocking and lack of dependency management.

Today, I’d like to bring your attention to a number of JavaScript loaders, which are mini toolkits that significantly simplify how you add and load scripts.


The Problem with Simple Script Tags

They Block the Page

The page stops ‘happening’ while the script is downloaded.

JavaScript files loaded using the script tag are blocking by nature. Everything that’s happening or loading on the page is halted while the script is downloaded and executed. And remember that this applies to each script tag. Some modern browsers may let you download these in parallel, but the rest of the page is still blocked from doing anything meaningful.

No Easy Way to Manage Dependencies

Lack of dependency management is a big drawback.

Next up comes the issue of handling dependencies. For your average web page, you probably don’t need one. Check if your library is loaded and move on. For a non-trivial web application though, this isn’t a great solution. You’ll need to load scripts conditionally based on dependencies. Even then, you’ll still have to figure out the order in which they’re loaded. You can probably do it manually for 3-4 files, but when things begin piling up, you’re probably better off with an automated solution.


Available Choices

The initial idea for this round up was sparked by a post over at Hacker News about making a list of JavaScript script loaders, roughly a month ago. I watched the list balloon up from 3 to a grand total of 10 before I lost interest and moved on.

Now that sufficient time has passed, I think that list is going to be quite massive. Unfortunately, my Google-fu is pretty weak and I can’t seem to find it. If an eagle eyed user manages to find this thread, post in the comments below so I can link to it and hopefully expand my list here as well.

This list is drawn from recommendations by high level web developers who use these tools in their applications.

And as to my choices here, this list represents a superset of recommendations which flowed in after I asked some of the front end community to pitch in with the solutions they’re using. Some of the solutions below may handle dependency managements too, though most stick to simple asynchronous loading. Regardless of the extra niceties, each of the scripts below do one thing with aplomb — load up JavaScripts with minimal fuss.

So without further ado, and in no particular order:


HeadJS

Head JS loads scripts in parallel no matter how many of them and what the browser is. Load scripts like images. Use HTML5 and CSS3 safely. Target CSS for different screens, paths, states and browsers. Make it the only script in your HEAD.

Author: Tero Piirainen

Project URL: Here

Size: 6.3 KB

Related links:


LabJS

LABjs (Loading And Blocking JavaScript) is an all-purpose, on-demand JavaScript loader, capable of loading any JavaScript resource, from any location, into any page, at any time. You can easily specify which scripts have execution order dependencies and LABjs will ensure proper execution order. This makes LABjs safe to use for virtually any JavaScript resource, whether you control/host it or not, and whether it is standalone or part of a larger dependency tree of resources.

Author: Kyle Simpson

Project URL: Here

Size: 4.7 KB

Related links:


RequireJS

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

Author: James Burke

Project URL: Here

Size: 13 KB

Related links:


ControlJS

ControlJS is a JavaScript module that handles both inline scripts and external scripts, delays script execution until after the page has rendered, allows for scripts to be downloaded, not executed and integrates with simple changes to HTML and no code changes

Author: Steve Souders

Project URL: Here

Size: 3.6 KB

Related links:


StealJS

The StealJS project is a collection of command and client based JavaScript utilities that make building, packaging, sharing and consuming JavaScript applications easy. Includes modules for dependency management, JS compression, cleaning and logging.

Author: Brian Moschel

Project URL: Here

Size: 11.4 KB

Related links:


yepnope

yepnope is an asynchronous conditional resource loader that’s super-fast, and allows you to load only the scripts that your users need. It works with both JavaScript and CSS and has a full test suite in QUnit that you can run in your set of supported browsers to make sure it works.

Author: Alex Sexton and Ralph Holzmann

Project URL: Here

Size: 3.4 KB

Related links:


PINF JS Loader

The loader allows for bootstrapping a consistent and state-of-the-art CommonJS environment for any supported platform (on server & in browser) and thus is ideally suited to be used as the target for the commonjs command and the development of cross-platform JavaScript applications and libraries.

Author: Christoph Dorn

Project URL: Here

Size: 22 KB

Related links:


JSLoad

JSLoad is a Javascript file loader that we wrote for Instructables. You give it a set of dependencies and groupings, and it loads the files you need, when your executing code needs them. The real usefulness of JSLoad comes with its ability to group dependencies using tags.

Author: Eric Nguyen

Project URL: Here

Size: 9.8 KB

Related links:


JsDefer

JsDefer features parallel/serial loading based on definitions, dependency, and wrapped versus unwrapped, and whether dependencies are defined in separate def file or in script itself and integration with Deferred (as in jQuery 1.5) enables or simplifies many use-case scenarios among many others.

Author: Boris Moore

Project URL: Here

Size: 4.7 KB

Related links:


JSL (JavaScript Loader)

JSL features on-demand loading, is browser cacheable, dynamic asynchronous JavaScript loading, lazy loading and duplicate source prevention among a ton of other features.

Author: Andres Vidal

Project URL: Here

Size: 2.1 KB

Related links:


YUI 3 Get

The Get Utility provides a mechanism for attaching script and css resources — including cross-domain resources — to the DOM after the page has loaded.

Author: Adam Moore

Project URL: Here

Size: 17.9 KB

Related links:


DominateJS

DominateJS allows you to asynchronously load all your JavaScript, and defer sequential execution until the page loads. DominateJS aims to be a cross-browser and 100% document.write-safe library! This is a heavily modified (and powerful!) evolution of ControlJS.

Author: Chris Joel & Jason Benterou

Project URL: Here

Size: 48 KB


Load.js

load.js is a micro JS lazy-loader. Built on top of chain.js, it allows you to lazy load your JS scripts sequentially or in parallel and handle complex dependency chains.

Author: Chris O’Hara

Project URL: Here

Size: 2 KB

Related links:


BravoJS

BravoJS is an implementation of a proposed draft for CommonJS Modules/2.0

Author: Wes Garland

Project URL: Here

Size: 10.7 KB


Bootstrap

Bootstrap is a small library for dynamically loading JavaScript files.
It’s primary use case is for using in your JS code to load JS files only when they are used.

Author: Scott Koon

Project URL: Here

Size: 1.3 KB


LazyLoad

LazyLoad is a tiny (only 904 bytes minified and gzipped), dependency-free JavaScript utility that makes it super easy to load external JavaScript and CSS files on demand.

Whenever possible, LazyLoad will automatically load resources in parallel while ensuring execution order when you specify an array of URLs to load. In browsers that don’t preserve the execution order of asynchronously-loaded scripts, LazyLoad will safely load the scripts sequentially.

Author: Ryan Grove

Project URL: Here

Size: 1.6 KB


curl.js

curl.js is a small, but very fast AMD-compliant asynchronous loader. Current size: 4.5KB (2.1KB gzipped) using Google’s Closure Compiler.

If you’d like to use curl.js for non-AMD modules (ordinary javascript files), you’ll want to use the version with the js! plugin built in. You may also want to build-in the domReady module. The combined curl+js+domReady loader is still only 6.1KB (2.7KB gzipped).

Author: John Hann

Project URL: Here

Size: 5 KB


$script.js

$script.js is an asynchronous JavaScript loader and dependency manager with an astonishingly impressive lightweight footprint. Like many other script loaders, $script.js allows you to load script resources on-demand from any URL and not block other resources from loading, like CSS and images.

Author: Dustin Diaz

Project URL: Here

Size: 1.4 KB


NBL.js

NBL.js is a tiny script that will make your HTML pages load faster by loading all your JavaScript files asynchronously (in parallel) with the rest of your page. Normally if you include two or three scripts in your page, the browser will wait for them to be executed before your page is shown.

Author: Berklee

Project URL: Here

Size: 971 B

Related links:


That’s a Wrap!

While each of the tools listed above handle script loading in slightly unique ways, be sure to perform your tests when deciding which is the right one for you.

As I mentioned earlier, if you think a loader should be here but isn’t, drop us a line below and we’ll update the roundup accordingly.

As JavaScript usage has skyrocketed over the last few years, so has the sheer number of scripts that are being loaded in an average web page. With these script tags comes a lot of baggage, such as blocking and lack of dependency management.

Today, I’d like to bring your attention to a number of JavaScript loaders, which are mini toolkits that significantly simplify how you add and load scripts.


The Problem with Simple Script Tags

They Block the Page

The page stops ‘happening’ while the script is downloaded.

JavaScript files loaded using the script tag are blocking by nature. Everything that’s happening or loading on the page is halted while the script is downloaded and executed. And remember that this applies to each script tag. Some modern browsers may let you download these in parallel, but the rest of the page is still blocked from doing anything meaningful.

No Easy Way to Manage Dependencies

Lack of dependency management is a big drawback.

Next up comes the issue of handling dependencies. For your average web page, you probably don’t need one. Check if your library is loaded and move on. For a non-trivial web application though, this isn’t a great solution. You’ll need to load scripts conditionally based on dependencies. Even then, you’ll still have to figure out the order in which they’re loaded. You can probably do it manually for 3-4 files, but when things begin piling up, you’re probably better off with an automated solution.


Available Choices

The initial idea for this round up was sparked by a post over at Hacker News about making a list of JavaScript script loaders, roughly a month ago. I watched the list balloon up from 3 to a grand total of 10 before I lost interest and moved on.

Now that sufficient time has passed, I think that list is going to be quite massive. Unfortunately, my Google-fu is pretty weak and I can’t seem to find it. If an eagle eyed user manages to find this thread, post in the comments below so I can link to it and hopefully expand my list here as well.

This list is drawn from recommendations by high level web developers who use these tools in their applications.

And as to my choices here, this list represents a superset of recommendations which flowed in after I asked some of the front end community to pitch in with the solutions they’re using. Some of the solutions below may handle dependency managements too, though most stick to simple asynchronous loading. Regardless of the extra niceties, each of the scripts below do one thing with aplomb — load up JavaScripts with minimal fuss.

So without further ado, and in no particular order:


HeadJS

Head JS loads scripts in parallel no matter how many of them and what the browser is. Load scripts like images. Use HTML5 and CSS3 safely. Target CSS for different screens, paths, states and browsers. Make it the only script in your HEAD.

Author: Tero Piirainen

Project URL: Here

Size: 6.3 KB

Related links:


LabJS

LABjs (Loading And Blocking JavaScript) is an all-purpose, on-demand JavaScript loader, capable of loading any JavaScript resource, from any location, into any page, at any time. You can easily specify which scripts have execution order dependencies and LABjs will ensure proper execution order. This makes LABjs safe to use for virtually any JavaScript resource, whether you control/host it or not, and whether it is standalone or part of a larger dependency tree of resources.

Author: Kyle Simpson

Project URL: Here

Size: 4.7 KB

Related links:


RequireJS

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

Author: James Burke

Project URL: Here

Size: 13 KB

Related links:


ControlJS

ControlJS is a JavaScript module that handles both inline scripts and external scripts, delays script execution until after the page has rendered, allows for scripts to be downloaded, not executed and integrates with simple changes to HTML and no code changes

Author: Steve Souders

Project URL: Here

Size: 3.6 KB

Related links:


StealJS

The StealJS project is a collection of command and client based JavaScript utilities that make building, packaging, sharing and consuming JavaScript applications easy. Includes modules for dependency management, JS compression, cleaning and logging.

Author: Brian Moschel

Project URL: Here

Size: 11.4 KB

Related links:


yepnope

yepnope is an asynchronous conditional resource loader that’s super-fast, and allows you to load only the scripts that your users need. It works with both JavaScript and CSS and has a full test suite in QUnit that you can run in your set of supported browsers to make sure it works.

Author: Alex Sexton and Ralph Holzmann

Project URL: Here

Size: 3.4 KB

Related links:


PINF JS Loader

The loader allows for bootstrapping a consistent and state-of-the-art CommonJS environment for any supported platform (on server & in browser) and thus is ideally suited to be used as the target for the commonjs command and the development of cross-platform JavaScript applications and libraries.

Author: Christoph Dorn

Project URL: Here

Size: 22 KB

Related links:


JSLoad

JSLoad is a Javascript file loader that we wrote for Instructables. You give it a set of dependencies and groupings, and it loads the files you need, when your executing code needs them. The real usefulness of JSLoad comes with its ability to group dependencies using tags.

Author: Eric Nguyen

Project URL: Here

Size: 9.8 KB

Related links:


JsDefer

JsDefer features parallel/serial loading based on definitions, dependency, and wrapped versus unwrapped, and whether dependencies are defined in separate def file or in script itself and integration with Deferred (as in jQuery 1.5) enables or simplifies many use-case scenarios among many others.

Author: Boris Moore

Project URL: Here

Size: 4.7 KB

Related links:


JSL (JavaScript Loader)

JSL features on-demand loading, is browser cacheable, dynamic asynchronous JavaScript loading, lazy loading and duplicate source prevention among a ton of other features.

Author: Andres Vidal

Project URL: Here

Size: 2.1 KB

Related links:


YUI 3 Get

The Get Utility provides a mechanism for attaching script and css resources — including cross-domain resources — to the DOM after the page has loaded.

Author: Adam Moore

Project URL: Here

Size: 17.9 KB

Related links:


DominateJS

DominateJS allows you to asynchronously load all your JavaScript, and defer sequential execution until the page loads. DominateJS aims to be a cross-browser and 100% document.write-safe library! This is a heavily modified (and powerful!) evolution of ControlJS.

Author: Chris Joel & Jason Benterou

Project URL: Here

Size: 48 KB


Load.js

load.js is a micro JS lazy-loader. Built on top of chain.js, it allows you to lazy load your JS scripts sequentially or in parallel and handle complex dependency chains.

Author: Chris O’Hara

Project URL: Here

Size: 2 KB

Related links:


BravoJS

BravoJS is an implementation of a proposed draft for CommonJS Modules/2.0

Author: Wes Garland

Project URL: Here

Size: 10.7 KB


Bootstrap

Bootstrap is a small library for dynamically loading JavaScript files.
It’s primary use case is for using in your JS code to load JS files only when they are used.

Author: Scott Koon

Project URL: Here

Size: 1.3 KB


LazyLoad

LazyLoad is a tiny (only 904 bytes minified and gzipped), dependency-free JavaScript utility that makes it super easy to load external JavaScript and CSS files on demand.

Whenever possible, LazyLoad will automatically load resources in parallel while ensuring execution order when you specify an array of URLs to load. In browsers that don’t preserve the execution order of asynchronously-loaded scripts, LazyLoad will safely load the scripts sequentially.

Author: Ryan Grove

Project URL: Here

Size: 1.6 KB


curl.js

curl.js is a small, but very fast AMD-compliant asynchronous loader. Current size: 4.5KB (2.1KB gzipped) using Google’s Closure Compiler.

If you’d like to use curl.js for non-AMD modules (ordinary javascript files), you’ll want to use the version with the js! plugin built in. You may also want to build-in the domReady module. The combined curl+js+domReady loader is still only 6.1KB (2.7KB gzipped).

Author: John Hann

Project URL: Here

Size: 5 KB


$script.js

$script.js is an asynchronous JavaScript loader and dependency manager with an astonishingly impressive lightweight footprint. Like many other script loaders, $script.js allows you to load script resources on-demand from any URL and not block other resources from loading, like CSS and images.

Author: Dustin Diaz

Project URL: Here

Size: 1.4 KB


NBL.js

NBL.js is a tiny script that will make your HTML pages load faster by loading all your JavaScript files asynchronously (in parallel) with the rest of your page. Normally if you include two or three scripts in your page, the browser will wait for them to be executed before your page is shown.

Author: Berklee

Project URL: Here

Size: 971 B

Related links:


That’s a Wrap!

While each of the tools listed above handle script loading in slightly unique ways, be sure to perform your tests when deciding which is the right one for you.

As I mentioned earlier, if you think a loader should be here but isn’t, drop us a line below and we’ll update the roundup accordingly.

 
 

Brazilian Police to Wear Glasses That Can Scan Faces to Find Criminals [The Future]

14 Apr
In technology that is lifted straight from Robocop, Brazilian cops will be outfitted with glasses that can scan faces in a crowd and automatically pick out criminals. The glasses use advanced facial recognition technology that can scan 400 faces a second at 50 yards away. More »


 
 

‘World’s Biggest Pac-Man’ connects user-created mazes in your browser

14 Apr
Yesterday at the MIX11 conference, Microsoft revealed a project undertaken with Soap Creative and Namco Bandai: The World's Biggest Pac-Man, an HTML 5 version of the iconic arcade game with user-created levels. Every maze is connected, allowing players to use the "exits" on the side of a maze to enter another one -- even if it feels really wrong to leave a maze partially completed (so wrong). The rapidly expanding continent of Pac-Man mazes currently includes 1420 separate screens.

The app requires users to sign into Facebook before creating new mazes, but no login is required to explore the growing selection of levels. It should run on any browser (despite being released as promotion for Internet Explorer 9), but based on our experience iOS devices aren't compatible.

Joystiq'World's Biggest Pac-Man' connects user-created mazes in your browser originally appeared on Joystiq on Thu, 14 Apr 2011 09:30:00 EST. Please see our terms for use of feeds.

Permalink | Email this | Comments
 
 

It’s official – most people can’t taste the difference

14 Apr

In a blind taste test, volunteers were unable to distinguish between expensive and cheap wine

An expensive wine may well have a full body, a delicate nose and good legs, but the odds are your brain will never know.

A survey of hundreds of drinkers found that on average people could tell good wine from plonk no more often than if they had simply guessed.

In the blind taste test, 578 people commented on a variety of red and white wines ranging from a £3.49 bottle of Claret to a £29.99 bottle of champagne. The researchers categorised inexpensive wines as costing £5 and less, while expensive bottles were £10 and more.

The study found that people correctly distinguished between cheap and expensive white wines only 53% of the time, and only 47% of the time for red wines. The overall result suggests a 50:50 chance of identifying a wine as expensive or cheap based on taste alone – the same odds as flipping a coin.

Richard Wiseman, a psychologist at Hertfordshire University, conducted the survey at the Edinburgh International Science Festival.

"People just could not tell the difference between cheap and expensive wine," he said. "When you know the answer, you fool yourself into thinking you would be able to tell the difference, but most people simply can't."

All of the drinkers who took part in the survey were attending the science festival, but Wiseman claims the group was unlikely to be any worse at wine tasting than a cross-section of the general public.

"The real surprise is that the more expensive wines were double or three times the price of the cheaper ones. Normally when a product is that much more expensive, you would expect to be able to tell the difference," Wiseman said.

People scored best when deciding between two bottles of Pinot Grigio, with 59% correctly deciding which was which. The Claret, which cost either £3.49 or £15.99, fooled most people with only 39% correctly identifying which they had tasted.

In 2008, a study led by Adrian North, a psychologist at Heriot-Watt University in Edinburgh, claimed that music helped boost the flavour of certain wines. North, who was commissioned by a Chilean winemaker, reported that Cabernet Sauvignon was most affected by "powerful and heavy" music, while Chardonnay benefited from "zingy and refreshing" sounds.


guardian.co.uk © Guardian News & Media Limited 2011 | Use of this content is subject to our Terms & Conditions | More Feeds

 
 

Sugar consumption buckets

13 Apr

Sugar consumption

Lovely imagery showing sugar consumption for day through lifetime. The average American consumes 45.3 pounds of sugar in a year. It's a part of a read-later NYT article on the toxicity of sugar. Check out the similar pic for high fructose corn syrup. [via]

 
 

Wonderfully Creepy Sculptures Carved From Bananas

12 Apr

Banana sculpture by y_yamaden

Banana sculpture by y_yamaden

Banana sculpture by y_yamaden

Banana sculpture by y_yamaden

Maybe it’s their gooeyness or their unsettling curvature, but these sculptures carved from ripe bananas by Japanese artist y_yamaden are wonderfully creepy.

via Geekologie

photos by y_yamaden

 
 

Justice is served, but more so after lunch: how food-breaks sway the decisions of judges

11 Apr

There’s an old trope that says justice is “what the judge ate for breakfast”. It was coined by Jerome Frank, himself a judge, and it’s a powerful symbol of the legal realism movement. This school of thought holds that the law, being a human concoction, is subject to the same foibles, biases and imperfections that affect everything humans do. We’d love to believe that a judge’s rulings are solely based on rational decisions and written laws. In reality, they can be influenced by irrelevant things like their moods and, as Frank suggested, their breakfasts.

The graph above is almost the visual embodiment of Frank’s catchphrase. It’s the work of Shai Danziger from Ben Gurion University of the Negev, and summarises the results of 1,112 parole board hearings in Israeli prisons, over a ten month period. The vertical axis is the proportion of cases where the judges granted parole. The horizontal axis shows the order in which the cases were heard during the day. And the dotted lines, they represent the points where the judges went away for a morning snack and their lunch break.

The graph is dramatic. It ...

 
 

How to Design Browser Themes

11 Apr

Advertise here with BSA


How to Design a Browser Theme

The web browser is probably one of the most frequently used applications on a person’s computer. For designers and developers, a browser theme can be canvas that provides hours of exposure to the artist or brand willing to create a theme for their fan base.

But with such an extreme landscape orientation and a range of functional obstructions, designing browser themes is a creative endeavor with plenty of pitfalls and gotchas.

There are many things to consider when approaching a new theme — from avoiding copyrighted images to achieving designs that work within the confines of a particular browser.

This guide contains some crucial tips and general guidelines for designing custom browser themes for Chrome, Firefox and Internet Explorer.

How to Design a Browser ThemePhoenix Suns browser theme is well balanced with imagery.

Key Considerations for Browser Theme Design

The trickiest part of designing browser themes is the variability of the environment. Keeping designs flexible enough to display well in Firefox and Internet Explorer across Linux, Mac and PC, and across different versions of the browsers is essential. For example, Firefox 4 and IE show part of the background graphics in the title bar while Firefox 3.6 and below do not.

Dimensions and Dealing with Environmental Variability

Firefox offers the greatest design flexibility especially in the browser chrome, which is the area where the navigation button and URL address bar is located as well as the areas outside of the browser viewport.

How to Design a Browser ThemeFirefox 3.6 browser chrome in Windows OS.

IE 9 browser in Windows OS. Compare the differences with the one above.

When we design a cross-browser theme, Firefox is the baseline from which the other designs evolve.

Below, you’ll see the Indianapolis Colts browser theme shows the diminishing design real estate from Firefox to IE to Chrome.

Colts Firefox browser theme.

Colts IE browser theme.

Colts Chrome browser theme.

The vertical footprint of the design is kept to a minimum. While 200px tall graphics are required for Firefox, the reality is that only the top 85 pixels are usually visible.

For Internet Explorer, the vertical dimension is locked at 50 pixels; and for Chrome, even less.

Designs that rely on the user being able to see the full image may not work as the top or bottom chrome will not always be visible.

The horizontal size of the image has its special considerations as well. As a browser window is enlarged horizontally, the background images will shift. Designers must keep this in mind, as a browser opened at 500 pixels compared to a browser opened at 1024 pixels will have completely different looks from the background image perspective.

Dimension guidelines for browser themes in our company. The total width of the image is 3000 pixels.

Using images that span the full background or a single element that occupies an entire space is one method to solve the problem, but may also lead to an overly large file size (and thus, a slower-performing theme).

Using Repeating Backgrounds

A method to ensure a fully styled background and lower file sizes entails using screened elements, tiled textures or partial images.

These patterned backgrounds can provide a simple elegance, reduced file sizes, greater flexibility, and potentially a more successful design.

Choosing Image File Formats

Choosing the right file format for your browser theme design is a similar process to deciding what format to use in web designs.

If the images need transparency, use .gif or .png format.

If they’re not transparent, use .jpg as the file format.

Animation

Animated components of the design are also available for Firefox and IE. This can be a nice enhancement (for example, in adding twinkling lights to a Christmas tree browser theme), but can easily be overdone. Keep animation to a minimum as it can be distracting to the user.

Firefox allows for animated GIFs or PNGs. IE can only display animated GIFs.

Dealing with Required Browser UI Components

Designers must bear in mind that there are specific elements that need to be visible when creating any design.

For example, in Microsoft Windows, the controls are in the upper right of browser. Chrome, Firefox and IE all have visual differences in tab opacity depending on if a tab is in focus or in background.

The visibility of the design behind navigation controls, address bar, and search boxes also varies across browsers and operating systems.

Old Comic browser theme is a fun concept with lots of legibility issues.

Keep It Simple and Avoid Visual Fatigue

Remember: the browser is used for hours a day and the user will have to look at the browser theme design every time they fire up their web browser.

Keeping the design pleasing to the eye is a vital criterion to avoiding visual fatigue and a lost user.

Dealing with the "New Tab" User Experience

Oftentimes, when designing a browser theme, the browser chrome should be the focus because that’s what the user is exposed to for hours at a time.

The "new tab" experience — the event where the user opens a blank tab or opens another browser window — however, also creates theme opportunities within the browser.

In the case of Google Chrome, this is the area least encumbered by restrictions. Rather than a blank page waiting for the user’s next URL, the new tab image can bring a design element to this area. An image is used in Chrome, and HTML in Firefox.

File size is again a consideration to keep the tab loading fast. The browser tab, more and more, has become increasingly functional; it’s become a holding place for new features like search boxes, thumbnail images, and dynamic counts (such as how many unread emails you have in Gmail).

We advise you to put the strength of your design at the bottom so the chance of it being obstructed is limited.

Porsche Panamera browser theme shows off the "new tab" experience.

Things to Avoid in Browser Theme Design

Now that you’re familiar with some general design considerations for creating browser themes, let’s take a look at some things you should avoid.

Browser Theme Logos That Are Too Wide

Firefox allows insertion of a logo to the left of the navigation buttons. Your logo can actually shift the entire browser navigational UI to the right.

Users, however, have a strong preference for the browser’s back button to stay where it is — call it "muscle memory" — and it creates frustration if the browser theme moves it too far from its original position. Keep logo width to a minimum.

Designs That Rely on Pixel-Perfect Placement

Designs that rely on the exact placement of vertical elements must be eliminated from consideration because of cross-browser platform variations. For example, background graphical elements can shift upward in some instances and create a conflict between the design and the browser layout.

Brown University browser theme needed a refresh to fix the misalignment in Firefox 4 created by the horizontal line.

Getting Started with Browser Theme Design

The browser theme offers you a great place to engage your online audience. For companies, it extends their brand to an application that’s widely used.

For designers, browser themes are a challenging place to show off design skills and their creativity in overcoming restrictions imposed by the environment.

Are you interested in getting started building your own custom browser theme? It’s easy to get started. Here are some resources to get you up and running.

Related Content

About the Author

Patrick Murphy is the founder and CEO of BrandThunder(BT). With its extreme makeovers for Internet browsers, BT creates persistent engagement between major brands and their online consumers. BT’s new platform, BT:Engage currently in private beta, gives everyone the tools to build and share their own browser themes.

 
 

Showcase of Outstanding Responsive Web Designs

11 Apr

This showcase rounds up a collection of the most inspiring and outstanding examples of responsive web design. These websites not only look great at full scale monitor resolution, but are designed to gracefully scale according to the user’s screen size. Resize you browser, view the site on a smartphone, tablet or netbook and you’ll see the same design in a range of well presented formats.

What is responsive web design?

Screen resolutions

Websites are no longer viewed only on a computer monitor. Smartphones, tablets and netbooks throw a range of resolutions and different screen sizes into the mix for designers to now worry about. The idea of catering for various resolutions isn’t anything new. Back in the days of table based designs designers either chose the fluid or static route. Today’s responsive websites take a similar approach by using fluid widths in percentages and ems, but go a step further by using scalable images and adjustable layouts depending on the browser size.
To achieve this ‘scalability’, CSS media queries are used to apply different page styling according to certain parameters, such as min-width and orientation. The first step is to create a mobile version, but you could go on to customise your design for a range of resolutions.

Showcase of responsive web designs

Ready for some examples? Here’s a roundup of 50 of the most outstanding examples of responsive web designs. Each one is displayed with a preview of both the full size website and an example of a small resolution, but to get the full experience be sure to visit the live site and play around with it yourself.

Alsacréations

View the responsive website design

Sasquatch Festival

View the responsive website design

Earth Hour

View the responsive website design

Cognition

View the responsive website design

Tileables

View the responsive website design

Philip Meissner

View the responsive website design

Interim

View the responsive website design

Ribot

View the responsive website design

Visua Design

View the responsive website design

Laufbild Werkstatt

View the responsive website design

Sweet Hat Club

View the responsive website design

iamjamoy

View the responsive website design

Andrew Revitt

View the responsive website design

Stijlroyal

View the responsive website design

Sleepstreet

View the responsive website design

Pelican Fly

View the responsive website design

eend

View the responsive website design

Converge SE

View the responsive website design

iwantedrock

View the responsive website design

Joni Korpi

View the responsive website design

Jason Weaver

View the responsive website design

Cohenspire

View the responsive website design

Think Vitamin

View the responsive website design

CalebAcuity

View the responsive website design

3200 Tigres

View the responsive website design

Marco Barbosa

View the responsive website design

Jeremy Madrid

View the responsive website design

Lapse

View the responsive website design

Ryan Merrill

View the responsive website design

Media Queries

View the responsive website design

Electric Pulp

View the responsive website design

Tee Gallery

View the responsive website design

Stephen Caver

View the responsive website design

Happy Cog Hosting

View the responsive website design

Splendid

View the responsive website design

A Different Design

View the responsive website design

This is Texido

View the responsive website design

Edge of my Seat

View the responsive website design

Hardboiled Web Design

View the responsive website design

St Paul’s School

View the responsive website design

Robot… or Not?

View the responsive website design

Handcrafted Pixels

View the responsive website design

re:play

View the responsive website design

Sparkbox

View the responsive website design

SimpleBits

View the responsive website design

UX London

View the responsive website design

CSS-Tricks

View the responsive website design

 
 

30 Examples of Websites Using HTML5

10 Apr

Advertise here with BSA


HTML5 is certainly here to stay, from a numerous list of articles, events and buzz about this latest revision of the HTML standard. Some websites using HTML5 proudly show the official logo and state the sentence “support the future now”. So to support all this buzz and the technology we decided to gather a new list showcasing websites using HTML5.

NakshArt

html502

Mat Tomaszewski

html503

welcomebrand

html504

layer 51

html505

Stockholm Hairdresser

html506

Furnace

html507

Virtuti Design

html508

Lifefroots

html509

Float Left

html510

Daniel Scholten

html511

AX Visual Design Studio

html512

robedwards.org

html513

Festival Mundo

html514

The Squad

html515

S5 Style

html516

Bifter SVG Comic

html517

Fidiz

html518

Push

html519

re:play

html520

Blink Lab

html521

Joe Critchley

html522

Lexways

html523

ar-com.co.uk

html524

Kiran Owal

html501

Hallzzz

html525

Birrificio Irpino

html526

Empire State Recordings

html527

McKinney

html528

weluse

html529

Myke Preusss

html530

Source:

HTML5 Gallery
HTML5 Websites