Web Design Resources
Articles, Documentation, Online Services, Books, Software, and more
HTML Resources
- Google's HTML/CSS Style Guide
- HTML Advanced Tutorial | HTML Dog
- HTML Intermediate Tutorial | HTML Dog
- HTML Beginner Tutorial | HTML Dog
- Device Classes & Responsive Design
HTML5 Resources
- Appcache Facts
- Working Off the Grid with HTML5 Offline - HTML5 Rocks
- Flash-centric misconceptions of HTML5 | Webdesigner Depot
- Modernizr
Detects what features a browser supports and adds CSS classes dynamically. - Less+ Framework | Webbyrå Norrköping Angry Creative
CSS Tutorials
- Google's HTML/CSS Style Guide
- Normalize.css: Make browsers render all elements more …
- CSS Advanced Tutorial | HTML Dog
- CSS Intermediate Tutorial | HTML Dog
- CSS Beginner Tutorial | HTML Dog
CSS3 Resources
- CSS Hat turns Photoshop layer styles to CSS3 with a click - …
- Prefix free: Break free from CSS vendor prefix hell!
- CSS gradients please!
- Animatable: One property, two values, endless possiblities
- Shadow effects with CSS3
Flash Articles
- A Closer Look at Choosing Between Flash and jQuery
A balanced discussion about where to use Flash and where to use jQuery, with tons of examples. - The Future of Web Content – HTML5, Flash & Mobile Apps
A well-informed and reasoned explanation of the complex forces that will keep the HTML5 vs. Flash battle from resulting in an overwhelming victor any time soon. - HTML5 vs. Flash: A Complex Political Battle
A few days ago, I wrote about what the iPad means for web design. One of the most controversial issues is the effect Apple's spurning of Flash will have on the future of that technology. This subject has been written about widely; much of the commentary is along the lines of "good riddance to Flash" and "HTML5 can do everything Flash can do", and is emotional and ill-informed.
- 10 Killer Flash Tips For Beginners | Tools
- The Most Creative Flash Preloaders of All Times | Flash Scope
Audio and Video
- “Probably, Maybe, No”: The State of HTML5 Audio
- HTML5 Audio Unplugged
- Hybrid Video Players for Video That Plays (Almost) Everywhere
Video is becoming more and more popular as an element of web pages. With the fragmented technology standards, providing video that plays everywhere can be tricky. Fortunately, there's an assortment of solutions available that package up all the complexity and provide a single, integrate solution for video that just works.
- Introducing HTML5 Video Player Widget on the Adobe …
Adobe has partnered with Kaltura to distribute a version of Kaltura's open-source HTML5/Flash video player, through Adobe's Widget Browser. - jQuery.sg.video an HTML5 video player | jQuery Plugins
A jQuery plugin that simplifies use of HTML5 video and Flash to provide video that will play anywhere.
JavaScript
- jQuery Smooth Div Scroll - smooth content scrolling jQuery …
- Google's JavaScript Style Guide
- JavaScript Reference (Mozilla)
- An Introduction to jQuery for Designers » JavaScript, jQuery …
- Foundation: Rapid Prototyping and Building Framework from ZURB
Color
- CSS.coloratum: Convert and share CSS colors
- Web browser color management tutorial
- Colllor - Turn one color into many alternative ones
- Colours In Cultures
- 40 Useful Online Generators For Web Designers
Navigation
- The Case Against Vertical Navigation
- Creative and Unusual Layouts and Navigation Designs
- Building An Awesome Navigation Menu with jQuery: Part 1 | …
- Website Navigation Then and Now
A nice collection of nav bars from major sites, showing how they have changed over the past few years.
- Horizontal Sub-nav with CSS & jQuery
Typography on the Web
- CSS Font Stack :: A complete collection of web safe CSS font …
- Lost Type Co-op
Pay-what-you-want type.
- WhatFont Tool - The easiest way to inspect fonts in webpages
- FontDropper: The Best Tool Yet for Web Font Exploration
Extensis, which provides a webfont service called WebINK, has launched the coolest tool yet for experimenting with web fonts: the FontDropper.
- Jason Santa Maria on Web Typography
Jason Santa Maria spoke with Webvanta at An Event Apart Seattle about web typography, web fonts, Typekit, and more.
Inspiration
- 15 More Cinemagraphs by Jamie Beck and Kevin Burg | DeMilked
Cinemagraphs are animated GIFs that look like photos with movement; a curious hybrid between stills and video. - Build an Awesome Image Gallery with jQuery, Modernizr, and CSS3
- Landing Pages Design Showcase
Great collection of landing page examples. - A Detailed Look into Popular Styles in Web Design
- 5 Website Designs That Blew Us Away
Analytics
- 7 Tools You Should Be Using For Better Web Designs
Links to a nice assortment of tools, from heat maps to A/B testing and site monitoring. - A Guide to Google Analytics and Useful Tools | …
SEO
- Introducing smartphone Googlebot-Mobile
- Schema.org and Microdata Markups for SEO
- Schema.org - Why You're Behind if You're Not Using It... | SEOmoz
- Do As I Say, Not As I Do: A Look At Search Engines & SEO Best …
- Why Local SEO Does Not End with Google Places
Advertising
Web Site Performance
- What Every Web Developer Should Know About Front-End Performance
- Techniques for Squeezing Images for All They’re Worth
- Should You Use JavaScript Library CDNs?
The question of whether or not to use Google's CDN to load the jQuery library is more complex than you may think. This author thinks it's not a good idea.
Graphic Design
- 15 More Cinemagraphs by Jamie Beck and Kevin Burg | DeMilked
Cinemagraphs are animated GIFs that look like photos with movement; a curious hybrid between stills and video. - Online Diagram Software and Flowchart Software - Gliffy
- 15 UI Design Patterns Web Designers Should Keep Handy
- Designing Your Blog with User Interface in Mind
- Billboard Web Design: How to Win Your Audience’s Attention
An interesting approach to designing web pages to grab attention, with some great examples.
Usability
- Device Classes & Responsive Design
- Designing Your Blog with User Interface in Mind
- What Is User Experience Design? Overview, Tools And Resources
A great introduction to user experience design -- what it is, why it matters, and how to do it -- with pointers to lots of resources. - Scrolling and Attention
The question of how much information can go "below the fold" on a web page is one that is widely debated. This article presents some strong opinions that are firmly rooted in a lot of analysis of actual behavior. - 7 Tools You Should Be Using For Better Web Designs
Links to a nice assortment of tools, from heat maps to A/B testing and site monitoring.
Interaction Design
- Sneakpeekit | Sketch sheets for Web Designers
- Online Diagram Software and Flowchart Software - Gliffy
- Device Classes & Responsive Design
- 15 UI Design Patterns Web Designers Should Keep Handy
- Designing for the Web
Read it online for free or download a PDF for a small fee.
RSS
Browsers
- website dimensions - exact pixels - live check
- Google I/O 2011: Chrome Dev Tools Reloaded
- Responsive Web Design: What It Is and How To Use It
A great set of techniques for building sites that work well in a wide range of devices and browsers. - IEBlog
Blog for Microsoft's Internet Explorer team. The place to keep up with the latest developments in IE-land. - The Mozilla Blog
Blog of the Mozilla development team. The place to find the latest news about emerging versions of Firefox.
Software
- Extend the Firebug Console with these 20 Useful Extensions / …
- 10 Big Time-Saving Tools for Web Designers
- Great Free Software for Web Designers
- 12 Killer Tips for Designing in the Browser
A nice assortment of tools and techniques for designing in HTML and CSS. - HubbleSite - Movie Theater
Selection of free movies for download in a variety of formats.
Photoshop
- The Photoshop Etiquette Manifesto for Web Designers
- 20 free Photoshop brushes packs for vintage designs
- How to Create Retro Art in Photoshop | Web Design Ledger
- Carsonified » Advanced Photoshop Techniques for Web …
- 12 Of The Best Photoshop Web Design Tutorials | Creative Nerds
Illustrator
- Photo-Realistic Vectors from 10 Illustrators | 10Steps.SG
- 30 Illustrator Videos To Turn You Into An Expert | Creative Nerds
- How to Create a Wide Range of Custom Color Swatches in …
- Create a Vintage TV Set Icon in Adobe Illustrator | Cute …
- 30+ Remarkable Adobe Illustrator Tutorials | Tutorial Lounge
Icons
- Entypo - 100+ carefully crafted pictograms
- DEFAULT iCON ::: Free Elegant Icons
- The Best Icon Sets for Minimal Style Web Design
- Free Seamless Background Textures
- Fresh Free High-Quality Icon Sets « Smashing Magazine
Templates
- Free Seamless Textures
- Open Design Community - Download Free Web Design Templates - …
- Free CSS Templates - Templates.Ironmyers.com
- CSS Layout: A collection of 224 Grid and CSS Layouts
- Free Seamless Background Textures
Design Schools
- Web Design Degree: Guide to Web Design Degree Programs
- 27 Creative Website Designs of Art and Design Schools
Forms
- The Current State of HTML5 Forms
A great reference for HTML5 form support. - Progressively Enhancing HTML5 Forms
- Formee - Fresh baked forms for your websites!
- Enhance your input fields with simple CSS tricks
Events
- Adobe MAX 2010
This is a conference for all Adobe fans, bringing together thousands of designers, developers and decision-makers under one roof. Connect with one another face-to-face or through the plethora of screens installed at the LA Convention Center. The 2009 event was a huge success with keynote talks from Adobe experts Ben Forta, Terry White and Greg Rewis. - flashbelt - a flash conference bringing together flash …
Flashbelt is for all lovers of Flash, from design students (who pay a lower entry fee) to Flash experts. This event is pretty informal (you’ll certainly see more attendees in jeans and T-shirts than shirts and ties here!), but the workshops are all highly educational. Attendees are often exposed to tools and apps of the future. - How Conference - Graphic Design is a Business as well as an Art!
Create, connect and communicate at the How Design Conference 2010. Debbie Millman, president of the design division at Sterling Brands and president of the AIGA, will be running a session on why we brand and why we buy. How’s workshops are designed to boost creativity and improve your competence across a range of design software. - WebVisions - Visionary Web Conference
The focus for WebVisions 2010, now in its 10th year, is web design, technology, business strategy and innovation. However, you can also expect workshops on web and mobile apps, user experience and video and motion graphics. This great event, which is fun as well as informative, is perfect for networking, with parties and gatherings aplenty over the weekend. - An Event Apart: The Design Conference For People Who Make Web …
With 14 sessions spread over this two-day conference, you’ll learn about code and content, as well as usability and design. Keynote speakers at this fantastic event include Eric Meyer, one of the founding fathers of CSS, and Jeffrey Zeldman, author of Designing With Web Standards and owner of web design studio, Happy Cog.
Information Architecture
- Boxes and Arrows: The design behind the design
“Boxes and Arrows is devoted to the practice, innovation, and discussion of design; including graphic design, interaction design, information architecture and the design of business. Since 2001, it’s been a peer-written journal promoting contributors who want to provoke thinking, push limits, and teach a few things along the way.”
Content Management Systems
- Designing for Content Management Systems - Smashing Magazine
An excellent piece on things to consider when choosing and designing for a CMS. - Webvanta Hosted CMS Demo at BizTechDay
On Saturday, I had the opportunity to give a 5-minute Webvanta demo as part of the BizTechDay conference in San Francisco. It's a challenge to convey the power of Webvanta in such a short demo. I chose to focus on how Webvanta supports any design, and allows the designer to easily build database-driven pages.
- Webvanta
- ExpressionEngine
- WordPress
Landing page design
- Landing Pages Design Showcase
Great collection of landing page examples. - The Art of Landing Page Persuasion: Better Results, Higher …
You'll need to register (free) to see this video but it is well worth it.
- LiveBall Platform Overview - ion interactive
- How to Design a Landing Page to be Conversion Focused
Mobile web design
© 2012 Webvanta Inc. All Rights Reserved.
