So lately I’ve been falling deeply in love in with HTML5. Its power, versatility and simplicity is so attractive to web designers and web developers. One area of HTML5 that I absolutely love is LocalStorage. LocalStorage gives you the ability to easily create a DB for your site or app right in the browser. After reading article after article and tutorial and tutorial here’s a great collection of excellent articles from around the interwebs on the subject.

HTML5 Local Storage – kirupa.com

Because web pages do not persist data, various solutions have been proposed over the years ranging from cookies to 3rd party plug-ins to browser-specific implementations. With HTML5, you have something new – something that everyone hopes will stick! This “something new” is a solution affectionately known as Local Storage……

HTML5 Local Web Storage Database Tutorial And Example - aquim.com

Up until the introduction of HTML 5 web storage, the most common method for storing data locally on a user’s machine was to use cookies and sessions. While these methods are adequate for storing simple values anything other than trivial amounts becomes problematic. This is where HTML 5’s Web Storage comes in to play. Referred to as “Local Storage”, “DOM Storage” or a “Web SQL Database”, HTML 5 web storage allows a developer the freedom to store large amounts of data on the clients machine that persists past past sessions, doesn’t require unencrypted……

Create super-efficient SVG characters with localStorage - netmagazine.com

SVG is a great way to paint and animate high quality, scalable vector graphics on the web. It’s a form of XML and can be easily exported from vector packages, such as Illustrator, for use in your website. Once rendered it can be scaled to any size without losing quality and animated or manipulated like a collection of DOM objects……

Wrapping Things Nicely with HTML5 Local Storage – 24Ways.org

This is great, as it gets people excited and it gives the media something to show. There is much more to HTML5, though. Let’s take a look at one of the less sexy, but amazingly useful features of HTML5 (it was in the HTML5 specs, but grew at such an alarming rate that it warranted its own spec): storing information on the client-side……

HTML5 localStorage Part One – paperkilledrock.com

We all know how awesome the future of the web will be with HTML5. This new spec has some amazing potential and is already getting a lot of use. From the new tags like section, article, header and footer to the video debate taking center stage with Apple vs Adobe. There are so many great things about HTML5 but today I want to go over just one; localStorage……

HTML5 code example: Intelligently store Images in localStorage for faster page loads! – ibm.com/developerworks

Recently I was exploring lazy load techniques as a method to improve perceived page load times.   There are a number of methods to lazy load web artifacts, which enable a web developer to delay or load page elements on demand.  Typically these methods are used to control and prioritize the rendering of primary web page elements to the benefit of the overall user experience……

Maintaining the user journey with HTML 5 web storage – punkchip.com

The HTML 5 specification includes a web storage API for data storage in web clients. It means we can store large amounts of data, client-side, to read and write to as we like without causing the site to slow down (when compared to using cookies). …..

The Past, Present & Future of Local Storage for Web Applications – diveintohtml5.info

Persistent local storage is one of the areas where native client applications have held an advantage over web applications. For native applications, the operating system typically provides an abstraction layer for storing and retrieving application-specific data like preferences or runtime state. These values may be stored in the registry, INI files, XML files, or some other place according to platform convention. If your native client application needs local storage beyond key/value pairs, you can embed your own database, invent your own file format, or any number of other solutions……

Working with HTML5 localStorage() - http://html5tutorial.net

I want to focus on localStorage() this time. localStorage is a client-side key-value database, meaning it is stored in the users browser. This means the users data is saved on their machine inside their browser. This also means that their data is only available to them when on that machine and in that browser. Remember that localStorage is per browser not per computer……

Exploring HTML5′s localStorage – Persistent Client-Side Key-Value Pairs - bennadel.com/blog/

The other day, when building the Things I Give website and web app, I used HTML5′s localStorage object for the first time. Like cookies, the localStorage object provides a way to persist string-based, key-value pairs on the client. Unlike cookies, however, these values don’t have to be passed back to the server with every request. And, the localStorage has a much larger quota than cookies – about 5 megabytes on supporting browsers……

Trying to learn HTML5? Wanna embed your videos and audio using HTML5? Check out these great tutorials on how to use HTML5 to embed your videos. Each tutorial goes through the simple HTML5 code necessary and how to create fall backs for older browsers that don’t use HTML5. Happy embedding.

1 – Using HTML5 Video and Audio in Modern Browsers

http://www.sitepoint.com/using-html5-video-and-audio-in-modern-browsers/

2- How to Make Your Own Video Player On HTML5 Video

http://www.splashnology.com/article/how-to-make-your-own-video-player-on-html5-video/2654/

3 – HTML5 Audio and Video: What you Must Know

http://net.tutsplus.com/tutorials/html-css-techniques/html5-audio-and-video-what-you-must-know/

4 – Embed Audio and Video in HTML 5 Pages

http://www.webmonkey.com/2010/02/embed_audio_and_video_in_html_5_pages/

5 – HTML5 – Audio & Video

http://www.tutorialspoint.com/html5/html5_audio_video.htm

6 – Comprehensive video tutorial on HTML5

http://www.html5trends.com/tutorials/comprehensive-video-tutorial-on-html5/

7 – Degradable HTML5 audio and video Plugin

http://soukie.net/degradable-html5-audio-and-video-plugin/

8 – How to incorporate video with HTML5

http://answers.oreilly.com/topic/990-how-to-incorporate-video-with-html5/

9 -Tutorial: Serving HTML5 Video Cross Browser (including iPad)

http://www.robwalshonline.com/posts/tutorial-serving-html5-video-cross-browser-including-ipad/

My article last week featured in the mighty Codrops.com was all about design constraints and how they truly allow us to be more creative — they aren’t nearly as restrictive as we think.

Freedom in design is a great thing, it allows us to explore new ideas and to test uncharted waters. However, when you explore too much you tend to get lost. Constraints give you direction, they are essentially your compass through the design process. We put fences around cow pastures so that the cows don’t wander off onto a busy highway and get hit by a car.

I the article I really wanted to explore why design constraints push us to be more creative because they challenge us and knock us out of our comfort zones. Also, I wrote about how its important to challenge ourselves every once in why by imposing restrictions or challenges on ourselves.

To read the full article, navigate over to codrops.com

I thought since today is Halloween that it would only be fitting to put together a collection of web designs with black, orange or black & orange color schemes for your Halloween inspiration. Black is a fairly common color for the web, mainly because it’s pretty universal and presents well on display. But orange can be a difficult color to work with on the web, at least in large quantities. Here are some great examples of both for your trick or treating enjoyment.

If you have any inspirational web treats to share, please drop us a comment below, we’d love to see your designs.

http://www.thisisdare.com/na/

—————

http://www.changenation.org/

—————

http://www.danieldiggle.com/

—————

http://grazsecrets.at/

—————

http://www.girleffect.org/question

—————

http://www.vonvon.de/

—————

http://www.bobvvs.se/

—————

http://bigbitecreative.com/

—————

http://www.stiffrowlands.com/

—————

http://jessicahische.is/awesome/

—————

http://www.zeldman.com/

—————

http://p.erkins.com/

—————

http://designers.mx/

—————

http://www.krillbite.com/ats/

—————

http://www.kccreepfest.com/

I love street art. It can be very inspirational for both design projects and life in general. Here is a collection of some of my favorite creative street art installations and works from New York to Madrid to Tehran. Enjoy.

So you designed a slick WordPress theme for a client, you set up WordPress for them and installed all the plugins and you have even gone the extra mile and designed a sweet video player and built a new custom content type for them. Then, about a month later you get a call that says the video posts aren’t showing up in their RSS feed – what is a designer to do?

Add your custom post type to you feed silly. Its really pretty easy, just add another little function to your functions.php file, way easier than building the custom post type in the first place. Here is the code, good luck ya’ll.

function myfeed_request($qv) {
    if (isset($qv['feed']) && !isset($qv['post_type']))
        $qv['post_type'] = array('post', 'videos');
    return $qv;
}
add_filter('request', 'myfeed_request');

source for snippet: wp-snippets.com

To kick off the NFL season I decided I would take a peak at all 32 of the teams websites and see which sites are well designed and which sites are just plain awful. In the sporting tradition I have “power” ranked them from 32 to 1 – 1 being the best of the best. Now, just so we are all the same page here, all the websites are truly the same templates (they are created by the NFL) so this means that there will not be a wide variety of design concepts here, mostly just differing graphics and slightly different user patterns. Also, there are some really bad websites here and the the best of the best really isn’t that great when compared to what the rest of the web has to offer. Don’t be to surprised if the best site really isn’t that great… its only great compared to the other 31 pieces of garbage I am comparing it to.

Oh and This list has nothing to do with the actual NFL product and what teams are successful, or even what teams I root for. Full disclosure: I am a huge Pittsburgh Steelers fan and I have always thought their site sucked, and even though they made my top ten, it’s purely based on web site design and not my allegiance to the team – to back this up; I hate the Bengals, the Broncos and the Chiefs, so take note of their positions.

Shall we get started?

#32 Baltimore Ravens

#31 Dallas Cowboys

#30 Jacksonville Jaguars

#29 Tampa Bay Buccaneers

#28 Detroit Lions

#27 Buffalo Bills

#26 San Diego Chargers

#25 Seattle Seahawks

#24 Washington Redskins

#23 San Fransisco 49ers

#22 Oakland Raiders

#21 Green Bay Packers

#20 Philadelphia Eagles

#19 Cleveland Browns

#18 Carolina Panthers

#17 Houston Texans

#16 New England Patriots

#15 Indianapolis Colts

#14 Minnesota Vikings

#13 New York Jets

#12 New York Giants

#11 St. Louis Rams

#10 Arizona Cardinals

#9 Tennessee Titans

#8 Pittsburgh Steelers

#7 Kansas City Chiefs

#6 New Orleans Saints

#5 Chicago Bears

#4 Atlanta Falcons

#3 Miami Dolphins

#2 Denver Broncos

#1 Cincinnati Bengals

Need some design inspiration? Need a good chuckle? Check out this weeks Kick Ass Site of the Week, VisualNews.com. Visual News.com is great site for all things design, so its a great blog for finding inspiration in all areas of design, from web to print. If you are into inforgraphics, Visual News is for you. If you are into witty design inside jokes then Visual News is for you. If you need some good deign tips, tricks and tutorials then Visual News is for you.

Go check out VisualNews.com and get inspired. Enjoy!

There’s nothing more off-putting than visiting a website only to find a page missing and in it’s place a useless piece of text telling you what you already know! For this reason it’s always good practice to ensure your site has a properly structured 404 page, including information on how the user can get to where they want to be.

Some designers however, like to be a little more creative with their 404 pages; this collection shows exactly what can be done when you have some spare time – turning one of the least exciting of website features into a masterpiece!

That concludes our collection of creative 404 pages. If you enjoyed this article please consider sharing it!

This is a cool snippet to add image reflections using CSS, it only works in Webkit so far, but should be coming to Firefox soon. Its really just using the new box-reflect CSS property to create the CSS reflection:

-webkit-box-reflect: direction offset mask-box-image;

The first parameter (direction) defines the direction of the CSS reflection, values include; below, above, left and right. The second parameter (offset) defines the distance or offset of the CSS reflection from the the image or element just in case you need a little space between your reflection and the image. The parameter (mask-box-image) is used to set the mask of the CSS reflection, basically to set the gradient so that your reflection fades out, in the example below we are using the -webkit-gradient property to define this. Also, if you you don’t set this parameter then no mask will be set.

img {
-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));
}

Example (only in Safari and Chrome):

Thanks to Nettuts for this great snippet.