There’s a fair bit of tedium and redundancy that goes into the set up of a new site. Most web designers start with the same tasks like reseting all default margins, padding, and other values to a common baseline for cross-browser support, you define your layout, wrestle with type, maybe even set up a print style sheet. We often find ourselves repeating what we’ve already done many times over on other projects. Blueprint, a recently released CSS framework created by Norwegian student Olav Frihagen Bjorkoy, seeks to eliminate this common tedium by providing a concise set of style sheets that make setup and design quick and easy.
read on »
Whether you are looking for high quality free fonts, indespensible CSS techniques, tutorials on development topics ranging from Ajax to XHTML, you will find the ultimate resource to nearly every facet of web design at Smashing Magazine. The breadth and depth of resources this site offers is staggering. They choose a topic, then find everything on the web that is worth reading about it. It’s not the indiscriminate list of everything, its the list of everything useful.
Another site that is equally as useful to any web designer is Web Design From Scratch. This site touches on each major topic of the planning, design, and development process of a professional web site, offering clear explanations and real world examples that make each point clear.
I ran across a very useful collection of compressed versions of popular JavaScript libraries today, including Scriptaculous, and Prototype. The Prototype library compresses down from 70k to 30k, which is pretty impressive. I’m becoming more persuaded daily that MooTools is a better option, though, as it offers you the ability to pick and choose which pieces of the library you wish to download, and offers compression on your custom built package resulting in vastly smaller file sizes than the Scriptaculous/Prototype combo.
If you want to compress your own JavaScript or CSS, there are a host of utilities out there for just this task. See comments on this blog post for a laundry list of options.
Most people run their web sites on one of the many inexpensive shared hosting servers running a LAMP environment. If you are like me, you probably have a number of domain names registered, perhaps all parked on the same server pointing to the same site. It would be great to split things up, though, to point one domain to a particular site on your server, and other domains to their own site. Apache lets you do this using a special .htaccess file, which configures the server software on the fly. You can set up unique sites in their own directory on your server, and then direct Apache to point requests for a particular domain to that folder. Let’s assume the domain you want to redirect is called “somedomain.com”, and the folder on your server where the site files reside is called “somedomain”. Create a plain text file with a text editor and add the following to it:
RewriteEngine On
Options +FollowSymlinks
RewriteBase /
RewriteCond %{HTTP_HOST} somedomain.com
RewriteCond %{REQUEST_URI} !somedomain/
RewriteRule ^(.*)$ somedomain/$1 [L]
If you are on a Mac or Linux machine, you will need to save the file as something like htaccess.txt so the operating system does not hide the file (.htaccess is a special name the operating system recognizes, and will try to interpret the commands within). Upload the file to the root directory on your server (sometimes called, htdocs, public_html, or www among other names). Rename it .htaccess, then try accessing somedomain.com in a browser. It should direct your request to the files within the somedomain folder transparently, giving the effect of multiple domains with their own site running on the same shared hosting environment.
Properly notifying the major search engines of the various pages on your site can further improve the organic search engine traffic to your site. A common XML standard has been adopted by Google, Yahoo!, and MSN that makes mapping your site and getting the word out quick and convenient. There are a number of ways to build your XML sitemap, the most tedious of which is by hand. Mac users can use the Rage Google Sitemap Automator, which can not only generate the file for you just by providing the URL to your site, but it can even upload the file to your server and ping Google to let them know where the file is. Notifying Yahoo! has to be done manually via their Site Explorer tool, but the file doesn’t need to change at all. MSN is running behind trying to get a submission site set up, so although they are 100% behind the sitemap protocol, there is no means to submit your file.
WordPress users will be happy to know that an amazing Google Sitemap Generator plugin exists to create and submit your sitemap.xml to Google directly from your admin panel. Installation is simple, but a video tutorial has been created to walk your through the process should you get confused. The file it creates is also fine to submit to Yahoo! for indexing, making publicizing the structure of your site effortless.
It’s Christmas time, and you are probably compiling your lengthy wish list of stuff you want from Amazon.com, or other popular web sites. The problem is when you try to share links with your family/friends to the must have things on your list the URLs are usually a cumbersomely long length, and not very convenient for sharing. There’s a simple solution, and it’s called Tiny URL. This handy little utility will convert the massive URL you paste into it to a short URL that is easier to work with. They even have a bookmarklet you can add to your browser’s bookmark tool bar to make converting URLs fast and easy.
Recently I’ve been talking a bit with my students about the role of accessibility in their internships/jobs in the web world, and many have said that their employers don’t see a lot of value in it for their site. I found that a bit surprising as so many evangelists have been actively promoting the benefits (a broader audience, search engine optimization, increased support for PDAs/phone display, usability conveniences for all) and ease of writing accessible code. As a teacher of Interactive Design, I have some power to change this thinking by teaching my students the value of accessibility and how to build it into their projects. Below is a bit of an accessibility round up of a few useful tools, articles, sites, and informative podcasts about the topic that may help inform/convince you about the importance of accessibility.
- Web Accessibility: Web Standards and Regulatory Compliance, a great book from the Friends of Ed with a host of authors who are authoritative on the subject of accessibility. This book has everything you need to know to get started on accessible web design.
- Zeldman on Accessibility: Zeldman does a great job of presenting and counter arguing the major complaints you’ll hear when you bring up the topic of accessibility with you boss. My favorite quote from this presentation: “Google is the biggest blind user on the web”
- Accessify.com tools and wizards for building accessible forms, tables, popup windows, and more. These tools are awesome!!
- Ajax and Screen Readers: When Can it Work? Although web standards are being rapidly adopted by modern browsers today, many screen reader manufacturers have yet to jump on the band wagon. Subsequently, there are no solid solutions for how linearized pages in a screen reader can inform a user when the page has been updated by Ajax. If the reader has passed the area where Ajax will post a response, the browser will never notify the reader of the new content. James Edwards exposes the real issues with Ajax and accessibility in this article.
- Patrick H. Lauke of the Web Standards Project interviewed on Web Axe podcast. Lauke is a brilliant guy who is championing the cause to get screen reader manufacturers on board with web standards. He has some great observations in this podcast including how Flash can actually fill some accessibility needs! You may also want to check out the main Web Axe site and podcast.
- Paul Boag of Boagworld.com has a number of podcasts on the topic of accessibility: Understanding Accessibility Guidelines, Pragmatic Accessibility, Web Accessibility
- It’s no surprise that A List Apart has a host of wonderful articles that explore the big picture and intimate details of accessible web design
- Adobe has a resource center with articles, templates, and other stuff to help you develop accessible content using Flash, Dreamweaver and the rest of their software.
- Dive Into Accessibility is a wonderful site with clear explanations of what accessibility is, what it can do for you and your users, and how to build accessible content.
- Now that you are on board with accessibility, how the hell do you “sell” it to your clients or boss?
- Validate your pages against accessibility guidelines at Bobby Watchfire or Cynthia Says. You can validate against WCAG or Section 508 receiving a priority 1, 2, or 3 seal of approval.
- Joe Clark,
a member of the Web Standards Project, is one of the top evangelists of web accessibility, and his site has some great information on the subject. You may also be interested in what he has to say about the WCAG 2.0 guidelines.
Adobe has recently introduced Labs.Adobe.com where they introduce valuable tools and get feedback from users about their initial releases of some of their products. I recently wrote about their handy Spry Framework, which looks like the easiest to learn JavaScript framework on the market. They have also released one of the best color palette generation utilities I have seen to date entitled kuler. Kuler takes cues from many other popular color palette utilities, and in many ways ups the ante. It emulates the community sharing of palettes seen at Colour Lovers (by the way, they have a new site), offers all of the palette options for analogous, monochromatic, complimentary, and triadic systems seen on Color Scheme Generator 2, and allows you to mix and copy RGB, Hex and CMYK values like Color Mixers. Kuler displays swatches in large areas on a dark background allowing you to see them much better than its competitors. It’s a beautiful system, and a great asset to any designer operating in any medium.
As a bonus, they also offer some useful links to color theory resources in the links section.
