Dive Into HTML5
65 Resources for Grid-Based Design
Grid-based design is obviously a popular approach in modern web design. For designers that use grids, this post includes links to useful tools that can improve your efficiency and effectiveness, as well as some articles for advanced techniques. For those of you who are not as familiar with the details of grid-based design, there are plenty of articles and learning resources here. Articles: Grids Are Good – Presentation in a PDF document Why Use a Grid – Mark Boulton 5 Simple Steps to Designing Grid Systems: Preface – Mark Boulton 5 Simple Steps to Designing Grid Systems: Part 1 – Mark Boulton 5 Simple Steps to Designing Grid Systems: Part 2 – Mark Boulton 5 Simple Steps to Designing Grid Systems: Part 3 – Mark Boulton 5 Simple Steps to Designing Grid Systems: Part 4 – Mark Boulton 5 Simple Steps to Designing Grid Systems: Part 5 – Mark Boulton Feeling Your Way Around Grids – Mark Boulton Oh Yeeaahh! The Funniest Grid You Ever Saw – Subtraction Grid Computing… And Design – Subtraction Galleries:
Color Theory Quick Reference Poster
It’s always good to be able to articulate design choices to your clients; why you put something where, why you chose the color scheme you did, etc. This knowledge is one of the biggest differences between a designer and a non-designer. But there is a lot to remember when it comes to the realm of graphic design – so much so that it’s pretty much impossible to remember everything from all the theories of graphic design, to web design best practices to Photoshop keyboard shortcuts. With that in mind, I decided it would be useful to have all of the basics of color theory contained in one place – specifically, a cool infographic-esque poster. *Edit: we now have an Elements of Design Quick Reference Poster as well as a Principles of Design Quick Reference poster too! The idea is that this graphic can be either printed out or used as a desktop wallpaper. The graphic contains info on: Hopefully this will be as useful to you as I’m hoping it will be to us here at Paper Leaf.
Efficiently Rendering CSS
I admittedly don't think about this idea very often... how efficient is the CSS that we write, in terms of how quickly the browser can render it? This is definitely something that browser vendors care about (the faster pages load the happier people are using their products). Mozilla has an article about best practices. Google is also always on a crusade to make the web faster. They also have an article about it. Let's cover some of the big ideas they present, and then discuss the practicalities of it all. Right to Left One of the important things to understand about how browsers read your CSS selectors, is that they read them from right to left. ID's are the most efficient, Universal are the least There are four kinds of key selectors: ID, class, tag, and universal. #main-navigation { } body.home #page-wrap { } .main-navigation { } ul li a.current { } ul li a { } * { } #content [title='home'] #main-nav > li { } Even though that feels weirdly counter-intuitive... Don't tag-qualify David Hyatt:
Less Framework 2
I called Less Framework "a CSS grid system for designing adaptive websites". It was basically a fixed-width grid that adapted to a couple of then popular screen widths by shedding some of its columns. It also had matching typographic presets to go with it, built with a modular scale based on the golden ratio. The resources it was originally published with are still available on GitHub. Contrary to how most CSS frameworks work, Less Framework simply provided a set of code comments and visual templates, instead of having predefined classes to control the layout with. /* Default Layout: 992px. Less Framework was popular in the early days of responsive design. Eventually, I moved on from fixed-width grid systems and worked on a fully fluid-width one, in the form of Golden Grid System. Less Framework's popularity was helped by the following contributions and the lovely people behind them (dead links crossed off):
25 jQuery Plugins for Working with Forms – DesignM.ag
Get the FlatPix UI Kit for only $7 - Learn More or Buy Now Almost every website uses a form of some kind. Contact forms and other types of forms can be enhanced with the use of a number of jQuery plugins that are readily available. In this post we’ll feature 25 useful plugins that you may be able to use in your own work with forms. jqTranform jqTransform will make it easy to give your forms a more attractive look as compared to the default form. jQuery Form Plugin With this plugin you can easily upgrade HTML forms to make use of AJAX. In-Field Labels Display labels inside form fiels with this plugin. jQuery Form Validation This plugin will validate the information entered into form fields before it is submitted. AJAX Form Validation Another option for adding form validation. jQuery Auto Complete This plugins adds an auto complete functionality to form fields, especially useful for searches. jQuery Autocomplete Another option for adding auto complete to form fields. Uploadify Contactable jQuery Checkbox
How to Make an HTML5 iPhone App
By Alex Kessinger You’ve been depressed for like a year now, I know. All the hardcore Objective-C developers have been having a hay-day writing apps for the iPhone. You might have even tried reading a tutorial or two about developing for the iPhone, but its C—or a form of it—and it’s really hard to learn. I don’t want to say that you should give up on the objective: you can get it eventually. You can create a native app that lives with all the other apps, and for the most part, it’s going to be a pitch-perfect imitation. You can do this with the skill set you probably already have: HTML(5), CSS, and JavaScript. I’ll show you how to create an offline HTML5 iPhone application. Offline? What am I talking about when I say "offline"? The app should be as functional as it can when it is offline, just like normal native mobile apps. This is a tutorial specifically for iPhones but most of these techniques apply to all phones that have HTML5-capable browsers. Prework About the App Application Cache <!
Fight Div-itis and Class-itis With the 960 Grid System
Years ago, HTML tables were the standard for laying out web pages. CSS and semantic thinking changed that, and today CSS frameworks make designing relatively easy. But they can also generate a surprising number of superfluous elements. The 960 Grid System encourages the addition of <div> elements and class attributes, especially on complicated pages. Creating cleaner code means going beyond the framework and thinking about what it really represents. CSS frameworks provide a workflow solution, namely a rapid deployment of grid-based web layouts. Before CSS saw widespread use, tables provided all the layout a web designer needed. As designers learned to use CSS, div elements replaced tables. The Spread of Class-itis and Div-itis Clear, lean code offers many advantages. Other than the semantics, the great advantage of using <div>…</div> over <table><tr><td>…</td></tr></table> is that we end up with less code to do the same job. To understand how, we need to look at the framework itself.
Plus de 50 textures pour webdesigners
Des textures pour webdesigners. Voici un échantillon. Elles sont gratuites pour la plupart. Ce qui veut dire aussi que certaines ne le sont pas :-).
Using CSS3 Transitions, Transforms and Animation
960 Grid System
