50 Web Design Links
Over the years I’ve acquire more bookmarks than you can shake a stick at! This post should make it easier for me to share my bookmarks with fellow designers and developers. I am also hoping you can share some great links me in the comments.
Generators
HTML5 with CSS3 Login/Registration Form
An easy way to make a lightweight, modern and sleek looking login box or registration form. This tutorial provides step by step instructions on how to make your own form using HTML5 and CSS3. You can also download the source code and use it right away.
PHP & jQuery Contact Form with Validation
This tutorial teaches you how to make a contact form with HTML and PHP. It also includes jQuery for form validation. You can also download the source code and use it right away.
LipSum Generator – Classic Latin Filler
You never know when you need a few good paragraphs of Latin Filler. This Latin filler generator provides exactly that.
Sitemap Generator
If you need a quick XML sitemap generated for free, this is a great link from Internet Marketing Ninjas (lol?), formerly known as WeBuildPages.
Site, Server & Loading Optimization
gZip Compression via htaccess
A quick guide on how to ensure your site is optimized for success by using gzip compression to keep your file size down.
htaccess Cheat Sheet
The ultimate .htaccess cheatsheet. A great bookmark for newbies and experts alike.
Image Size Optimization / Compressor
This website lets you upload an image into it’s tool. The tool then spits back several quality-variations of your image, allowing you to pick the one which looks the best. Typically you can save between 15% and 40% in file size without much quality reduction.
Web Page Speed Test
This webpage test shows you what an initial load is and then any follow up loads (taking caching into consideration.) It also gives you a pie chart breakdown of the content which loads (HTML, images, scripts, css, etc.)
Website Optimization Test
This site examines your website’s load and gives you a list of how many server requests there are, the total size of your page load (in KBs), and whether or not you have compression enabled on your scripts. It also provides some basic instructions on how to improve your loading times.
Pingdom Full Page Test
Pingdom does a loading speed test and also spits back some data about how long different elements took to load. This should shed some light on how to speed up your website by reduce loading sizes.
Google PageSpeed Insights
Google’s very own page speed testing tool with suggestions on how to increase efficiency.
W3 Code Validator
Validate your HTML and CSS with W3′s code validation tool. Simple to use, and it makes debugging very easy.
Browser Shots
This is a great way to see what your website looks like in many (30+) different browser, browser versions, and browsers running on different Operating Systems. It can take awhile to get all the screenshots but the nice part is you can just submit your query and come back in 15 to 20 minutes to see some snapshots of your website.
Smartphone Optimization
Google released a smartphone optimization page to help you make the best decisions when developing any platforms for smartphone / mobile use.
Bing Webmaster Tools
Bing recently revamped their entire toolkit. Before that, I saw little reason to use Bing Webmaster Tools. This tools new interface makes both development and search engine optimization for Bing (and any search engine really) a breeze.
Google Webmaster Tools
Google’s Webmaster Tools are excellent. Google will notify you of any crawl errors, hacked site warnings, and even let you know if it’s time to update your WordPress installation.
CSS Generators and Tutorials
Anything Slider
Easy to setup content slider using CSS.
CSS3 Maker
A site that lets you visually create CSS3 styles. You can generator a lot of custom code very quick with this tool.
Shapes made purely in CSS
CSS3 be used where you may use images to create shapes. I’m not talking about squares, rectangles, and circles. I’m talking about everything from an Infinity symbol, to a heart, and even a Yin Yang symbol.
CSS Color Gradient Generator
If you need a quick pure-CSS gradient, this tool is your answer.
CSS “Vector” Imagery
Some pure CSS shapes for social icons, social login boxes, and other call to actions.
Design Generators or Directories
Da Button Factory
The easiest way to make a nice looking button for your website.
BG Patterns
An easy way to make a tillable background for your website. It comes with many options and pre-selected images.
Tartan Generator
Another great background generator.
Polka Dot Generator
A great way to make a tiling polka-dotted background for any website.
Google+ Banner Generator
This page lets you quickly make your Google+ Banner image or “Scrapebook” images. Simply upload your image and it’ll do the rest.
100+ PhotoShop Actions
PhotoShop is great. PhotoShop with added functionality is even better. These 100+ actions will help increase productivity with your PhotoShop work.
80+ PSDs for Web Designers
Great PSDs for Web designers. Many commonly used icon types, buttons, stickers, etc.
50+ Amazing PSDs for Design Projects
An excellent collection of PSDs to jumpstart your work. Blank t-shirt templates, textures, water drops, and more.
LucidChart – Create Flowcharts on the Fly
An easy way to drag and drop items to make a flow chart. Export it at the end in various formats and take them on the go with you.
Colorschemer
My preferred color-explorer. If I have a color I need to work into a design, I’ll add it here and find colors within the same range. It provides both HEX and RGB values.
Stock Exchange – Free Stock Photos
Lots of pictures from many industries are available for free here. Some have specific usage restrictions.
Creative Commons, Image Search
Another great place to look for images to add to your website.
Pixlr Editor
Don’t have PhotoShop with you? This is a web-based photo editor that packs a huge punch. I sometimes use this as an alternative if I don’t feel like opening PhotoShop to do a quick task.
Fonts and Typography
DaFont
1000s of free fonts ready to go into your next design project.
Google Webfonts Directory with Code Generator
Let Google help you find new fonts to spice up your website. They’ll even go as far as generating all the code you need to implement the font.
PrintFriendly
Add a button that turns any website’s content (so they claim) into a print-ready format.
JavaScript & jQuery Resources
FitText – Automatic Fluid-sizing Text
I love this script. It lets you ensure that your headlines stay big no matter what browser size their viewed in. Visit the site and resize your browser window, you’ll see why fluid font-sizing is pretty badass!
Dynamic Drive
A great place to look for pre-made scripts. Most come with tutorials on how to get them setup.
Simply the Best
Another directory of scripts.
jQuery Timeline Animations
Create a “slideshow” with jQuery. This script could literally replace thousands of Flash banners on the Internet today.
jQuery Quickstand Filtering
Touch up any page that should have sorting options. A nice, visual way to reorganize content on page.
Expandable Stickybar
Stick this in the footer or header to grab the user’s attention. When they scroll over it, it’ll expand displaying whatever content you include.
JavaScript shopping solution. Lightweight!
Ready to have a simple e-commerce system up and running in less than 10 minutes? This is your best option.
Google Cart, Checkout, and Inventory System
Google’s instructions on how to setup a Google Checkout store, including on-page shopping cart and inventory tracking system via Google Spreadsheet (Google Docs / Google Drive).
WordPress Resources
How to configure W3 Total Cache
A great walk-through on how to configure W3 Total Cache plugin for WordPress. This plugin can reduce your webpage’s loading times drastically if it’s utilized correctly.
Are You Human, the “new” CAPTCHA
Get rid of your traditional CAPTCHA and make form validation “fun” for your users.
My Favorite WordPress Plugins
A list of my personal favorite plugins for WordPress.
Joomla Resources
Joomla Extensions
The official directory of Joomla extensions. There are 1000s of free plugins listed in here. Turn your Joomla site into a real estate listing site, business directory, or anything else imaginable.
JoomlaShack – Premium Joomla Themes
A great place to buy premium themes for Joomla.
YOOTheme – Premium Joomla Suite (Themes & Plugins)
These guys make some sick templates for Joomla (and WordPress.) The price may seem steep, but they release a new theme every month and you have years of backlog to dig through. Every penny well worth it.
Got one to add?
My collection is never complete. I’m always looking to add new bookmarks to my collection of Development / Web design links. Share some with me in the comments!
List updated: June 23rd, 2012.
Add Dan Bochichio on Google+
