Create responsive tables that will display a visual cue when viewed on small screen devices.

Free iPhone5 and iPad mini mockups, come and get em!

When you visit a website, a good design, quality yet easy reading, simplistic navigation with a minimum

I have been really busy at my new job recently and it has taken my full concentration, I have been delving deeper and deeper into JavaScript and want to share some of the learning resources I have been using. Feel free to add more resources in the comments.

If you are looking for a very decent workflow for developing responsive HTML5/CSS3 and optimizing as well, try out using Initializr to set up a sweet development starting point, then downloading and using HTML5 Boilerplate’s Build Script to optimize the files for better performance.

Awesome Apple device icon PSDs posted by http://favbulous.com, they have a lot of free PSDs resources check them out here.

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

YAML stands for: yet another multicolumn layout. A very complete foundation framework for building websites. It is responsive if you like.

A nice Javascript cheat sheet by Alex Staveley. Some key JS patterns. Nicley commented and explained.

This month’s freebie is an awesome icon pack called “Trough The Cracks” by Media Junkie. An extra thank you to Media Junkie aka MDA Design for providing us with our second exclusive freebie. Do you have a freebie you would like us to feature? contact us here.

Apple’s own industrial design style has become quite influential and I find my self still needing more and more Apple device Psd and vector graphics for design work. Luckly there are several designers who have created amazing mock ups that can be used for all ranges of digital, apple inspired projects. Here a few FREE for commercial use mockups.

Check out this awesome FREE UI elements (psd) from Themes Kingdom, a high quality, well designed glossy UI pack. Themes Kingdom are primarily a theme provider, but the have a pretty impressive freebies section. And hey you might even like their themes. You should really check them out.

Another great freebie, this one was featured on Orman Clark’s Premium Pixels website, he does premium WordPress themes and provides all sorts of amazing design resources on his site. Check him out at www.premiumpixels.com

It’s hard to go a day browsing the web without finding really amazing high quality FREE resources these days. http://designmoo.com is a community for discovering and sharing free PSDs, vectors, textures, patterns, fonts, and more. You will have to see it for yourself, tons of really juicy and crisp graphic elements, FREE. Here are a few previews, source link at the bottom, enjoy.

Subtle Patterns is website made by Atle Mo, there he provides a nice selection of really nice high quality tileable patterns that can be downloaded for free. PNG and even photoshop .PAT file formats are offered.

Impressivewebs is back with an updated CSS3 click chart, I posted about their previous version not too long ago. They said they would update the chart, and well, they just did. It is actually more than just an update, it has be revamped big time.

Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.

I recently upgraded my iPhone 3GS to a 4. I was, like many, planning on skipping the 4-series altogether and waiting for the iPhone 5 to come out before upgrading. My 3GS was still working good enough in all aspects, and I’m not trying to keep up with Apple’s product cycles. I was disappointed when the announcement was made that the new iPhone release was for the 4S.

We are happy to present a free photoshop file made exclusively for www.design4lifeblog.com by Media Junkie. Clean Menu v.1.0 is a menu navigation layout file, the psd file is setup in a way that makes it easy to quickly try out different colors and switch the active navigation item, there is also a help file for more details.

A really convenient and clever way to use placeholder images when creating for the web. I love this tool and shutter when I think of the time I have wasted creating placeholders by hand with photoshop.

HTML 5 Doctor released this flowchart that will help you make sense of HTML 5 elements, and how to determine what goes where. Simple and practical, I think I will use it as my desktop background until I know it inside and out.

jQuery Transit is an animation effects plugin, it supports a variety of transitions and covers several methods and techniques used with jQuery’s .animate( ).

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser. Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense. Scrap 1024!

YAMB – Yet Another Mobile Boilerplate is a tool for responsive web design. This framework boasts an impressive set of built in tools and features, a great starting point for prototyping new projects and stepping into responsive design.

The internet is full of amazing free graphics. Here are links to several free icon sets, and some screen shots of my favorites. It’s always good to have a nice collection of icons ready for future projects. Please check the respective author’s license and conditions if you want use any of them.

Textures and background graphics are one of the key ingredients of great design. I searched image sites selecting only the very best. I have added links to the sources at the bottom. Most of these are free to use if you credit the author by linking to them.

A web development resources and tools page maintained by http://elementiks.com. It contains several resources for web development and design. And the list content is updated regularly. Great place to dig up some new and useful tools.

Here is a great Infographic that will show you how query things on Google more precisely, with just a few meaningfully placed commands and operators you can effectively take control of your googleing journeys.

DOM Monster is a bookmarklet, created by Thomas Fuchs of http://mir.aculo.us/, for analyzing the DOM and other code on a web page. This is really awesome, it gives you helpful tips to improve your code while developing, it checks the HTML + JavaScript code and will output warnings and suggestions to improve your work.

A super fast, minimal, no-nonsense CSS reference tool, developers and designers will find this great resource very handy. It boasts a live updating search feature that makes it very efficient and fast to seek out and find the syntax, browser support and many other details you want to know about. Definitely worth bookmarking.

jQuery Mobile like it’s big brother JQuery, is simply awesome sauce. Designers and developers everywhere have been waiting for an official end release. Well the wait has finally ended with the stable release of V 1.0 Now nothing stands in the way of building awesome mobile apps and sites with this framework.

Validation is one of those subjects where the opinions of developers will differ, some will say that it is absolutely important that code being used on live sites validate and some will say that validators don’t work properly.

While experimenting with all the new tasty awesomeness that is CSS3, you will unavoidably have to deal with our (as sohtanaka puts it) , red headed step child IE 6, as well as its younger brothers.
Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

A really nice CSS3 showcase. Lea Verou has put together a really nice pattern gallery, with submissions from various creators and her own. Just click a pattern and the associated syntax appears like magic.

Password protect your web project in 4 steps

Here is a quick solution to make sure the web project you’re building won’t have any unwanted visitors before the official launch date. Password protect the whole directory and its sub directories with 2 text files. This method has been written about several times it is quick, easy, and it works.

An interactive, visual CSS3 properties overview-chart. Choose one of the CSS3 properties, then a description (ex: Creates a drop-shadow effect on a box.), browser support and W3C Info appears as well as the required syntax for you to copy and paste directly into an editor of your choice. A great way to quickly get to know some of CSS3′s coolest features.