Web Design Resources
Articles, Documentation, Online Services, Books, Software, and more
HTML Resources
- Device Classes & Responsive Design
- 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. - Responsive Web Design with HTML5 and the Less Framework 3
- Great New HTML Email Templates
Campaign Monitor has released what may be the best set of free HTML email templates anywhere.
- 40 Useful Online Generators For Web Designers
HTML5 Resources
- Modernizr
Detects what features a browser supports and adds CSS classes dynamically. - Less+ Framework | Webbyrå Norrköping Angry Creative
- Foundation: Rapid Prototyping and Building Framework from ZURB
- Fluid Baseline Grid - A sensible HTML5 and CSS3 development kit
- Ai to Canvas Plug-In
Free tool to create HTML5 canvas elements from your Adobe Illustrator documents.
CSS Tutorials
- Sprite Cow - Generate CSS for sprite sheets
- Responsive Web Design with HTML5 and the Less Framework 3
- CSS Positioning 101
- The 1140px CSS Grid System/Framework · Fluid down to mobile
A CSS grid framework with columns that scale as the browser size drops below 1140 pixels. - Object Oriented CSS (OOCSS): The Lowdown
CSS3 Resources
- 15 Responsive CSS Frameworks Worth Considering
- Six CSS Layout Features To Look Forward To - Smashing Coding
- CSS3 PIE: CSS3 decorations for IE
- Modernizr
Detects what features a browser supports and adds CSS classes dynamically. - Less+ Framework | Webbyrå Norrköping Angry Creative
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
- An Introduction to jQuery for Designers » JavaScript, jQuery …
- Foundation: Rapid Prototyping and Building Framework from ZURB
- Nihilogic : MojoZoom - Free JavaScript Image Zoom
- Share Count JS - Dandy pixels
- Build an Awesome Image Gallery with jQuery, Modernizr, and CSS3
Color
- Colours In Cultures
- 40 Useful Online Generators For Web Designers
- Pictaculous - A Color Palette Generator
Generate color palettes from an uploaded image. - Color Theory for Designers, Part 1: The Meaning of Color
- How To Create A Color Palette From An Image Using Kuler
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
- 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.
- Fighting the @font-face FOUT
Firefox versions below 4.0 display text in the default font while an @font-face font is being loaded, creating an annoying "flash of unstyled type". This article details a variety of not very pleasant workarounds.
Inspiration
- 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
- Billboard Web Design: How to Win Your Audience’s Attention
An interesting approach to designing web pages to grab attention, with some great examples.
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
- 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
- OptiLocal | Local SEO Services | Google Places Specialist
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
- 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. - Coding Your Web Site with Quality
When you're ready to turn your beautiful design into a live, functioning web site, you need to tread carefully. While many different paths will lead to a site that looks more or less the same, the maintainability may vary dramatically, as may the browser compatibility and accessibility. In this article, we explore coding issues.
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
- 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. - Best Practices for Hints and Validation in Web Forms
RSS
Browsers
- 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. - Surfin’ Safari - The WebKit Blog
WebKit development blog. The place to get the lastest information about the evolution of WebKit, which is the rendering foundation for both Safari and Chrome. - A List Apart: Articles: Smartphone Browser Landscape
Excellent article on mobile browsers, with a good set of links to other resources. A great place to start if you're diving into learning about mobile development.
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
- 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
- 75 Free Useful Icon Sets for Web Designers and Developers | …
Templates
- 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.
