Posts Tagged ‘framework’

50 Free Tools and Apps for Web Designers and Developers

Over the past year or so I have bookmarked hundreds of various tools and resources covering all aspects of web & mobile development – There are tools that will improve your work-flow, resources that will clean and validate code, apps that will allow you to collaborate with any number of colleagues, bookmarklets that let you create mockups within your browser, productivity checklists, sites that will track and keep a watchful eye on your sites… and on … and on.

So, having all of these amazing bookmarks, I thought I would share my 50 favorites with you.

I have split the article into the following sub-categories for easier browsing: General Web Development Tools, Web Typography Apps, Browser Tools, Web Site Analysis Apps and, finally, Productivity Apps & Tools.
The apps also don’t include frameworks, Javascript plugins nor template tools, they are all strictly small tools that can help with your development productivity.

Compiling an article about my favorite free web development apps from the past year or so, as you can imagine, was not an easy task, and the chances are that I may have missed a few, so why don’t you tell us about your favorite free development apps within the comment section below. You never know we might collate enough for a part 2 of this post!

ProCSSor – Advanced CSS Prettifier

ProCSSor - Advanced CSS Prettifier
ProCSSor is a useful tool that will 'prettify' and format CSS files on the fly.
ProCSSor – Advanced CSS Prettifier →

ScriptSrc.net

ScriptSrc.net
Tired of hunting down the script tag for the latest version of your Javascript Library of choice? ScriptSrc allows you to copy the latest library (jQuery, MooTools, YUI…) script tags.
ScriptSrc.net →

HTMLform.com

HTMLform.com
With HTMLform.com all you have to do is design your HTML form and you will get a Zip file that can be very easy installed in your website, with everything needed to make it work: a form that can be embedded in any webpage, a small but very potent database to suit your needs, a tool for checking data online and a button for exporting to CSV and Excel formats.
HTMLform.com →

Spritebox

Spritebox
Spritebox is a WYSIWYG tool to quickly and easily create CSS classes and IDs from a single sprite image.
Spritebox →

HTML Purifier

HTML Purifier
HTML Purifier is a standards-compliant HTML filter library written in PHP. It will not only remove all malicious code (better known as XSS) with a thoroughly audited, secure yet permissive whitelist, it will also make sure your documents are standards compliant.
HTML Purifier →

Tiny Fluid Grid

Tiny Fluid Grid
Tiny Fluid Grid is a super-simple CSS grid framework generator, inspired by the 1kb Grid, that ships with an index.html with demo code, and the grid.css containing the CSS for the grid you created.
Tiny Fluid Grid →

TABLEIZER!

TABLEIZER!
TABLEIZER! is a quick tool for creating HTML tables from spreadsheet data.
TABLEIZER! →

Try Ruby! (in your browser)

Try Ruby! (in your browser)
If you haven't as yet tried Ruby, with Try Ruby! you can take the quick and painless Ruby tutorial and then test your knowledge directly in your browser.
Try Ruby! (in your browser) →

Plupload

Plupload
Plupload allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and batch uploads.
Plupload →

Favigen: Favicon Generator

Favigen: Favicon Generator
Favigen: Favicon Generator →

Super Conversion Button

Super Conversion Button
A call-to-action is one of the most important parts of any web page, displaying the primary action you want people to take. With this simple tool you can create a beautiful, effective call-to-action button in seconds
Super Conversion Button →

Subfolio

Subfolio
Subfolio is made for creative types to share their work online with speed and elegance – publicly or privately. It’s good for freelancers, studios, agencies, enterprise or even the classroom.
Subfolio →

jsFiddle

jsFiddle
JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog, etc.
jsFiddle →

A/B Split Testing Calculator

A/B Split Testing Calculator
A/B Split Testing Calculator →

Frame Box – Lightweight online tool for creating mockups

Frame Box - Lightweight online tool for creating mockups
Frame Box does not have an extensive list of features (like the web based apps above). You can drag and drop, re-size and copy/paste the UI units, but its main focus, and why we like it so much, is that it allows you to create your mockup/prototype very, very quickly
Frame Box – Lightweight online tool for creating mockups →

App Inventor for Android

App Inventor for Android
To use the Android App Inventor, you do not need to be a professional developer, instead of writing code, you visually design the way the app looks and use blocks to specify the app's behavior.
App Inventor for Android →

HTML-Ipsum

HTML-Ipsum
HTML Ipsum is a great tool that gives you lorem ipsum snippets with HTML markup to help test your CSS.
HTML-Ipsum →

CSS3 Button Maker

CSS3 Button Maker
CSS3 Button Maker →

CSS3 Click Chart by Impressive Webs

CSS3 Click Chart by Impressive Webs
Each examples on the CSS3 Click Chart visually displays the CSS3 feature, with a clickable heading that opens a box at the bottom of the page for information on that particular feature.
CSS3 Click Chart by Impressive Webs →

CSS3 Generator

CSS3 Generator
CSS3 Generator is a useful tool that generates the CSS3 properties for the likes of @fontface, border-radius, multi-column
CSS3 Generator →

CSS3 Menu

CSS3 Menu
You can build a cool rounded navigation menu, with no images and no Javascript, and effectively make use of the new CSS3 properties border-radius and animation. This menu works perfectly well with Firefox, Opera, Chrome and Safari. The drop-down also works on non-CSS3 compatible browsers such as IE7+, but the rounded corners and shadow will not be rendered.
CSS3 Menu →

0to255

0to255
0to255 is a simple tool that helps web designers find lighter and darker colors based on any color.
0to255 →

Wordmark

Wordmark
Wordmark is a tool that allows you to preview any word with the fonts already installed on your computer.
Wordmark →

Awesome Fontstacks

Awesome Fontstacks
With Awesome Fontstacks you can create bundles of matching, free web fonts, with fail-safe font stacks to back them up.
Awesome Fontstacks →

Google Font Directory

Google Font Directory
With the Google Font Directory you can browse all available fonts, learn about the font designers who created them, and then copy the code required to use them directly on your web page.
Google Font Directory →

Fillerati – Faux Latin is a Dead Language

Fillerati - Faux Latin is a Dead Language
If you are tired of using Lorem Ipsum, then Fillerati is for you. You can choose text from the authors Jules Verne, H.G. Wells, Lewis Carroll, L. Frank Baum, Edgar Rice Burroughs or Lewis Carroll.
Fillerati – Faux Latin is a Dead Language →

Wirify: The Web as Wireframes

Wirify: The Web as Wireframes
Wirify is a simple bookmarklet that will turn any web page into a wireframe mockup with only one click.
Wirify: The Web as Wireframes →

maki

maki
Just drag the maki bookmarklet to your toolbar, go to a page where you're working on the HTML/CSS, and click the bookmark. You'll then be directed to a version of your site where you can upload the mock-up image, adjust the transparency of the overlay, and reload your changes seamlessly.
maki →

Browize – Online Browser Resizer

Browize - Online Browser Resizer
Browize – Online Browser Resizer →

The HTML5 Test

The HTML5 Test
The HTML5 test – how well does your browser support HTML5? This tool will let you know.
The HTML5 Test →

Support Details

Support Details
Support Details →

resizeMyBrowser

resizeMyBrowser
resizeMyBrowser →

iPad Peek

iPad Peek
iPad Peek is a handy app that allows you to view how any website will be rendered on the iPad.
iPad Peek →

Moniitor BETA

Moniitor BETA
Moniitor is a FREE website stat monitoring tool, it will allow you to monitor multiple sites and check for stats such as Pagerank, Alexa Rank, Feedburner Subscribers, Twitter mentions and more…
Moniitor BETA →

Uptime Robot

Uptime Robot
Uptime Robot monitors your websites by pinging your site every 5 minutes and alerts you if your sites are down.
Uptime Robot →

WooRank

WooRank
WooRank →

Clue

Clue
Clue is a tiny app, from ZURB, that allows you to test your web pages so that you can find out exactly what parts are memorable and will potentially stick in the minds of your users.
Clue →

Wridea.com

Wridea.com
Wridea is a free tool that stores your ideas, allows you to manage and organize them, collaborate with your friends and colleagues over your ideas, etc. It provides you with all necessary tools and services for organizing your ideas.
Wridea.com →

Domainr

Domainr
When you want a short URL or something big, Domainr will find it, fast and helps you explore the entire domain name space beyond the ubiquitous—and crowded—.com, .net and .org. Inspired by jish.nu, burri.to and del.icio.us.
Domainr →

Thoughtboxes

Thoughtboxes
Thoughtboxes is a simple tool that helps to organize your thoughts so you can make things happen.
Thoughtboxes →

Create Free Privacy Policy

Create Free Privacy Policy
With GeneratePrivacyPolicy.com you can create professional privacy policies agreements tailored specifically to your website or your business.
Create Free Privacy Policy →

Recurse

Recurse
Recurse is a simple solution to show clients your spiffy new design. By emulating a website with multiple flat images clients will have a better idea of what the composition will look like ‘in the wild’.
Recurse →

Launchlist

Launchlist
Launchlist is cool tool to help and encourage web designers and developers to check their work before exposing it to the world at large by going through an essential list of web development requirements. When you click 'Submit Report' you will be either given a 'Go For Launch' or, if issues found, 'Not Advisable'.
Launchlist →

TitanPad

TitanPad
TitanPad is the simplest of tools that allows you to collaborate on a document simultaneously. You can either create a 'public' pad or you can create a 'private' pad for your team with a custom URL.
TitanPad →

CeeVee

CeeVee
Not only specific for developers, CeeVee allows you to create a themed professional resume, giving you the option to make it either public or private.
CeeVee →

Billable

Billable
If you don't likes the tedious task of invoicing, then you will love Billable. It really doesn't get any simpler than this.
Billable →

Bounce

Bounce
Bounce is a tiny app that allows anyone to give feedback on the design of any given webpage.
Bounce →

TinEye Reverse Image Search

TinEye Reverse Image Search
TinEye is a reverse image search engine. It finds out where an image came from, how it is being used, if modified versions of the image exist, or if there is a higher resolution version.
TinEye Reverse Image Search →

CopyPasteCharacter.com

CopyPasteCharacter.com
CopyPasteCharacter is a very useful tool for copying & pasting those impossible to remember HTML entities.
CopyPasteCharacter.com →

NounProject

NounProject
The Noun Project collects, organizes and adds to the highly recognizable symbols that form the world's visual language. The symbols can be downloaded completely free.
NounProject →

You might also like…

A Review of Web Design Trends from 2010 →
The Trend of Minimalist Graphic Design →
How To Control Flow Within Your Web Designs →
Accessibility Principles for the Modern Designer →
Professional Structure and Documentation in Web Design →
Clear Your Mind to Focus on What Matters →
What the Future of Cloud Computing means for Web Designers →
Beginners Guide to Using the Power of Color in Web Design →
Understanding and the Meaning of Color Within Design →


Weekly Design News – Resources, Tutorials and Freebies (N.69)

This is our weekly column were we share our favorites design related articles, resources and resources all from the previous week.

If you would like to be kept up to date with loads of fresh design news and resources, you can follow us on Twitter, on Facebook or even by subscribing to our RSS feed.

Working as an In House Web Designer

Working as an In House Web Designer
Working as an In House Web Designer →

Responsive Web Design: What It Is and How To Use It

Responsive Web Design: What It Is and How To Use It
Responsive Web Design: What It Is and How To Use It →

The Dark Side Of Usability

The Dark Side Of Usability
The Dark Side Of Usability →

Should I work for Free? (Infographic)

Should I work for Free? (Infographic)
Should I work for Free? (Infographic) →

Are We Too Obsessed With Facebook? (Infographic)

Are We Too Obsessed With Facebook? (Infographic)
Are We Too Obsessed With Facebook? (Infographic) →

DHTMLX Touch – HTML5 JavaScript Framework for Mobile and Touch Devices

DHTMLX Touch - HTML5 JavaScript Framework for Mobile and Touch Devices
DHTMLX Touch – HTML5 JavaScript Framework for Mobile and Touch Devices →

Flurid – The Fluid CSS Grid

Flurid - The Fluid CSS Grid
Flurid – The Fluid CSS Grid →

We Love Buttons (Inspiration & Showcase)

We Love Buttons (Inspiration & Showcase)
We Love Buttons (Inspiration & Showcase) →

CSS Only Lightbox/Shadowbox Media Viewer Using CSS Transitions (Tutorial)

CSS Only Lightbox/Shadowbox Media Viewer Using CSS Transitions (Tutorial)
CSS Only Lightbox/Shadowbox Media Viewer Using CSS Transitions (Tutorial) →

Spin those Icons with CSS3 (Tutorial)

Spin those Icons with CSS3 (Tutorial)
Spin those Icons with CSS3 (Tutorial) →

Build a Kickbutt CSS-Only 3D Slideshow (Tutorial)

Build a Kickbutt CSS-Only 3D Slideshow (Tutorial)
Build a Kickbutt CSS-Only 3D Slideshow (Tutorial) →

Building iPhone Android Apps with jQuery Mobile and PhoneGap Slides

Building iPhone Android Apps with jQuery Mobile and PhoneGap Slides
Building iPhone Android Apps →

iconSweets 2 – Free Icons

iconSweets 2 - Free Icons
iconSweets 2 →

Open Source Multitouch Gesture Library and Illustrations

Open Source Multitouch Gesture Library and Illustrations
Open Source Multitouch Gesture Library and Illustrations →

Form Element Styling (PSD)

Form Element Styling (PSD)
Form Element Styling (PSD) →

Omnigraffle iPhone Stencil

Omnigraffle iPhone Stencil
Omnigraffle iPhone Stencil) →

Omnigraffle iPad Stencil

Omnigraffle iPad Stencil
Omnigraffle iPad Stencil) →

Five Minutes (Free Font)

Five Minutes (Free Font)
Five Minutes (Free Font) →

Flow Motion (Free Font)

Flow Motion (Free Font)
Flow Motion (Free Font) →

Vector Currency Pack

Vector Currency Pack
Vector Currency Pack →

Mobile Device .PSDs 2010

Mobile Device .PSDs 2010
Mobile Device .PSDs 2010 →

HR Grunge Splat Brush Pack 1

HR Grunge Splat Brush Pack 1
HR Grunge Splat Brush Pack 1 →

20 Repeatable Pixel Patterns

20 Repeatable Pixel Patterns
20 Repeatable Pixel Patterns →

Previous Weekly Design News…

Design News Roundup Archives →


Mobile Cheatsheets for iPhone, Android and Blackberry App Development

In this post we have rounded up a selection of useful cheatsheets, references, quick recipes and code snippet resources specifically for Android, Blackberry and iPhone app development. No developer should work without these.

Android Classes (PDF)

Android Classes
Download Android Classes (PDF) →

Fastboot Cheat Sheet (HTML)

Fastboot Cheat Sheet
View Fastboot Cheat Sheet (HTML) →

Android Recipes and Snippets (HTML)

Android Recipes and Snippets
View Android Recipes and Snippets (HTML) →

Common Tasks and How to Do Them in Android (HTML)

Common Tasks and How to Do Them in Android
View Common Tasks and How to Do Them in Android (HTML) →

The Android Developer's Guide (HTML)

The Android Developer's Guide
View The Android Developer's Guide (HTML) →

Android Package Index (HTML)

Android Package Index
View the Android Package Index (HTML) →

BlackBerry Browser CSS Reference (PDF)

BlackBerry Browser CSS Reference
Download the BlackBerry Browser CSS Reference (PDF) →

BlackBerry Java SDK Quick Reference Guide (PDF)

BlackBerry Java SDK Quick Reference Guide
Download the BlackBerry Java SDK Quick Reference Guide (PDF) →

BlackBerry JDE 6.0.0 API Reference (HTML)

BlackBerry JDE 6.0.0 API Reference
View the BlackBerry JDE 6.0.0 API Reference (HTML) →

Xcode Shortcuts (PDF)

Xcode Shortcuts
Download the Xcode Shortcuts (PDF) →

Xcode Macros Cheatsheet (PDF)

Xcode Macros Cheatsheet
Download the Xcode Macros Cheatsheet (PDF) →

XCode Tips & Tricks (HTML)

XCode Tips & TricksHere you will find a multitude of useful Xcode tips and snippets.
View the Xcode Tips & Tricks (HTML) →

Xcode Keyboard Shortcut List (PNG)

Xcode Keyboard Shortcut List
Download the Xcode Keyboard Shortcut List (PNG) →

iPhone SDK Objective-C Cheat Sheet (PDF)

iPhone SDK Objective-C Cheat Sheet
Download the iPhone SDK Objective-C Cheat Sheet (PDF) →

jQuery idocs – API documentation for jQuery built specifically for the iPhone & iPod touch

jQuery idocs - API documentation for jQuery built specifically for the iPhone & iPod touch
View the jQuery idocs – API documentation for jQuery →

Cocoa iOS 3.0 Cheatsheet (PDF)

Cocoa iOS 3.0 Cheatsheet
Download the Cocoa iOS 3.0 Cheatsheet (PDF) →

iPhone Distribution Build Cheatsheet (PDF)

iPhone Distribution Build Cheatsheet
Download the iPhone Distribution Build Cheatsheet (PDF) →

iPhone Application Development For Dummies Cheat Sheet (HTML)

iPhone Application Development For Dummies Cheat Sheet
View the iPhone Application Development For Dummies Cheat Sheet (HTML) →

Hardboiled CSS3 Media Queries (HTML)

Hardboiled CSS3 Media Queries
Download the Hardboiled CSS3 Media Queries (HTML) →

CSS3 Cheat Sheet (PDF)

CSS3 Cheat Sheet
Download the CSS3 Cheat Sheet (PDF) →

Icon Reference from Hicksdesign

Icon Reference from Hicksdesign
View the Icon Reference from Hicksdesign →

W3C Mobile Web Best Practices (MWBP) Flipcards (PDF)

W3C Mobile Web Best Practices (MWBP) Flipcards
Download the W3C Mobile Web Best Practices Flipcards (PDF) →

Touch Gesture Reference Guide (PDF)

Touch Gesture Reference Guide
Download the Touch Gesture Reference Guide (PDF) →

You might also like…

Useful Collection of Cheat-Sheet Desktop Wallpaper for Web Designers →
20 jQuery Cheatsheets, Docs and References for Every Occasion →
14 Essential WordPress Development and Design Cheat Sheets →
17 Productive Photoshop Cheatsheets and Reference Cards to Download for Free →
The Best Cheat Sheets for Web Designers and Developers (From CSS, Ajax, Perl, Vbscript…) →
CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes →
The Blueprint CSS Framework – Tutorials, How-to Guides and Tools →


45 Free eBooks for Developers and Designers

Over the past year or so we have published several articles featuring a selection of the best free ebooks for web designers, with each post proving very popular and highly resourceful. Sadly, since then some of the fantastic ebooks we previously featured are no longer available or are no longer been offered as a freebie. But looking on the positive side many new web design ebooks have been released and, as you will see within this post, there are also a few ebooks, recommended by our readers, which we missed in those previous articles.

Just as we did with the previous posts we have not offered a critique of each book only a description of the content, as we feel that if someone spends so much valuable time writing an entire specialized book and then offer it for free, in our eyes they deserve only praise and appreciation.

All of the 45 books in this post are completely FREE and can be either downloaded in digital format (PDF) or viewed as a web page (HTML).

Introduction to Good Usability by Peter Pixel

Introduction to Good Usability by Peter PixelThis guide is especially handy if you haven’t done a lot of webdesign yet or if you are involved in webdesign but don’t do any of the real work. I hope to shed some light on some common interface elements and mistakes people often make with them.
A lot of books have been written in the past but the threshold for reading them, especially if you have never built a site, is quite big, hence this short guide. This is by no means a complete guide or solid set of rules, but it is definitely a good start.
Introduction to Good Usability →PDF →

Web Accessibility Checklist by Aaron Cannon

Web Accessibility Checklist by Aaron CannonWritten by Aaron Cannon, blind web developer and accessibility consultant.Aaron explains in his article “The Accessibility Checklist I Vowed I’d Never Write”, that the problems with a “simple checklist that, when followed, will give you an accessible site without fail.” No such checklist exists or likely ever will. He believes that this list is not the perfect solution, nor is it the only solution, but believes it is a good first step, and it gives our developers and designers a place to start from.
Web Accessibility Checklist →PDF →

CSS Systems For Writing Maintainable CSS by Natalie Downe

CSS Systems For Writing Maintainable CSS by Natalie DowneA CSS System is a reusable set of content-oriented markup patterns and associated CSS created to express a site's individual design. It is the end result of a process that emphasizes up-front planning, loose coupling between CSS and markup, pre-empting browser bugs and overall robustness. It also incorporates a shared vocabulary for developers to communicate the intent of the code.
This ebook elaborates on this concept, and also describes a number of tricks used to preempt maintainability issues.
CSS Systems For Writing Maintainable CSS →PDF →

Better CSS Font Stacks by Nathan Ford

Better CSS Font Stacks by Nathan FordBetter CSS Font Stacks →PDF →

Faster, and More Secure Webfonts by Bram Pitoyo

Faster, and More Secure Webfonts by Bram PitoyoFont embedding for the web is a great step in making the web look better and become more functional, but what about security and load times?
Bram Pitoyo’s ebook takes the top layer off font embedding and shows us how things work, and ultimately how to improve performance and make it more secure.
Faster, and More Secure Webfonts →PDF →

Designing for the Web by Mark Boulton

Designing for the Web
A Practical Guide to Designing for the Web aims to teach you techniques for designing your website using the principles of graphic design.
Featuring five sections, each covering a core aspect of graphic design: Getting Started, Research, Typography, Colour, and Layout. Learn solid graphic design theory that you can simply apply to your designs, making the difference from a good design to a great one.
Designing for the Web →HTML Version →

Building iPhone Apps with HTML, CSS, and JavaScript by Jonathan Stark

Building iPhone Apps with HTML, CSS, and JavaScript
If you know HTML, CSS, and JavaScript, you already have what you need to develop your own iPhone apps. With this book, you’ll learn how to use these open source web technologies to design and build apps for both the iPhone and iPod Touch.
Building iPhone Apps with HTML, CSS, and JavaScript →

UX Storytellers – Connecting the Dots

UX Storytellers - Connecting the Dots
UX Storytellers – Connecting the Dots →Google Docs →Scribd →

Essential JavaScript And jQuery Design Patterns by Addy Osmani

Essential JavaScript And jQuery Design Patterns
Design patterns are reusable solutions to commonly occurring problems in software development and are a very useful tool to have at your disposal. Addy Osmani wrote this mini-book because he felt that patterns were an area a lot of new and intermediate JavaScript developers may not have had a chance to explore just yet and I’m hopeful my book will encourage you to check them out as they can be quite powerful.
Essential JavaScript And jQuery Design Patterns →

20 Things I learned about Browsers and the Web

20 Things I learned about Browsers and the Web
Essential JavaScript And jQuery Design Patterns →

Taking Your Talent to the Web by Jeffrey Zeldman

Taking Your Talent to the Web
This book was originally written in 2001 for print designers whose clients want websites, print art directors who’d like to move into full–time web and interaction design, homepage creators who are ready to turn pro, and professionals who seek to deepen their web skills and understanding.
The dot-com crash killed this book. Now it lives again. While browser references and modem speeds may reek of 2001, much of the advice about transitioning to the web still holds true.
Taking Your Talent to the Web →PDF →

Dive Into HTML 5 by Mark Pilgrim

Dive Into HTML 5
Dive Into HTML 5 is an ongoing book that seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards. The final manuscript will be eventually published on paper by O’Reilly, under the Google Press imprint.
Dive Into HTML 5 →HTML Version →

jQuery Fundamentals

jQuery Fundamentals
The purpose of this book is to provide an overview of the jQuery JavaScript library; when you're done with the book, you should be able to complete basic tasks using jQuery, and have a solid basis from which to continue your learning. This book was designed as material to be used in a classroom setting, but you may find it useful for individual study.
jQuery Fundamentals →HTML Version →

Data Structures and Algorithms

Data Structures and Algorithms
Put simply this book is the result of a series of emails sent back and forth between the two authors during the development of a library for the .NET framework of the same name. The conversation started of something like "Why don't we create a more aesthetically pleasing way to present our pseudocode?" After a few weeks this new presentation style had in fact grown into pseudocode listings with chunks of text describing how the data structure or algorithm in question works and various other things about it. At this point we thought, "What the
heck, let's make this thing into a book!"
Data Structures and Algorithms →PDF →

Design Your Imagination

Design Your Imagination
Design Your Imagination is a one stop resource for the beginners and learners of website design. Though this e-book is mainly targeted for the beginners of website design, it might prove helpful for the experienced web designers as well. This free web design e-book is clearly divided into 28 chapters and in each chapter a specific topic is illustrated with ample examples. The language is as lucid as possible and proper care has been taken to keep intact the flow of writing.
Design Your Imagination →PDF →

Building Android Apps with HTML, CSS, and JavaScript

Building Android Apps with HTML, CSS, and JavaScript
Device-agnostic mobile apps are the wave of the future, and this book shows you how to create one product that can be used on several mobile operating systems. You'll find guidelines for using the free PhoneGap framework to converty our product into a native Android app. And you'll learn why releasing your product as a web app first helps you find, fix, and test bugs much faster than if you went straight to the Android Market with a product built with the official Android SDK.
Building Android Apps with HTML, CSS, and JavaScript →HTML Version →

The Web Book

The Web Book
The Web Book contains all the information you need to create a Web site from scratch. It covers everything from registering a domain name and renting some hosting space, to creating your first HTML page, to building full online database applications with PHP and MySQL. It also tells you how to market and promote your site, and how to make money from it.
The Web Book →PDF →

Building Accessible Websites

Building Accessible Websites
Building Accessible Websites →HTML Version →

The Elements of Typographic Style Applied to the Web (HTML)

The Elements of Typographic Style Applied to the Web
For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse.
In order to allay some of the myths surrounding typography on the web, this website/book has been structured to step through Bringhurst’s working principles, explaining how to accomplish each using techniques available in HTML and CSS. The future is considered with coverage of CSS3, and practicality is ever present with workarounds, alternatives and compromises for less able browsers.
The Elements of Typographic Style (Full HTML) →Chapters →

Integrating Accessibility Throughout Design (HTML)

Integrating Accessibility Throughout Design
The Web is providing unprecedented access to information and interaction for people with disabilities. It provides opportunities to participate in society in ways otherwise not available. With accessible websites, people with disabilities can do ordinary things: children can learn, teenagers can flirt, adults can make a living, seniors can read about their grandchildren, and so on.
With the Web, people with disabilities can do more things themselves, without having to rely on others. People who are blind can read the newspaper (through screen readers that read aloud text from the computer), and so can people with cognitive disabilities who have trouble processing written information. People who are deaf can get up-to-the-minute news that was previously available only to those who could hear radio or TV, and so can people who are blind and deaf (through dynamic Braille displays). Web accessibility is about removing those barriers so that people with disabilities can use and contribute to the Web.
This book helps you improve your products—websites, software, hardware, and consumer products—to remove accessibility barriers and avoid adding new barriers. One guiding principle is: just ask people with disabilities.
Integrating Accessibility Throughout Design: HTML version →Table of Contents →

Getting Real: The Book by 37signals (HTML)

Getting Real: The Book by 37signals
Want to build a successful web app? Then it's time to Get Real. Getting Real is a smaller, faster, better way to build software.
Getting Real delivers better results because it forces you to deal with the actual problems you're trying to solve instead of your ideas about those problems. It forces you to deal with reality.
Getting Real foregoes functional specs and other transitory documentation in favor of building real screens. A functional spec is make-believe, an illusion of agreement, while an actual web page is reality. That's what your customers are going to see and use. That's what matters. Getting Real gets you there faster. And that means you're making software decisions based on the real thing instead of abstract notions.
Finally, Getting Real is an approach ideally suited to web-based software. The old school model of shipping software in a box and then waiting a year or two to deliver an update is fading away. Unlike installed software, web apps can constantly evolve on a day-to-day basis. Getting Real leverages this advantage for all its worth.
Getting Real: HTML Version →Chapters →

Access by Design Online (HTML)

Access by Design Online
We design Web sites so people can use them. People doesn’t mean “some people” or “certain people.” With universal usability, our goal is to design Web sites that accommodate the diversity of people and the Web browsing devices that they use. To design Web sites that people can use, we must work within the flexible framework that the Web provides.
To this end, we must begin our process with a solid understanding of how the Web works. When we know its nature, we can make intelligent design decisions that uphold rather than impede its functionality. Whenever we face a decision that may impact function, we must look for other options.
Access by Design Online: HTML Version →Table of Contents →

Research-Based Web Design & Usability Guidelines (PDF)

Research-Based Web Design & Usability Guidelines
The Research-Based Web Design & Usability Guidelines (Guidelines) were developed by the U.S. Department of Health and Human Services (HHS), in partnership with the U.S. General Services Administration.
The Guidelines were developed to assist those involved in the creation of Web sites to base their decisions on the most current and best available evidence. The Guidelines are particularly relevant to the design of information-oriented sites, but can be applied across the wide spectrum of Web sites.
Research-Based Web Design & Usability Guidelines(PDF) →

Search User Interfaces (HTML)

Search User Interfaces
This book outlines the human side of the information seeking process, and focuses on the aspects of this process that can best be supported by the user interface. It describes the methods behind user interface design generally, and search interface design in particular, with an emphasis on how best to evaluate search interfaces. It discusses research results and current practices surrounding user interfaces for query specification, display of retrieval results, grouping retrieval results, navigation of information collections, query reformulation, search personalization, and the broader tasks of sensemaking and text analysis. Much of the discussion pertains to Web search engines, but the book also covers the special considerations surrounding search of other information collections.
Search User Interfaces: HTML Version →Search User Interfaces: Table of Contents →

Dive Into Accessibility (HTML & PDF)

Dive Into Accessibility
This book is entitled "Dive Into Accessibility: 30 days to a more accessible web site", and it will answer two questions. The first question is "Why should I make my web site more accessible?" If you do not have a web site, this book is not for you. The second question is "How can I make my web site more accessible?" If you are not convinced by the first answer, you will not be interested in the second.
To answer the second question,the book presents 25 tips that you can immediately apply to your own web site to make it more accessible. Although these concepts apply to all web sites, the focus is on implementation using popular weblogging tools. If you use some other publishing tool or template system, you will need to determine how to implement the tips in your tool of choice.
HTML Version →PDF Version →Chapters →

Web Style Guide: Basic Design Principles for Creating Web Sites – 3rd Edition (HTML)

Web Style Guide: Basic Design Principles for Creating Web Sites - 3rd Edition
Written by Patrick J. Lynch and Sarah Horton for web site designers in corporations, government, nonprofit organizations, and academic institutions, the book explains established design principles and covers all aspects of web design—from planning to production to maintenance. The guide also shows how these principles apply in web design projects whose primary concerns are information design, interface design, and efficient search and navigation.
Web Style Guide 3rd Edition: HTML Version →Chapters →

The Woork Handbook (PDF)

The Woork Handbook
The Woork Handbook is a free eBook about CSS, HTML, Ajax, web programming, Mootools, Scriptaculous and other topics about web design.
This book is a miscellanea of articles written by Antonio Lupetti on his web design blogr. During the period form January to December 2008 “Woork” has been visited from over 4 millions visitors and has received a lot of requests to distribute a printable version of its contents.
The Woork Handbook: PDF Version →

Web Designers Success Guide (PDF)

Web Designers Success Guide
Web Designer's Success Guide is the definitive guide to starting your own freelance Web design business. In this book, Kevin Airgid gives designers a step-by-step instructions on how to achieve the following: Transition from full-time to self-employment, Freelance on the side to make additional income, Find new clients and keep them coming back for more, Market your freelance business, Manage your projects professionally and how to Price your services appropriately.
Web Designers Success Guide: PDF Version →

Eloquent JavaScript (HTML)

Eloquent JavaScript
Eloquent JavaScript is a digital book providing a comprehensive introduction (tutorial) to the JavaScript programming language. Apart from a bookful of text, it contains plenty of example programs, and an environment to try them out and play with them.
The book is aimed at the beginning programmer ? people with prior programming experience might also get something out of it, but they should not read chapters 2 to 5 too closely, because most of the concepts discussed there will probably be nothing new to them. Do make sure you read the end of the first chapter, which has some essential information about the book itself.
Eloquent JavaScript: HTML Version →Chapters →

Ruby Best Practices (PDF)

Ruby Best Practices
In 1993, when Ruby was born, Ruby had nothing. No user base except for Gregory and a few close friends. No tradition. No idioms except for a few inherited from Perl.
But the language forms the community. The community nourishes the culture. In the last decade, users increased—hundreds of thousands of programmers fell in love with Ruby. They put great effort into the language and its community. Projects were born. Idioms tailored for Ruby were invented and introduced. Ruby was influenced by Lisp and other functional programming languages. Ruby formed relationships between technologies and methodologies such as test-driven development and duck typing.
This book introduces a map of best practices of the language as of 2009.
Ruby Best Practices: PDF Version →

HTML5 Quick Learning Guide by freehtml5templates.com

HTML5 Quick Learning Guide by freehtml5templates.comThis guide introduces you to just the main elements of HTML5 that you’ll probably want to use right away. This guide is for those who want to get the basics figured out first, and worry about the finer details later on.
HTML5 Quick Learning Guide →PDF →

Web Font User Guide by FontShop

Web Font User Guide by FontShopThis Web FontFont User Guide contains information aimed at web developers, system administrators and website visitors.
Section B is for web developers, showing how to get started using Web FontFonts for display on your website. Section C contains information for system administrators about which configuration changes may be necessary to successfully serve webfonts from your web server and, finally, section D outlines some issues visitors of your website may experience in connection to webfonts and may assist site owners in answering webfont-related support requests.
Web Font User Guide →PDF →

Type Classification eBook by Jacob Cass

Type Classification eBook by Jacob CassThis book has been made to help you learn the 10 broad classifications of type. These are the basic foundations of what you need to learn to learn typography and it is essential for any designer to know how to classify type. This book goes through the 10 type classifications with a brief history as well as the key characteristics of each.
Type Classification eBook →PDF →

Typo Tips – Seven Rules for Better Typography by Erik Spiekermann

Typo Tips - Seven Rules for Better Typography by Erik SpiekermannTypo Tips – Seven Rules for Better Typography →PDF →

How to Start a Business Blog by Michael Martine

How to Start a Business Blog by Michael MartineHow to Start a Business Blog, by Michael Martine, is a step-by-step-guide to help you plan, set-up, and create content for a business blog.
How to Start a Business Blog →PDF →

Forty’s Pocket Guide to SEO by Forty

Forty’s Pocket Guide to SEO by FortyPocket Guide to SEO contains everything you could want to know about SEO. Buried deep inside its pages you’ll find tips, tricks, general information about search engines, and how you can make them work for you – in a completely ethical way, of course.
Forty’s Pocket Guide to SEO →PDF →

Why design? by AIGA

Why design? by AIGAThe “Why design?” booklet outlines the role of design in business strategy. It seeks a common framework for why design adds value to clients’ interests. It defines the power of Designing, a larger concept that includes strategy as well as artifacts across a variety of disciplines.
Why design? →PDF →

The Design Funnel: A Manifesto for Meaningful Design by Stephen Hay

The Design Funnel: A Manifesto for Meaningful Design by Stephen HayFrom the authour of this manifesto, Stephen Hay: "Would you like a process which would help translate the often vague, unclear wishes of your clients (and yourself, for that matter) into a clear and solid basis for your design? This manifesto will show you how."
The Design Funnel: A Manifesto for Meaningful Design →PDF →

How To Be Creative by Hugh MacLeod

How To Be Creative by Hugh MacLeodWritten by HughMacLeod, an advertising executive and popular blogger with a flair for the creative. He offers his 26 tried-and-true tips for being truly creative with each point being illustrated by a cartoon drawn by the author himself.
How To Be Creative →PDF →

Time Management for Creative People by Mark McGuinness

Time Management for Creative People by Mark McGuinnessTime Management for Creative People →PDF →

Who's There? by Seth Godin

Who's There? by Seth GodinWho's There is not an ebook about how to write better or how to follow the traditional conventions about formatting and building a blog. Instead, he talks about how building a blog asset can have a spectacular impact on you, your career, your organization and your ideas.
Who's There? →PDF →

A Concise Guide to Archiving for Designers by Karin van der Heiden

A Concise Guide to Archiving for Designers by Karin van der HeidenAIGA worked with the Dutch Archives for Graphic Designers (NAGO) in the Netherlands to publish an English version of A Concise Guide to Archiving for Designers. The guide provides designers with the proper ways to store and describe their collections in 10 short chapters.
A Concise Guide to Archiving for Designers →PDF →

Guerrilla Freelancing by Mike Smith

Guerrilla Freelancing by Mike SmithGuerrilla Freelancing →
PDF →

KnockKnock by Seth Godin

KnockKnock by Seth GodinKnockKnock →PDF →

You might also like…

A Review of Web Design Trends from 2010 →
The Trend of Minimalist Graphic Design →
How To Control Flow Within Your Web Designs →
Accessibility Principles for the Modern Designer →
Professional Structure and Documentation in Web Design →
Clear Your Mind to Focus on What Matters →
What the Future of Cloud Computing means for Web Designers →
Beginners Guide to Using the Power of Color in Web Design →
Understanding and the Meaning of Color Within Design →


15 Lightweight and Minimal CSS Frameworks

The CSS framework you decide to use should ideally not be based only on a personal preference, as most web designers tend to do. Instead a framework should be based on your current web design projects complexity and functionality requirements. I mean, why would you want to use a one-huge-size-fits-all solution (like YUI, Blueprint or 960.gs, which are, as everybody knows, in there own right fantastic and versatile solutions) on a small or mid sized web project?
Would it not make more sense to use a lighter and easier to use framework? Something that offers only absolute essential tools, something with a shorter learning curve, something that would allow you to implement your prototype faster, debug quicker and, when all of this is put together, will optimize your development time and ultimately improve your productivity. Does that not sound pretty good?

In this article we highlight 15 of the best lightweight CSS frameworks that we feel you could consider for your next project. Looking at all fifteen, as you will see, it is impossible to choose the best, as each one focuses on something different. What they all do have in common is that they all will work perfectly as a good and solid base for any web design project.

So, over to you, we would love to know what your favorite CSS framework is and why…

The 1140px CSS Grid System/Framework

The 1140px CSS Grid System/Framework
The recently released 1140px Grid Framework has been designed to fit perfectly with a 1280px screen and becomes fluid for smaller screens and beyond a certain point it uses media queries to serve up a mobile version.
The actual grid consists of twelve columns, evenly divided by either two, three, four or six. It works with all major browsers, with the exception of IE6, which does not support max-width (it will span the full width of the browser).
The 1140px CSS Grid System/Framework →

Less Framework 3

Less Framework 3
The Less Framework 3 has been built so that you design your default layout as normal, and then all additional layouts using inline media queries. Any browsers that are incompatible with media queries will ignore all of the additional layouts, and will only use the default. The additional layouts will inherit any styles given to the default layout, so coding them is a very easy.
All four of the layouts (3, 5, 8 and 13 columns) included in Less Framework share a common column-width and gutter-width, which makes it easy to design them consistently. Also included are two sets of typography presets, composed around a baseline grid of 24px.
Less Framework 3 →
Less Framework 3

The Square Grid

The Square Grid
The Square Grid is a simple CSS framework based on 35 equal-width columns. You can use the grid in a variety of columns: 18, 12, 9, 6, 4, 3, 2, with the total width of the grid is 994px – which the majority of modern monitors will support.
The grid is equiped with a 28px baseline-grid for a smooth vertical rhythm. Each block (DIV) is defined with a margin of 1 square (28px) from the next block.
The Square Grid →

EZ-CSS

EZ-CSS
EZ-CSS is a light and easy to use framework with which you are not bound to a traditional grid and allows for columns and gutters of any width.
The idea behind EZ-CSS is to force the final “columns” in the flow to become a block formatting context. Doing so creates a fluid container that is both aware of surrounding floats and will contain a float at the same time. Actually, each EZ-CSS container is a block formatting context, the difference being that the final column is width-less. This lack of width prevents rounding issues (e.g., 1/3, 1/3, 1/3) or rounding errors (e.g. 1/2, 1/2 in Internet Explorer lt 7). As a bonus, vertical margins should behave the same in all containers (it will not collapse at the top or bottom of the box).
There is also a version for rapid prototyping, which you can learn more about here: EZ-CSS: Markup for Rapid Prototyping.
EZ-CSS →

Atatonic CSS Framework

Atatonic CSS Framework
The Atatonic CSS Framework works just like any other grid system, but with only about 10 lines of CSS and has it's main focus on typography. The idea behind this project is to provide a solid, yet minimal, base to start every development project.
Atatonic CSS Framework →

Baseline

Baseline
Built with typographic standards in mind, Baseline makes it very easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system. Baseline has been developed to be a quick way to prototype a website and grew up to become a full typographic framework for the web using a “real” baseline grid as its foundation.

Most frameworks and examples of baseline grids simply put the type on a regular line-height, but one problem with this approach is that the text rarely lines up correctly between columns and headlines — H1 through H6. Baseline try to align to the font metric to correctly line up headlines, paragraphs, form labels and any other major elements on the page baseline, creating a harmonious layout.
Baseline →

Elastic CSS Framework

Elastic CSS Framework
The Elastic CSS Framework is a simple CSS frameworks, based on the printed layout techniques of 4 columns but with the capability to offer unlimited column combinations. and capacity to make elastic, fixed or liquid layouts easily.
Elastic CSS Framework →

FEM CSS Framework

FEM CSS Framework
The FEM CSS Framework is a fixed layout, based on the 960.gs, but with a twist in its philosophy to make it more flexible and faster to play with boxes. It has only a 12 column grid, with the columns having 10px margin on each side, making a 20px gutter – giving some breathe between boxes.
It is cross browser compatible, having been tested in IE (6, 7, 8), Opera, Gecko (Firefox) and Webkit (Safari, Chrome) browsers.
FEM CSS Framework →

iWebKit

iWebKit
iWebKit is a file package designed to help you create your own iPhone, iPod Touch and iPad compatible website or webapp. The kit is accessible to anyone (even people without any HTML knowledge) and is simple to understand thanks to the included docs and tutorials.
iWebKit is a great tool because it is very easy to use, extremely fast, compatible & extendable. It is simple HTML that anyone can edit contrary to some other very complicated solutions based on ajax. Simplicity is the key!
iWebKit →

SenCSs

SenCSs
SenCSs stands for Sensible Standards CSS baseline, (pronounced "sense"). It supplies sensible styling for all repetitive parts of your CSS, and doesn't force a lay-out system on you.
It doesn't include a layout system littered with useles classes and pre-set grids, it will do everything else for you: baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms and more. It covers all of the stuff that's almost the same in every project, but that you keep on writing again and again.
SenCSs →

520 Grid System (Framework for Facebook Page Developers)

520 Grid System (Framework for Facebook Page Developers)
The 520 Grid System, build for Facebook page developers, is 520px wide including 16px left and right margin around container. It is based on 12 columns with 16px gutters with it; 12 is nice number that can be divided with 2, 3, 4 or 6 to get inline columns with equal width.
Presently, 520 Grid System has not included styles for text, tables, forms,… but that's in on the developers todo list.
520 Grid System (Framework for Facebook Page Developers) →

Instant Blueprint

Instant Blueprint
Instant Blueprint →

The 1KB CSS Grid

The 1KB CSS Grid
The 1KB CSS Grid →

Tiny Fluid Grid

Tiny Fluid Grid
Tiny Fluid Grid →

1 line CSS Grid Framework

1 line CSS Grid Framework
If all of the above frameworks are not minimal enough for you, you could always try this 1 line CSS Grid Framework.
1 line CSS Grid Framework →Demo →

You might also like…

30 Pure CSS Alternatives to Javascript →
50 Refreshing CSS Tutorials, Techniques and Resources →
40 High Quality CSS and XHTML Web Layout Templates →
40 Professional and Detailed Web Layout PSD Templates →
20 Free Web UI Element Kits and Stencils →
25 Completely Free Fonts Perfect for @fontface →
The Complete Web Design Style Series (700 Designs in 14 Categories) →
Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks →