Create a Web site with unscannable copy and get each page to rank for at least 2 expressions. Create a Web site without using targeted keywords in your copy and get each page to rank for at least 2 expressions. Create a web site using tables for page layout, ensuring that the text is linearized, and get each page to rank for at least two expressions. Inspire 5 other sites to link to a press release WITHOUT using a press release distribution service AND without asking for links. Compare your server log referrals for Yahoo! and Microsoft Search to your Google Analytics referral data for those search services. Create a splash/intro page. Use only Flash or only an image (no embeds) and promote it to the top of four (4) competitive queries. Obtain 10 FREE 1-way, value-passing links from separate domains that you don’t own for a single site in one hour without using link dropping scripts, forum signatures or posts, blog comments, or social media sites. Reverse the polarity of your Web site. If it’s mostly graphics, make it mostly text. If it’s mostly text, make it mostly graphics. If it’s mostly user-generated content, make it mostly your own unique, coherent, original content. If it’s not mostly UGC, make it mostly UGC. Create a schmuck list. Add to it every time you come across someone who posts self-promotional comments on blogs, forums, or social media sites; every time you read a blog post from someone who equates blogs with social media; every time you come across someone who says links are the most important part of SEO; every time you see someone attribute TrustRank to Google. Add yourself to the list each time you agree with the schmucks until you learn to stop being a schmuck. Find 3 active SEO forums where people don’t talk about Google PageRank updates. Write down your 10 best previously unshared SEO tips, tricks, techniques, or tactics. Lock the list away and never share it on the Web or at a conference. Register a domain. Write a humorous essay on how to brush your teeth, or how to wash your car, or how you felt the first day of school. Put the essay on the domain. Forget about the site. Create a Web site in a language you’ve never used before. Get the Web site indexed in appropriate search engines. Get the site to rank for at least 2 expressions. Write an essay or tutorial on SEO. Do not discuss on-page factors, links, or social media. Ask 3 kids aged 7-10 what their favorite sites are and why they like those sites. Ask 3 kids aged 25-30 what their favorite sites are and why. Find 3 points in common between the 2 groups. Design a new navigation system for your Web site. Install it without removing the old navigation system. Create a forum signature that links to one of your competitors’ sites in a flattering, sincere way. Find 10 obscure, well-written Web sites that are NOT blogs and which contain thoughtful articles that interest. Send an email to each site owner that sincerely compliments their site 5 times. Use 250 words or less. Do not mention your own site or explain what you do. Create a 10-doorway page site. Get the pages to rank in Google without invoking a penalty or filter. Web development is a broad term used to describe any sort of programming related to websites (or web-based applications), for example: the process of building a website. When it comes to websites, web development is the stage where we build the website according to a given design. Web development is broken down into two areas: front-end development and back-end development. Front-end developers are a mix of a designer and a back-end developer. They are responsible for turning designs into a web site, user interface and JavaScript widgets. Back-end developers generally have no artistic ability and have not seen the light of day since they first turned on a computer. They spend their spare time watching Star Trek and coding Nintendo DS emulators. Back-end developers are responsible for programming into existence all the functions of your web site that it's users will experience but never see - XML parsers, elaborate product databases, eCommerce integrations etc. Front-End Development Front-end development begins by turning a design template (usually a single image) into code (HTML and CSS) - this forms the foundation of your website. This is the easiest stage of web-development (it only gets harder herein), but also one of the most crucial (as we'll explain below). Amazingly, the majority of web developers will simply use a WYSIWYG editor like Dreamweaver to 'automatically' convert your design into HTML. This is little more difficult than using Microsoft Word and results in an utterly unprofessional end product. Web sites that have been constructed in a WYSIWYG editor will suffer from all of the following: Spaghetti code (messy and bulky code): making the website generally difficult to update and maintain Pages will not be search engine friendly: any future SEO work may require completely re-coding the entire website Code will gradually get worse: updates to the site will cause degradation to already low quality HTML Pages will not comply to Accessibility Standards: this ultimately reduces your target audience Generated code will contain errors: this will cause cross-browser incompatibility and confuse search engines, again reducing your target audience Shockingly, most websites on the website suffer from a few or all of the problems above. Industry statistics indicate that well under 1% of the number of sites on the internet that have a solid HTML foundation. Most web developers today still opt for the lazy approach and use code generators to create supposedly "professional" websites. At Fyneworks, we take the care to 'hand code' every single inch of of your website to absolute perfection using scalable, semantic and standards-compliant code. Our code is: ...minimal: as a result the pages are easy to manage and update ...structured: the website is built upon a scalable frame work and can easily be expanded ...SEO friendly: your content is presented to search engines in the best possible way ...error-free: making the website compatible with major web browsers ...compliant with industry standards: the website will continue to be compatible with web-browsers in the future There are many other benefits to having a perfectly coded website, some of which are: Compatibility - all screen resolutions, browsers and operating systems Scalability - the website can be easily expanded Portability - the website is not bound to its creator, any other developer can easily understand and modify the code Reach - Maximize your target audience Long-term savings - Easier to update & maintain, reducing running costs Once your design has been meticulously put into HTML, the next stage is to add all the required features and facilities to the user interface. This job consists of anything from slide-shows to contact forms or more advanced facilities such as a real-time quoting system. Back-End Development Once a project has been through front-end development it is handed over to a back-end developer. This is the stage where all the 'behind the scenes' work goes on - the front-end of the site is connected to programming functions and databases that will make the web site actually work. We have knowledge of and can support development using the following: Markup: HTML & XHTML, XML, RDF. Stylesheet: CSS, XLST. Syndication: XML, Atom, RDF, ROR, JSON, TXT, CSV, TSV. Server-side Programming: ASP (VBScript / JavaScript), ASP.Net (Visual Basic), PHP 4 & PHP 5, Visual Basic. Client-side Programming: Javascript, AJAX, JSON, jQuery. Databases / Query Languages: MS SQL Server, MS Access, MySQL. SEO Specific: Google Sitemaps, Google Feeds, Yahoo Sitemaps. Miscellaneous: mod_rewrite (Apache servers) 1.) A user’s experience is largely affected by your website design. The atmosphere of a website is built from the combination of many small details (icon styles, gradients used, shadows, element padding, and more). Taken separately, these details seem unimportant, almost frivolous, but worked on in the context of the larger site design concept, these details subsequently add up to a singular user experience. Thus, you should be very detail-oriented when coming up with concepts and when constructing all the separate elements of a website. This applies to any website or design. Even plain or seemingly empty designs can have a lot of detailed touches. In fact, such a design may even rely more on consistency and quality in its details, as that design has little else within which to establish its identity. 2.) The color scheme for your website helps establish an identity for you, your business, or product. Try to stick to only two major colors (blue and white is the most commonly used color combo, but certainly not the only one.) For example, Noam Design’s own site works with green and black. You can use a three-color combination as a design scheme, but keep in mind that a two-color combo will invariably involve a third color when assigning a color to the website’s content. (For example: the text on Noam Design is white or grey.) The use of only two or three colors in an overall design scheme goes a long way towards focusing the user onto the site’s content, and immediately establishes the identity of that website or the business reflected in that site. A limited color scheme is a bold, direct statement. 3.) Speaking of focusing the user…each page on a website should be anchored by a singular element in order to focus a visitor. Think about what information should be first presented to a visitor and make that it is the most immediately visible. Don’t place main elements of this nature down the page. If a user has to scroll down to find the focus, then it’s not the focus. Anchoring the page with a focus is also useful for avoiding informational and/or design clutter on a website. A user must be able to quickly ascertain where they want to go, what links they want to click, where their information is, etc. Both Google and Yahoo are extreme examples of this. Google sacrifices almost all other information in preference to focusing a user on the search field. Yahoo, on the other hand, piles all of its features on its front page, but still provides its iconic logo and search function at the top, immediately visible and larger than all other elements, to focus the user on the primary goal of the site. The elements themselves should also be designed with focus in mind. The more important the information contained in the element, the larger it should be. Think bigger fonts or other ways to differentiate your information. Don’t get too crazy, though. In general, a clean and uncluttered site is the golden rule in web design. 4.) One of the most important design characteristics to maintain is a sense of consistency. This goes hand in hand with the above design basics. The design, color scheme, and details of your website should remain consistent throughout the entire site. Navigation bars or menus should remain present wherever a user goes. Effects and design details, large or small, should function the same way on every page. When spacing or padding elements, always maintain the same distance between them. This contributes to the overall style of the website. Your website is consistent and clear in its design, but is it visible to the internet at large? Good SEO practices are (or should be) interwoven with web design. Practice optimization in addition to design and you’ll make it easier for you or your clients’ site to remain prevalent in search engine results. 1.) Use title tags for all links. This improves the user’s experience (they know where they’re going before they click) and makes it easier for Google as well. 2.) Use friendly URLs. The name of the URL in a website should always be related to the page it represents. This makes it more recognizable to visitors and easier to categorize in Google searches. If you have a page name that is several words, separate them with a dash or an underscore. 3.) URL redirects. URLs without a “www” in the beginning should ALWAYS redirect to a “www” address. Not only is this the industry standard, but you risk losing half your inbound links (and thus your Google page rank) if you do not do this. Google will often read a site without the www as a different site than the one with the www. You can avoid this split with a redirect. 4.) Content-wise, try and keep to one topic per page. This helps in delineating a singular page title, description, and URL. (Again, making it easier for Google to index your site.) You should follow this when designing and implementing headings, as well. The H1 tag should be used very sparingly; preferably only to mark the applicable topic. Use H2 and H3 tags for the sub-headings (and sub sub headings, etc.) 5.) /index pages aren’t necessary (ditto for /home). For example: “www.mysite.com” should be your index, there is no need to redirect. If you have an image or announcement you need to put before the index, that can be accomplished just as well with Javascript, which has the upshot of increasing the interactivity of the site. Interactivity Interactivity is a great way to keep a user on your website and is something to keep in mind while designing your website. Always try to increase user interactivity in everything you do! 1.) Include calls to action (Buy Now! Click Here!) and keep those calls to action prevalent, repeated, and consistent through the site. 2.) Interactivity can be on both large and small scales. Make sure images and links have titles and alt tags, so a user has them pop up whenever they mouse over (this also helps with SEO). Consider other mouse-over effects where applicable, as well. On the smaller end of the scale, make your menus in four states: Regular, Current, Hover, and Down/Clicked (or Active, if you use that term). Pages within the site can be made so they open in a JavaScript window while keeping the originating web page viewable. (A good example is the Contact Us field on the Noam Design website. Or RSS feeds on the My Yahoo sites.) This can be accomplished with a Javascript “lightbox”. However, you should always attempt to use CSS when adding interactivity to elements, pages, or the site. As opposed to CSS, Javascript will tax a browser’s memory and make the page load slower, so use CSS unless Javascript is necessary. You can also use Flash and combinations of CSS, Javascript, and Flash, but again, only when necessary. (A note for developers: keep CSS and Javscript code and/or files external, with CSS stationed on top and Javascript on the bottom.) Load Speed Interactivity is intertwined with your website’s loading speeds. Both function to keep a user interested and both should be kept in mind when designing a website! 1.) Another golden rule: A website should always load as quickly as possible, regardless of content or programming. You always want to reduce the number of HTTP requests. Big sites with rich images can be a hindrance to this, so combine images wherever possible. Use CSS as a background positioner, with separate divs. (Don’t use tables.) A good example of this can be found in the Noam Design website menu. Notice that it is one image that contains all four states of each link, instead of several images. (In general, you should do this with any website menu.) Another example of this can be found when you do a Google search. Many various icons and images come up, but the page itself only contains three images! In this manner, Google maximizes the efficiency of their site, allowing it to always load quickly for millions (perhaps billions) of user’s worldwide. 2.) Once you’ve combined your graphics into one image, the file size of an image itself can be reduced by utilizing Photoshop to save images as .png8’s. When making an image to be saved as .png8, make sure you’re only using 8 colors, as the png8 format doesn’t use gradients. Always design icons and images for .png8, as it usually provides the most quality for the smallest file size. A sharp website and iconic design can still be accomplished in this manner. If you want proof, just visit Apple’s website. Almost every image there, including their iconic logo, is a .png8 file. The reason we insist on this format is because it avoids cross-browser compatibility issues. 3.) If you need to create an image that utilizes gradients, transparency, or opacity effects, use the .png24 format (or true png, as it might be called). You can also save these images as .jpegs, but check to see how large the file will be first. In most cases, saving as a .png24 will provide a smaller file with no quality loss. 4.) Flash loaders should always be as unobstrusive as possible. Pre-load only what you need when utilizing Flash. Have the rest of the elements load on demand. Do you see yourself as a non-creative individual? Do you want to learn to effectively design and create sharper and more successful websites and graphics from the ground up? This course will teach the basics plus a whole lot more to help get you on the road to creating, designing and implementing solid designs for the web! In this introductory course, basic design thinking, theory and practice will be explored in an easy to absorb, fun and relaxed environment. Students will begin by understanding and implementing the foundations of design: the basic elements and principles of design. These elements and principles are applicable to all design mediums such as architecture, art, graphic design, photography, print and web design. Special emphasis will be given to the application of these principles and elements, along with color and typography, to the medium of web design. For students who have not had formal training in design, this course will bring them up to speed with the fundamentals of design, while learning how to apply these concepts to web and graphic design. For students who have received previous design training, this course will offer new techniques, tips and tricks, and new ways of thinking of design fundamentals while applying these concepts to the electronic mediums of web design and graphics for the web. Week 1: Defining design, an introduction and history of design, and the first set of elements and principles of design * Defining design. * A brief introduction and history of design. * Principles and elements: Understanding the differences. * Understanding the first set of principles of design: unity/variety, hierarchy, proportion, and scale. * Understanding the first set of elements of design: shape, space/whitespace, line, and size Week 2: The role of a designer, differences between web and print design, and second set of elements and principles of design. * Discussion: The role of a designer in the construction of functional website. * Discussions: Design is a process that has a clear beginning and end. * A brief synopsis of the differences between print and web design. * Understanding the second set of principles of design: balance, rhythm/repetition, proximity, and emphasis. * Understanding the second set of elements of design: color, texture/pattern, value, and typography. Week 3: Exploring pattern and texture, classical rules of composition, and value. * Exploring and using texture and pattern. * Discovering the classical rules of composition Part I and Part II: (includes leading the viewer's eye, the use of grids in design, the use of a browser enhanced grid in design, proportions and the Golden Mean and the Rules of Third). * Understanding and implementing value. Week 4: Creating and enhancing designs with color and typography. * Understanding the color models. * Exploring the technicalities of color. * Working with color creatively. * Typography Basics - Understanding typography and using it creatively. Week 5: Solidifying a design concept, generating ideas, design tips and breaking the rules. * Brainstorming techniques. * Exploring and enhancing avenues of creativity. * Design tips for designs and graphics destined for the Web. * Learning how to break the rules of design. Week 6: Finalizing the concept. * Putting the 5 weeks of work together by revising,polishing and presenting a final project, which consists of a design comp that utilizes the principles and elements of design, along with a cohesive color palette, typography, strong composition and creativity. * Peer evaluation. Prerequisites Introduction to HTML H101 or equivalent experience with HTML. Beginning knowledge of Photoshop, Fireworks or Paint Shop Pro is recommended but not required. We do go through the actions of putting a site design together throughout the course of the class. The more familiar you are with your graphics program, the more success you will have in this course. Requirements * Approaching the Learning Process: Students will gain an understanding of design and its implementation by participating in discussions, reading, written lectures and assignments that are built upon as the course progresses. Weekly lessons will include analysis of websites that make use of the basic principles and elements of design. Examples of experimental website design and more conservative website designs will be studied as well. * Software: Students will need access to a graphics program that can handle layers such as Photoshop (full version, Elements or LE), Paint Shop Pro or Fireworks. Please make sure that any trial versions of software do not contain save, feature or time limitations that can impede in your completion of the course. Knowledge of HTML coding along with an HTML editor such as Dreamweaver, Notepad, BBEdit, Arachnophobia, HomeSite or similar program will be needed to create a personal site where all assignments and class notes can be uploaded to, and accessed by, the instructor and other students. * Student Commitment: This course will cover a lot of material and it does require a serious commitment of time and energy both from students and the instructor. Students should have enough time in the week to absorb the following within the given deadlines: Experiment with new techniques, complete weekly labs, and read weekly lectures, book material and additional resources. It is not advised that students plan a vacation or heavy workloads during this course. * Programming: Students must be familiar with basic file management, how to run and navigate a computer, basic HTML, and uploading and downloading files via their web space control panel or an FTP program. Assignments will be posted via a web site generated by the student. If you are not familiar with HTML, it is advised that you take the H101 Introduction to HTML 4.0 class or that you use a WYSIWYG program such as Dreamweaver. The concept phase is the most neglected step, when web sites are developed. Sites are rebuild again and again because the functionality does not serve the users or does not benefit the business. It is totally different if a site is rebuild because the technical development introduced new features and better tools, like migrating a site from the .asp to .Net environment or upgrading to a newer and therefore better framework version. When you must rebuild your web site, because it is simply not suitable for your target audience and your brand, most of the time there is no proper web site concept. Why Create a Web Site Concept? Integrating a concept creation phase therefore saves you money on the long run and boosts popularity of your web sites, because it meets the needs of your target audience and creates a pleasant experience for your web site's users. Concept creation of a web site starts by analyzing and processing the collected information of the project design workshop and drawing up a framework from the results that serve as a guide for the project itself and the web site to be. Concept creation takes shape as described below. Communication Tasks Identification We will translate your company's brand by identifying communication tasks, defined by the expectations of your audience and will determine how this messages can best be delivered. Design Rational The brand personality, organizational associations, brand symbols and metaphors will be defined for the web site. What does this mean? Visual Orange develops the Design Rational, which is the definition of the requirements the visual design has to comply with so that it communicates the brand personality of our client's company. The Design Rational sums up the following attributes: * The color scheme which is based on the house style. * The font type which will be chosen when no consistent font usage exists. * Page lay out. * The look and feel and the imagery used to support the company's brand message. Last but not least the functionality is designed in a raw draft. The purpose of the site will pretty much define this: is it an e-commerce site, a community portal, multi-media download center? We will look at the user and how we can possibly bring these two expectations – on one side the user who brings the site to life with his expectations and wishes and on the other side our client with the company needs and expectations of ROI and the budget that is reserved for the project. Google Yahoo! Amazon.com About.com Bartleby.com Google Groups Google News CNN EBay Download.com Craigslist.org Reference.com Wikipedia.org Beliefnet.com Anywho Weather.com Search.com Hotmail.com NIH.gov CNET.com London Books Refdesk.com MayoClinic.com GuideStar.org FirstGov.gov BBC.com IMDB.com Expedia.com Slate.com Nutrition.gov Altmedicine.com Citysearch.com Monster.com Vote-Smart.org Sciam.com ESPN.com Encarta.com Findlaw.com Nature.com USA Today local AllPosters.com Time.com Mapquest.com Abebooks.com Allmusic.com MedlinePlus.gov Open Directory LOC.gov Windows Media UComics.com InfoPlease.com Alexa.com Museums UN.org Sacred Texts ArtForum.com WebMD.com VLIB.org MoneyCentral Classmates.com Europa.eu.int Yahoo! Groups NY Rev Books Jokes.com Priceline.com RottenTomatoes IPL.org AceFitness.com Quicken.com Andante.com Pauling Nutrition PCmag.com Times of London Federal Jobs IHT.com Online Books Pogo.com BizRate.com Billboard.com Translation Give.org Mathworld WebRing.org Career Builder 411.com Epinions.com Spiritual Journals ALdaily.com Nolopress.com Classical.net Blogger NYTimes.com Earthcam.com BBB.org intelihealth LiveJournal.com BBC Faith ArtsJournal TicketMaster Gutenberg.net Dafont Typenow Neatfonts Fonts Fontshop Typetester Betterfonts Veer Types Urbanfonts Creamundo Free Fonts 1001 Free Fonts My Fonts Fontifier ThinkingwithType Fontso Better Fonts Urban Fonts Font Diner YouFont Fonts by Theme Fontlet Funny Fonts Tips and tutorials W3Schools CSSBasics WebDesignfromScratch CSSMaxDesign Lighbox JS DynamicDrive Dr. Web Weblog Quickonlinetips HtmlDog 24 Ways CSSCheatSheet PositionIsEverything CambridgeInColour CSSPlay Veerle's blog Tutorialized Devlisting AdaptivePath CSSPanicGuide Pixel2life MandarinDesign Brainjar Photoshopsupport Htmlcodetutorial Sites for inspiration CSSRemix CSSElite CSSDrive CSSReboot CSSBloom WebCreme Thedesignedtree CSSZenGarden UnmatchedStyle Logopond CSSBeauty Stylegala CSSVault DesignMeltDown CSSImport Bestwebgallery Carbonmade Designshack Styleboost CSSThesis Veerle Cssmania Cssimpress Color Tools Colourlovers Color Scheme Generator ColorSchemer Steeldolphin ColorBlender Color Palette Color Scheme Tool Daily Color Scheme Ajaxload ColorMatch Redux Other cool sites Alvit's Handbook Protolize ThinkVitamin Button Maker Vecteezy Ndesign-studio Smashingmagazine Reflections Brilliant Button Maker BaMagazine Sparkl.us Ilovejackdaniels 456BereaStreet Smileycat Digital Web Web Developer's Virtual Library Brusheezy Freelanceswitch CSSOptimizer CleanCSS Icons Iconbuffet Maxpower FamFamFam Ndesign-studio Intersmash Interfacelift Pixelgirlpresents Feedicons Ajaxload FavIcon from Pics Buttonator Templates OpenWebDesign IntensivStation Mollio LayoutGala 4 templates Boxes TemplateMonster CSSZenGarden TemplateWorld Free-css-templates Solucija TemplatesBox FreeLayouts Oswd FreeCssTemplates Images, pics and logos IStockPhoto AnimationFactory YotoPhoto BlueVertigo DreamsTime Ablestock Stock Xchng Imagecatalog Traveling used to be about getting away from it all, but now, with the prevalence of business travel—as well as the trend to bring your work on family vacations—travel is often anything but a gadget-free zone. If you're traveling, you're likely to want to take your gadgets with you. Read More >> Introducing Viral Video 100 Tags: video // Posted: November 5, 2009 10:25 am // By Allan Hoffman Videos go viral on the web in the flash of a second. One minute there's a video that's been viewed by a few teen-agers and their buddies, and the next minute everyone's seen it, or so it seems. But how do you keep track of all of these videos—what's fun, what's new, and what's the latest must-see viral sensation. Read More >> Spike names 10 "manliest" home appliances Tags: gadgets, home, men // Posted: November 4, 2009 5:33 am // By Web100.com Staff Can a home appliance be manly? Sure thing. At least according to Spike, which has named the 10 manliest home appliances. Among the appliances named in the list are the iRobot Roomba, the Rosendahl Large Chef’s Knife, the Waring Pro Extreme High Powered Blender, and a variety of other items. As the post says: Read More >> Twitter's top 100 users, analyzed Tags: analytics, twitter // Posted: October 29, 2009 11:35 am // By Web100.com Staff Twitter is a trove of data, but what's data without analysis? Not much. And so Glen Allsop has provided a useful report, at The Next Web, breaking down the facts and figures and assorted stats about Twitter's top 100 users. Allsop details things like how long these users have been on Twitter, the number of people they follow, how often they post, and so forth. As he notes: Read More >> 5 intriguing facts from Hendrik Hertzberg's "One Million" Tags: book, history, offbeat // Posted: October 28, 2009 1:52 pm // By Allan Hoffman One million: There's something magical and mysterious about the number. You hear it all the time, but what is it? Can you imagine one million? Can you see one million of anything? Read More >> Top 10 email mishaps of recent months Tags: email // Posted: October 27, 2009 6:34 pm // By Web100.com Staff As a sort of fun, Halloweentime story, Proofpoint has rounded up a bunch of email horror stories. Here's what the company blog says: It wouldn't be Halloween without a few spooky stories now, would it? People seem to love our regular round-ups of email blunders, so just in time for Halloween, Proofpoint put together some of the "scariest" email-related blunders, mishaps and threats from the past few months. So what's scary about email? Quite a bit, according to Proofpoint. Here's one example: Read More >> Awesome list of awesome web conferences Tags: design, web development // Posted: October 27, 2009 6:21 pm // By Web100.com Staff So you're a pro at Drupal or Photoshop or PHP or some other web technology. Yes, you know your stuff, but let's face it: You need help staying current, staying on top of new trends, and learning about what's coming down the road. Enter the conference. In a mega-list of conferences, Smashing Magazine tells you all about conferences for web development and graphic Weblogs are a form of website. The thousands of normal website usability guidelines therefore apply to them, as do this year's top ten design mistakes. But weblogs are also a special genre of website; they have unique characteristics and thus distinct usability problems. One of a weblog's great benefits is that it essentially frees you from "Web design." You write a paragraph, click a button, and it's posted on the Internet. No need for visual design, page design, interaction design, information architecture, or any programming or server maintenance. Blogs make having a simple website much easier, and as a result, the number of people who write for the Web has exploded. This is a striking confirmation of the importance of ease of use. Weblogs' second benefit is that they're a Web-native content genre: they rely on links, and short postings prevail. You don't have to write a full article or conduct original research or reporting. You can simply find something interesting on another site and link to it, possibly with commentary or additional examples. Obviously, this is much easier than running a conventional site, and again indicates the benefits of lowering the barriers to computer use. As a third benefit, blogs are part of an ecosystem (often called the Blogosphere) that serves as a positive feedback loop: Whatever good postings exist are promoted through links from other sites. More reader/writers see this good stuff, and the very best then get linked to even more. As a result, link frequency follows a Zipf distribution, with disproportionally more links to the best postings. Some weblogs are really just private diaries intended only for a handful of family members and close friends. Usability guidelines generally don't apply to such sites, because the readers' prior knowledge and motivation are incomparably greater than those of third-party users. When you want to reach new readers who aren't your mother, however, usability becomes important. Also, while readers of your intranet weblog might know you, usability is important because your readers are on company time. (As an example, see IBM's use of intranet blogs — among the ten best intranets of 2006.) Usability Issues To reach new readers and respect your existing readers' time constraints, test your weblog against the following usability problems. 1. No Author Biographies Unless you're a business blog, you probably don't need a full-fledged "about us" section the way a corporate site does. That said, the basic rationale for "about us" translates directly into the need for an "about me" page on a weblog: users want to know who they're dealing with. It's a simple matter of trust. Anonymous writings have less credence than something that's signed. And, unless a person's extraordinarily famous, it's not enough to simply say that Joe Blogger writes the content. Readers want to know more about Joe. Does he have any credentials or experience in the field he's commenting on? (Even if you don't have formal credentials, readers will trust you more if you're honest about that fact, set forth your informal experience, and explain the reason for your enthusiasm.) 2. No Author Photo Even weblogs that provide author bios often omit the author photo. A photo is important for two reasons: * It offers a more personable impression of the author. You enhance your credibility by the simple fact that you're not trying to hide. Also, users relate more easily to somebody they've seen. * It connects the virtual and physical worlds. People who've met you before will recognize your photo, and people who've read your site will recognize you when you meet in person (say, at a conference — or the company cafeteria if you're an intranet blogger). A huge percentage of the human brain is dedicated to remembering and recognizing faces. For many, faces work better than names. I learned this lesson myself in 1987 when I included my photo in a HyperCard stack I authored that was widely disseminated on Mac-oriented BBSs. Over the next two years, countless people came up to me and said, "I liked your stack," having recognized me from the photo. Also, if you run a professional blog and expect to be quoted in the press, you should follow the recommendations for using the Web for PR and include a selection of high-resolution photos that photo editors can download. 3. Nondescript Posting Titles Sadly, even though weblogs are native to the Web, authors rarely follow the guidelines for writing for the Web in terms of making content scannable. This applies to a posting's body text, but it's even more important with headlines. Users must be able to grasp the gist of an article by reading its headline. Avoid cute or humorous headlines that make no sense out of context. Your posting's title is microcontent and you should treat it as a writing project in its own right. On a value-per-word basis, headline writing is the most important writing you do. Descriptive headlines are especially important for representing your weblog in search engines, newsfeeds (RSS), and other external environments. In those contexts, users often see only the headline and use it to determine whether to click into the full posting. Even if users see a short abstract along with the headline (as with most search engines), user testing shows that people often read only the headline. In fact, people often read only the first three or four words of a headline when scanning a list of possible places to go. Sample bad headlines: * What Is It That You Want? * Hey, kids! Comics! * Victims Abandoned Sample good headlines: * Pictures from Die Hunns and Black Halos show * Office Depot Pays United States $4.75 Million to Resolve False Claims Act Allegations (too long, but even if you only read the first few words, you have an idea of what it's about) * Ice cream trucks as church marketing This last headline works on a church-related blog. If you're writing an ice cream industry blog, start the headline with the word "church" because it's the information-carrying word within a context of all ice cream, all the time. In browsing weblog headline listings to extract these examples, I noticed several headlines in ALL CAPS. That's always bad. Reading speed is reduced by 10% and users are put off by the appearance of shouting. 4. Links Don't Say Where They Go Many weblog authors seem to think it's cool to write link anchors like: "some people think" or "there's more here and here." Remember one of the basics of the Web: Life is too short to click on an unknown. Tell people where they're going and what they'll find at the other end of the link. Generally, you should provide predictive information in either the anchor text itself or the immediately surrounding words. You can also use link titles for supplementary information that doesn't fit with your content. (To see a link title in action, mouse over the "link titles" link.) A related mistake in this category is to use insider shorthand, such as using first names when you reference other writers or weblogs. Unless you're writing only for your friends, don't alienate new visitors by appearing to be part of a closed clique. The Web is not high school. 5. Classic Hits are Buried Hopefully, you'll write some pieces with lasting value for readers outside your fan base. Don't relegate such classics to the archives, where people can only find something if they know you posted it, say, in May 2003. Highlight a few evergreens in your navigation system and link directly to them. For example, my own list of almost 300 Alertbox columns starts by saying, "Read these first: Usability 101 and Top Ten Mistakes of Web Design." Also, remember to link to your past pieces in newer postings. Don't assume that readers have been with you from the beginning; give them background and context in case they want to read more about your ideas. 6. The Calendar is the Only Navigation A timeline is rarely the best information architecture, yet it's the default way to navigate weblogs. Most weblog software provides a way to categorize postings so users can easily get a list of all postings on a certain topic. Do use categorization, but avoid the common mistake of tagging a posting with almost all of your categories. Be selective. Decide on a few places where a posting most belongs. Categories must be sufficiently detailed to lead users to a thoroughly winnowed list of postings. At the same time, they shouldn't be so detailed that users face a category menu that's overly long and difficult to scan. Ten to twenty categories are appropriate for structuring many topics. On the main page for each category, highlight that category's evergreens as well as a time line of its most recent postings. 7. Irregular Publishing Frequency Establishing and meeting user expectations is one of the fundamental principles of Web usability. For a weblog, users must be able to anticipate when and how often updates will occur. For most weblogs, daily updates are probably best, but weekly or even monthly updates might work as well, depending on your topic. In either case, pick a publication schedule and stick to it. If you usually post daily but sometimes let months go by without new content, you'll lose many of your loyal — and thus most valuable — readers. Certainly, you shouldn't post when you have nothing to say. Polluting cyberspace with excess information is a sin. To ensure regular publishing, hold back some ideas and post them when you hit a dry spell. 8. Mixing Topics If you publish on many different topics, you're less likely to attract a loyal audience of high-value users. Busy people might visit a blog to read an entry about a topic that interests them. They're unlikely to return, however, if their target topic appears only sporadically among a massive range of postings on other topics. The only people who read everything are those with too much time on their hands (a low-value demographic). The more focused your content, the more focused your readers. That, again, makes you more influential within your niche. Specialized sites rule the Web, so aim tightly. This is especially important if you're in the business-to-business (B2B) sector. If you have the urge to speak out on, say, both American foreign policy and the business strategy of Internet telephony, establish two blogs. You can always interlink them when appropriate. 9. Forgetting That You Write for Your Future Boss Whenever you post anything to the Internet — whether on a weblog, in a discussion group, or even in an email — think about how it will look to a hiring manager in ten years. Once stuff's out, it's archived, cached, and indexed in many services that you might never be aware of. Years from now, someone might consider hiring you for a plum job and take the precaution of 'nooping you first. (Just taking a stab at what's next after Google. Rest assured: there will be some super-snooper service that'll dredge up anything about you that's ever been bitified.) What will they find in terms of naïvely puerile "analysis" or offendingly nasty flames published under your name? Think twice before posting. If you don't want your future boss to read it, don't post. 10. Having a Domain Name Owned by a Weblog Service Having a weblog address ending in blogspot.com, typepad.com, etc. will soon be the equivalent of having an @aol.com email address or a Geocities website: the mark of a naïve beginner who shouldn't be taken too seriously. Letting somebody else own your name means that they own your destiny on the Internet. They can degrade the service quality as much as they want. They can increase the price as much as they want. They can add atop your content as many pop-ups, blinking banners, or other user-repelling advertising techniques as they want. They can promote your competitor's offers on your pages. Yes, you can walk, but at the cost of your loyal readers, links you've attracted from other sites, and your search engine ranking. The longer you stay at someone else's domain name, the higher the cost of going independent. Yes, it's tempting to start a new weblog on one of the services that offer free accounts. It's easy, it's quick, and it's obviously cheap. But it only costs $8 per year to get your personal domain name and own your own future. As soon as you realize you're serious about blogging, move it away from a domain name that's controlled by somebody else. The longer you delay, the more pain you'll feel when you finally make the move. Learn More * I cover a much broader set of usability guidelines in the full-day tutorial on Fundamental Guidelines for Web Usability at the annual Usability Week conference. * 2 full days of tutorials on writing for the Web. * Full-day course on Integrating Social Features on Mainstream Websites. * Research findings from usability testing of Twitter, Facebook, MySpace, and LinkedIn: Streams, Walls, and Feeds: Distributing Content Through Social Networks and RSS. * Social Networking on Intranets: "Enterprise 2.0" features, including employee blogs and CEO blogs. * Research findings from usability testing of email newsletters. * Usability problems in comment threads from our testing of company blogs. Other Top Ten Lists: * The ten very worst Web design mistakes of all time Summary based on the main elements of the other lists. * Web design mistakes (1996) My first list. Luckily, many of these mistakes have been fixed by now. * Web design mistakes (1999) * Web design mistakes (2002) With cartoons. * Web design mistakes (2003) * Web design mistakes (2005) * Good deeds in Web design * Top homepage usability guidelines * Most violated homepage guidelines * Usability in the Movies — Top 10 Bloopers * 10 High-Profit Redesign Priorities * Application design mistakes When analyzing Web design, it is easy to identify a large number of mistakes that reduce usability: * the original top-ten mistakes of Web design * the top-ten new mistakes of Web design * the top-ten mistakes of Web project management It is much harder to say what good things to do since I have never seen a website that was truly stellar with respect to usability. The best major site was probably amazon.com as of late 1998, but during 1999 Amazon declined in usability due to the strategy of blurring the site's focus. Of course, articles that list 30 mistakes can be seen as constructive criticism and a prescription for 30 things to do in a Web project: design to avoid each of the mistakes! Here's a list of ten additional design elements that will increase the usability of virtually all sites: 1. Place your name and logo on every page and make the logo a link to the home page (except on the home page itself, where the logo should not be a link: never have a link that points right back to the current page). 2. Provide search if the site has more than 100 pages. 3. Write straightforward and simple headlines and page titles that clearly explain what the page is about and that will make sense when read out-of-context in a search engine results listing. 4. Structure the page to facilitate scanning and help users ignore large chunks of the page in a single glance: for example, use grouping and subheadings to break a long list into several smaller units. 5. Instead of cramming everything about a product or topic into a single, infinite page, use hypertext to structure the content space into a starting page that provides an overview and several secondary pages that each focus on a specific topic. The goal is to allow users to avoid wasting time on those subtopics that don't concern them. 6. Use product photos, but avoid cluttered and bloated product family pages with lots of photos. Instead have a small photo on each of the individual product pages and link the photo to one or more bigger ones that show as much detail as users need. This varies depending on type of product. Some products may even need zoomable or rotatable photos, but reserve all such advanced features for the secondary pages. The primary product page must be fast and should be limited to a thumbnail shot. 7. Use relevance-enhanced image reduction when preparing small photos and images: instead of simply resizing the original image to a tiny and unreadable thumbnail, zoom in on the most relevant detail and use a combination of cropping and resizing. 8. Use link titles to provide users with a preview of where each link will take them, before they have clicked on it. 9. Ensure that all important pages are accessible for users with disabilities, especially blind users. 1. Email Newsletters Email newsletters let you maintain a relationship with your customers that lasts beyond their visits to your site. The newsletter is the perfect website companion because it answers a different user need: newsletters keep customers informed and in touch with the company; websites give customers detailed information and let them perform business transactions. Newsletters are fairly cheap. They require little technology and mustn't be published too frequently. If you don't have a newsletter, then publishing one is probably the single-highest ROI action you can take to improve your Internet presence. If you do have a newsletter, then improving it according to research findings will likely make it several times more valuable to your organization. (Most of the newsletters we've tested failed to meet users' expressed desire for good communication.) Newsletters have one more benefit: they are the primary way to liberate your site from dependence on search engines. In the long run, achieving this liberation is one of the most important strategic challenges facing Internet managers. 2. Informative Product Pages The product pages on e-commerce sites, marketing sites, and B2B sites all suffer from information deficit. It's rare to see product descriptions that tell prospects everything they need to know to make a purchasing decision. In my recent book, I present data showing that poor product information accounted for 8% of the usability problems on the websites we tested. Even worse, poor product information accounted for 10% of the user failures (that is, cases where users gave up, as opposed to "just" being delayed or annoyed). Designing product pages according to user needs is a highly targeted way to encourage sales at a point where users have already indicated interest by virtue of visiting the page. You need detailed product information, but it must be written in a way that makes sense to people who aren't experts in your field. For example, on the product page for a laptop, don't be like Dell and tell people that the screen is "WSXGA+." Tell them it's 1680 x 1050 pixels. (Be honest: did you know this? And you're probably five times as geeky as a normal person.) Or, better yet, be like Apple and show different screen resolutions next to each other so users can see how much data is visible with each. 3. High-Quality Photography One of the simplest ways to improve product pages is to show better photographs. For the hero shot at the top of the page, show the most representative photo in a small size. Below that, offer several additional photos that show different angles and close-up details. Also, remember mistake #10 of the top-10 Web-design mistakes of 2005: linking from small pictures to pictures that are only slightly bigger. Instead, link to photos that are as close to full-screen enlargements as possible. Using huge enlargements might seem to contradict the guideline about fast response times for downloading Web pages. But there's a big difference between bloating a navigational page with irrelevant graphics and showing a big photo after the user asked for it. In the first case, the slow download interrupts the user's flow. In the second case, the delay is expected, and while delays are never welcome, they are less of a problem when they're clearly necessary to fulfill a user request. A great downside of the online medium is that people can't touch and feel your products. But close-ups and quality photographs can still give users a good approximation of a product's tactile qualities, and they are essential to making people feel good about buying online. For software products or online services, show full-resolution screenshots instead of photos. 4. Product Differentiation and Comparisons You must soothe user fears about buying the wrong product, or they'll postpone their purchases and probably never buy from your site. When you have multiple products in the same category, you must explain product differences so clearly that it's obvious to people without industry expertise why they should buy one particular product over the others. Product differentiation is obviously easier for companies that simplify their product lines in the first place. Why offer many different products with virtually no true differences? For example, Dell has four different models of laptops: Inspiron, Latitude, Precision, and XPS, several of which are available in six different trim lines. If there's a clear difference between the models, it's not explained well on the website. Even if you have a small and clearly defined product line, you must make the differences blatantly obvious on your site. Comparison tools can also help users choose and thus overcome decision paralysis and facilitate sales. But such tools work well only when they illustrate key differences in a concise and unambiguous manner. Too often, websites take the easy way out and simply throw up a huge table of specifications without highlighting the points where products differ. 5. Support for Reordering I've already mentioned the best way to get repeat business: offer an email newsletter, which will keep customers thinking about you even when they're not ready to buy. Then, when they want to spend money, they'll remember you. To make people spend more money, make it easy to reorder. People often need the same things again and again. Why require them to navigate five levels down your site each time? In B2B, customers often need to order supplies, spare parts, or accessories for equipment they've already bought, so you should also facilitate those types of supplementary orders. In one of our studies last month, test participants especially appreciated it when FreshDirect, an online grocer, let them reorder from their previous shopping lists. Reordering is a matter of total user experience, beyond the website's user interface. Compose your product line with a view toward reordering. Continue to carry classic products so that people can order new copies of things they like. If you need to launch new products, keep sizes and similar parameters the same. For example, a customer who bought a sweater last year should be able to buy this year's model in the same size and be guaranteed that it'll fit equally well. Keeping sizes identical is much more important for etailing than for the physical retail channel, where customers can try things on before buying. 6. Simplified Text You can usually double website or intranet usability simply by rewriting the text to follow the guidelines for online content. Better writing is probably the single most important improvement you can make to your site, but it appears fairly far down the top-10 list because it's not a one-time fix. You must hire good writers for all your projects, train them in writing for the Web, and have all of their content edited by even better editors who are even more knowledgeable about content usability. Expensive though they may be, editors are always worth the cost. 7. Catering to Seniors Older people are the fastest-growing segment of Internet users. In fact, they are virtually the only remaining growth market in rich countries, where most of the younger people who want to get online already have accounts. Many senior citizens are rich and have time on their hands. When it becomes difficult for them to get around, the Internet becomes a natural place for them to spend some of their vast piles of money. Seniors are also less into piracy and tend to be more loyal than fad-chasing young people. Best of all, you can take advantage of the fact that most websites discriminate horribly against older users. Even government websites that supposedly target retirees are designed according to guidelines for thirty-somethings. Because so many sites are hard for them to use, seniors will shower you with business if you're the honorable exception who acknowledges their special needs. (And, those needs aren't even that special -- it's much easier to make sites usable for seniors than for users with disabilities, plus there are many more seniors and they tend to be richer.) 8. Gift-Giving Support Wishlists and gift certificates are low-cost features that give you incremental sales and introduce your site to new customers. 9. Search Maybe search shouldn't be on this list; even though the benefits from improving it are immense, the required investment is fairly high -- certainly higher than for the other redesign initiatives listed here. Thus, the cost/benefit ratio is not as stunningly favorable for search as it is for my other recommendations. It's still favorable, though, so you should work on it. Users increasingly depend on search as a primary interface to the Web. While search is getting fairly good for the Internet at large, it remains miserable on most websites and intranets. Fixing your site's search requires that you buy and install better search software, and then tune it for your content and user queries (by adapting the spell-checking suggestions, for example). Worse, you must fix your content so that it's searchable. For example, you have to write meaningful page titles that actually explain the page's content so that people will know what they'll get when they click on a search hit. You also have to write using your users' vocabulary. While it's expensive to rewrite your content for findability, doing so also improves your standing in external search engines, and SEO (search engine optimization) is one of the highest-ROI Internet marketing tactics. This is a much better investment than running ads that most users won't see due to banner blindness. 10. User Testing User testing should really be #1 on this list because of its ability to set your project right with almost no investment. But I know that most readers tune out when I harp too much on the need for testing: people prefer to be told what to do rather than run their own studies. However unpopular, I still recommend that you do your own user testing. There are always issues that are unique to your own industry that can't be resolved by reading general research insights. And remember: usability studies can be cheap, especially when you use low-cost paper prototypes that let you test an interface while it's still in the early design phase. 7 blogs Design Observer Design Observer: writings about design & culture Smashing Magazine Smashing Magazine – a weblog dedicated to web-developers and designers Core77 Core77 / design magazine + resource / PR 6 blogs Authentic Boredom Authentic Boredom – by graphic designer, Cameron Moll Coudal Partners Coudal Partners: a forum for creativity and experimentation Creative Review Blog CR Blog – News and views on visual communications from the writers of Creative Review Design Notes Design Notes published by Michael Surtees who tries to see life filtered through design as opposed to placing design on a pedestal Dexigner Dexigner – popular design portal featuring the latest design news Hicks Design Hicksdesign – Journal of a small creative agency based in Witney, Oxfordshire, UK, authored by Jon Hicks I Love Typography I Love Typography, devoted to fonts, typefaces and all things typographical. Mark Boulton Mark Boulton: Design Thinking. Web Delivery. By a designer based in Cardiff, UK. Quipsologies Quipsologies – Corralling the most relevant and creative on- and off-line bits that pertain to the design community. Randa Clay Design Randa Clay Design – Design, Marketing, Blogging, Branding and all things Creative Russell Davies Russell Davies – incredibly diverse UK-based blog on topics associated with design Speak Up Speak Up > Design Dialog subtraction Subtraction 7.0 – NYTimes.com’s Design Director, Khoi Vinh, blogs about design and other relevant info. swissmiss swissmiss – tina roth eisenberg | swiss designer gone nyc Typographica Typographica. A Journal of Typography. Veer The Skinny Veer: The Skinny – provides visual elements for use in professional creative work Veerle's Blog Veerle’s blog 2.0 – Webdesign – XHTML CSS | Graphic Design you the designer You the Designer – Graphic Design Blog PR 5 blogs Logo Design Love Logo Design Love: a website dedicated to all things logo. Ace Jet 170 Ace Jet 170 – Found type, print and stuff AisleOne AisleOne – Design, typography and everything else. Anamorphosis Anamorphosis. learn design create Be A Design Group Be A Design Group – a blog for graphic designers, created in March of 2004 by Adrian Hanft and Bennett Holzworth. Chris Glass Chris Glass, The Last 10 Days. A creative fella’s journal from Ohio. Creative Curio Creative Curio – Learn, discuss and explore the realm of graphic design. Designers Who Blog Designers who Blog – features blogs discussing graphic design, web design, illustration, marketing, photography, branding, writing and advertising Design Adaptations Design Adaptations | Charity Ondriezek Design is Kinky Design is Kinky – a proudly Australian blog on design Design Sojourn Design Sojourn | Strategic Industrial Design Blog Design Mag DesignM.ag — Articles and Resources for Web Designers Design View Design View: Articles, Essays and Opinions by Andy Rutledge elite by design Elite By Design a freelance and web design community website Fuel Your Creativity Fuel Your Creativity – Find your spark Grain Edit Grain Edit – covers contemporary graphic design / illustration, as well as design from the from the golden era of advertising (1950s–1970s). Graphic Define Graphic Define Magazine – focuses on the business of running a graphic, interactive, or web design studio. ideasonideas ideasonideas, a blog that invites dialogue on issues relevant to communication designers and brand strategists Inspiration Bit Inspiration Bit – Get inspired and learn from the latest technology, art and design buzz on the Web. Inspiredology Inspiredology – covers everything that inspires us. ISO50 ISO50 – The Visual Work of Scott Hansen Jasongraphix Jasongraphix :: A journal of art, thoughts, and projects by Jason Beaird Noisy Decent Graphics Noisy Decent Graphics by Ben Terrett, a Graphic Designer in London positive space Positive Space :: The Graphic Design Blog Spoon Graphics Spoon Graphics – the personal project of Chris Spooner, a UK based Graphic / Web Designer. Swiss Legacy Swiss Legacy – Graphic design and typography The Dieline The Dieline – packaging design blog The Serif The Serif – Your daily dose of design inspiration things to look at things to look at – plenty of images, and oddly, things to look at Numbers 51 and upwards PR 5 blogs continued Type for you. Type for you. A blog on typography, by Pedro Serrão, a graphic designer from Porto, Portugal. TypeNeu TypeNeu dedicated to typography, fonts, lettering and typefaces PR 4 blogs AdGoodness AdGoodness – advertising and design blog from Frederik Samuel Andy Budd Andy Budd :: Blogography – based in Brighton, England Bittbox BittBox – Homemade vector freebies, design tips, tutorials and bitts. Computerlove Computerlove – Connecting Creative Talents Creative Bits creativebits | Apple orientated design community (must register to comment) David the Designer David the Designer – don’t underestimate the knowledge this man has acquired (and don’t call him Dave) Elliot Swan Elliot Swan survived three days without the internet FormFiftyFive FormFiftyFive – Design Inspiration – the pet project of designers Glenn Garriock and Jack Daly graphicPUSH graphicPUSH – “a sporadically but faithfully updated design blog” Graphic Design Blog Graphic Design Blog – graphic design, freelancing, illustration, advertising, web design Laughing Lion Design Laughing Lion Design : Web, Graphic Design & Illustration Ireland Lealea Design Lealea Design: Blogblog: Design inspiration and introspection Luz Cannon Luz Cannon: The Work of David Brooks : Designer, Photographer and Audio Producer NOTCOT.ORG NOTCOT.ORG – for your ideas + aesthetics + amusement. September Industry SeptemberIndustry | a showcase of the best in international graphic design SonSpring SonSpring | Journal by Nathan Smith We Made This We Made This (It’s Our Blog) Your Brain on Design Your Brain on Design: A Graphic Design Blog | Leslie Tane Design PR 3 blogs Binky the doormat Binky the doormat – Thoughts on design and visual culture by Daniel Gray Crazy Leaf CrazyLeaf Design Blog – Web Design and Graphic Design Blog Creative Guy Creative Guy – tips, tricks, tutorials and discussion about Adobe Photoshop, InDesign and Illustrator for designers running Mac OSX Designer Daily Designer Daily graphic design inspiration and resources Gazelle Creative Gazelle Creative – by Elizabeth Jackson (a.k.a. Zabs) gradient dropshadow curve gradient dropshadow curve – by Henry Tapia Just Creative Design Just Creative Design – personal blog of Jacob Cass, a graphic designer in Australia outlaw design Outlaw Design Blog – A Graphic Design Blog Reflections Reflections – the personal blog of Paul Enderson, a freelance web and graphic designer from England Truly Ace Truly Ace – Graphic Design Blog Tutorial Blog Tutorial Blog – Design Articles and Tutorials Print style sheets to the rescue One of the wonderful things about CSS is that it allows authors to create media-specific styles for a single document. We’re pretty used to styling for the screen, but thinking about other media isn’t a habit yet. And as all the “printer-friendly” links attest, our thinking about the print medium has been limited to recreating a document in a different way. Why bother, when the power to offer your readers a better view of your material in print is no further away than a well-structured document and a media-specific style sheet? You can take any (X)HTML document and simply style it for print, without having to touch the markup. Worries about version skew between the web and print versions suddenly become a thing of the past. Best of all, it’s simple to do. (For more information on the basic principles involved in creating media-specific stylesheets in general and print styles in particular, see “Print Different” at meyerweb.com.) Let’s look at how A List Apart got some new print styles that danced around a browser bug and, in the end, made the printed output look much better. {Ed. The print style sheet discussed below was used in ALA 2.0, whose February 2001 CSS redesign helped usher in the modern CSS-layout era. Some details below pertain only to that layout, and not to ALA 3.0. But the principles Eric Meyer discusses in this article are as true and as generally applicable today as they were when this article first appeared in ALA.} Fixing a float flub As you can see by visiting Bugzilla entry #104040, Gecko-based browsers like Netscape 6.x or Mozilla have a problem with printing long floated elements. If a floated element runs past the bottom of a printed page, the rest of the float will effectively disappear, as it won’t be printed on the next page. If you have a site styled like A List Apart, and the entire article content is contained in one big float, then that means readers will only get the first page of the article. The fix, as it turns out, is to un-float the content when the page is printed. Simply put, all you have to do is assign any large floated element to have float: none. Doing this returns the floated element to the “normal flow” of the document, which is printed as you might expect, a page at a time until the end of the document. So that’s what I recommended Zeldman do for ALA, and once he did, the printing problem was solved. Gecko-based browsers still have the bug (as of this writing), but at least it’s something that can easily be worked around. The starting point Here’s the print-medium style sheet that A List Apart was using once the float bug was cleared away: #menu { display: none; } #wrapper, #content { width: auto; border: 0; margin: 0 5%; padding: 0; float: none !important; } It’s a good start. This style sheet removes the right-side menu completely from the document, so it isn’t printed (display: none;), and resets the margins and padding of the article’s content so that the text will flow from one side of each page’s printable area to the other. The problem, as I saw it, was that too many of the styles intended for the screen were leaking through to the print. If we look at the head of a recent ALA article, we find (among a lot of other stuff) the following lines: We have a style sheet, print.css, which has been restricted to the print medium with the use of the attribute media. The style sheet nucss2.css, which is being imported in order to hide it from Navigator 4.x, will be used in all media the user agent supports. That’s screen, print, projection, aural—you name it. Unless we’re careful, we could end up with background colors and pixel-based font sizes in our printed output. Is this a tragedy? No, but most browsers are configured not to print backgrounds; and pixel-based fonts, while nice for screen media, are not so useful in print media. So let’s do something about these and a few other layout issues. Whitewashed backgrounds A lot of background colors get applied to things in the right-hand sidebar. Since that’s dropped for print, we don’t have to worry about changing anything within the sidebar. This removes numerous potential headaches right away. Since printers don’t print white, we want to set the page’s background to be white. We also want to remove any background images that might have leaked in. If we simply use the property background, we can accomplish both tasks with a single value. In order to leave ourselves a little flexibility, we’ll set the body background to be white, and the content and wrapper elements to have a transparent background (thus letting the page’s white shine through): body { background: white; } #menu { display: none; } #wrapper, #content { width: auto; margin: 0 5%; padding: 0; border: 0; float: none !important; color: black; background: transparent; } Setting the foreground color to go with the background colors wasn’t absolutely necessary, but it’s always a good idea. Now we have two non-floated elements (#wrapper, #content) with no visible background, and a page with a white background. You might be worried that Navigator 4.x does terrible things with the value transparent, but be of good cheer: NN4.x only pays attention to style sheets that have a media value of screen. Just like with @import, the styles in our print style sheet are forever hidden from Navigator 4’s rheumy eyes. So no worries there. Sizing the font for print The all-media style sheet is sizing our printed text to be 11px tall, which seems like a poor choice. The font family (Georgia to start, and serif fonts thereafter) is fine for print, where serif fonts are usually preferred. Only the size needs a change. Thus: body { background: white; font-size: 12pt; } “Wait!” you’re probably exclaiming. “Heretic! Everyone knows points are evil! Todd Fahrner said so!” Well, yes, he did, and he was entirely correct—for screen media, points are a horrible choice. In print, points make just as much sense as they have for decades now. Since we are styling for print, setting our body font size to 12 points is actually a good thing. You can of course pick any size you like, but 12 points is a very common size. And since Zeldman’s all-media styles size elements in the article content in relation to the body, we’re all set there. Marginalia The existing styles for the wrapper and content divs sets their left and right margins to be 5%. That means that there will be “blank space” to either side of the article, and each blank area will be 10% the width of the page’s printable area. That’s because the content div is inside the wrapper, and each one has 5% on each side. Add ’em up and you get 10%. The original all-media styles set a 15% right padding on the content div. The margins already give us 10%, so we just need an extra 5%. That’s easy enough to do: div#content { margin-left: 10%; } Another option would have been to leave the margin alone and give the left padding a value of 5%. Since the content div doesn’t have a visible background, either approach should have the same effect. Unfortunately, some browsers have trouble handling padding appropriately, so it’s currently a better idea to move things around with margins whenever possible. Printed links One tricky question was what to do about hyperlinks. Obviously they aren’t going to be as useful in print as they are onscreen, but it’s often important to provide some clue that there were links in the original. So here’s what I devised: a:link, a:visited { color: #520; background: transparent; font-weight: bold; text-decoration: underline; } This gives the links a color dark enough to be close to black in grayscale output, while still using a dark red that will show up on a color printout. The boldfacing and underlining ensure that the text of the links will stand out. In a fully CSS2-conformant browser, we can parenthetically insert the URLs of the links after each one, thus making them fairly useful to anyone who has a copy of the printout and a web browser handy. Here’s the rule, which restricts this effect to the “content” div and thus avoids sticking a URL in the masthead: #content a:link:after, #content a:visited:after { content: " (" attr(href) ") "; font-size: 90%; } Try it out in a Gecko-based browser, like Mozilla or Netscape 6.x. After every link in the printout, you should see the URL of the link in parentheses. In any browser that doesn’t understand the rule, there should be no ill effects—the links will still be dark red, underlined, and boldfaced. They just won’t have a URL appear after the text of the link, that’s all. Note that the spaces before and after the parentheses are actually part of the rule above—the spaces have to appear in the rule in order to be inserted into the document. There is one aesthetic problem with this new rule, precisely because it causes the value of a link’s href attribute to be inserted into the document verbatim. If we look at the code of ALA pages, we’ll quickly notice there are a lot of “rooted” URLs like /issues/144. Those will be dropped into the document exactly as they are, which makes them less useful than if they were displayed as an absolute URL. As it happens, the CSS3 selectors draft offers us an out. Any attribute selector that uses the operator ^= selects elements based on the beginning of their attribute values. Thus we can select any href that starts with a slash and insert enough text to fill out the value. #content a[href^="/"]:after { content: " (http://www.alistapart.com" attr(href) ") "; } This rule transforms a value like /issues/144/ into http://www.alistapart.com/issues/144/. It won’t help with relative URLs that don’t start with slashes, but fortunately ALA doesn’t use those kinds of URLs. !IMPORTANT: As mentioned, ^= is a CSS3 selector. The W3C CSS validator can only test for compliance with CSS1 and CSS2. Unable to understand the CSS3 selector, the W3C validator will report it as an error, even though it is perfectly valid per the CSS3 Selectors Candidate Recommendation. Extending the masthead In doing a final review of the print styles, I realized that the masthead of the site bugged me. It wasn’t that it existed so much as it had an “underline” as part of the graphic. That line, of course, ended with the edge of the graphic. It occurred to me that it would be possible to pull a little sleight-of-hand and make the line extend to the width of the article text. The first step was to give the content div a top border that was, like the underline in the graphic, a solid one-pixel dark red line. Since I was going to create a visible top border for the content, it also seemed a good idea to insert some padding between the border on the content. div#content { margin-left: 10%; padding-top: 1em; border-top: 1px solid #930; } By itself, that would draw a line just underneath the masthead graphic. It turns out that said graphic is wrapped in a div element all by itself, so the bottom margin of that div is used to pull the rest of the content up into itself. div#mast { margin-bottom: -8px; } div#mast img { vertical-align: bottom; } These simple rules cause the content div’s top border to line up with the underline in the masthead graphic. The border is actually overlaying the graphic, but since the colors match it’s difficult (if not impossible) to realize that’s what is happening. Even if a browser decided to put the graphic on top of the content’s top border, the graphic and border would still line up and create the illusion. The second rule shown, the one with vertical-align, works around an interesting Mozilla behavior that is only seen when a document is rendered in “standards” mode, as are all ALA articles. See my Netscape DevEdge article “Images, Tables, and Mysterious Gaps” for more information on this behavior, and various workarounds (including the one used above). Also see Better Living Through XHTML in ALA 137. As for the background color of the masthead graphic, there’s really no way to remove it short of actually setting those pixels to be transparent in the graphic itself. We could set a matching background color on the masthead div, but that would probably be overkill for so light a background. What else? That’s all we did for this redesign, but it certainly isn’t the end of what’s possible. Fiddling with colors to be more printer-friendly is one possibility, as is tweaking the column’s margins so they’re based on points (or picas, or even inches) instead of percentages. In the print world, you have almost as much room to design as you do on-screen. One area we didn’t scratch as deeply as we could have is font sizing. A number of classes, like superfine, were left to use the all-media styles based on pixel sizes. Resizing them for print is as simple as what we did for the body element—just write a rule that addresses the element(s) in question, and assigns a new value to font-size. To pick one example, we might have written .superfine {font-size: 9pt;}... or any other value that seemed appropriate. There are other elements, like footers and pre, that could benefit from similar work, and they may appear in future versions of the ALA print styles. The end result Here’s the print style sheet we ended up with after making the changes: body { background: white; font-size: 12pt; } #menu { display: none; } #wrapper, #content { width: auto; margin: 0 5%; padding: 0; border: 0; float: none !important; color: black; background: transparent none; } div#content { margin-left: 10%; padding-top: 1em; border-top: 1px solid #930; } div#mast { margin-bottom: -8px; } div#mast img { vertical-align: bottom; } a:link, a:visited { color: #520; background: transparent; font-weight: bold; text-decoration: underline; } #content a:link:after, #content a:visited:after { content: " (" attr(href) ") "; font-size: 90%; } #content a[href^="/"]:after { content: " (http://www.alistapart.com" attr(href) ") "; } As minimal and (in some ways) crude as this style sheet may be, the effect it has should be obvious to anyone holding a printout next to the same article online. Similarly useful and dramatic changes are possible for almost any design, from the simple to the sublime, and these sorts of media-specific styles free authors from ever having to create another “printer-friendly” copy of a document. Freelance Web Development – Site List: 1. odesk.com Without a doubt the best freelance site on the web today. From the number of jobs listed and the quality of development projects, to the innovative billing, collaboration, and work monitoring options, oDesk is recommended for developers and service buyers for any project. 2. getafreelancer.com GAF, or getafreelancer.com, has one of the most active user communities for freelance project development. The quality of projects isn’t always great here, but the volume of bidding and the prices are low. Recently opened a Euro branch of the site, so may split business between the two, weakening overall brand and community. 3. elance.com eLance is owned by eBay and as such attracts a fair number of high quality project listings, and a lot of freelancers are doing really well here. However, their subscription fees for connects have you basically paying for every bid you make on site, and extra fees for extra categories, etc. Worth it if you take the time to build a presence on site and manage it like your eBay store. 4. rentacoder.com RentACoder doesn’t have the best design, but gets a lot of project traffic and has a lot of options. The user interface is somewhat counter-intuitive and intrusive, but the site boasts the largest number of completed software development projects of any of the freelance boards and some good projects do come through the vine here. 5. getacoder.com GetACoder is a nice site, and some good projects seem to come through here on occasion, but it also has a site marketing campaign that makes it feel as if you are working on a ClickBank site. Overall, a mixed bag but worth watching for occasional gems. 5. scriptlance.com Scriptlance is a good place for programming projects and finding web developers, a middle of the road site with about 200 new projects a day. Domain name and traffic are excellent, so expect this site to grow and improve over time. Still one of the main boards to watch for new jobs. 7. guru.com Guru should be a much better site for freelance than it is currently, with a great domain and design. But doesn’t get much traffic, and costly for freelancers for a yearly account. Good to monitor and you may get a top quality contract from the site with a lot of activity, but not really much business here generally. 8. serebra.com One of the newest of the main freelance sites, launched with a large PPC ad campaign to bring traffic, but Canada specific interest makes it kind of limited overall. Big budget, promotions, and a lot of hype – may turn out to be a good place to network for big contracts. Nice site design overall. 9. sologig.com Sologig is another underperforming freelance site, worth watching and building a presence on for the reference or occasional contract, but not to be expected to provide steady work. Maybe a good place for consultants to meet up with corporations seeking specialists, should become better over time. 10. Sourceforge Marketplace Sourceforge being the main development repository for so many Open Source projects really should be a natural place to find programmers. The Marketplace isn’t as developed or active as it could be, but a good place to network your services and find new clients. # Title / Author(s) RD GH NA AA NG AG 1 Twitter Power: How to Dominate Your Market One Tweet at a Time Joel Comm, Ken Burge 17-2-2009 33300 81 4.57 25 3.96 2 Groundswell: Winning in a World Transformed by Social Technologies Charlene Li, Josh Bernoff 21-4-2008 76100 82 4.57 287 3.80 3 World Wide Rave: Creating Triggers that Get Millions of People to Spread Your Ideas and Share Your Stories David Meerman Scott 3-3-2009 21300 38 4.61 21 3.87 4 Tribes: We Need You to Lead Us Seth Godin 16-10-2008 176000 136 4.14 534 3.78 5 Here Comes Everybody: The Power of Organizing Without Organizations Clay Shirky 28-2-2008 82000 47 4.45 577 3.79 6 The Brand Bubble: The Looming Crisis in Brand Value and How to Avoid It John Gerzema, Edward Lebar 10-10-2008 10400 73 4.90 6 4.13 7 The New Rules of Marketing and PR David Meerman Scott 4-6-2007 53200 166 4.57 109 3.74 8 What Would Google Do? Jeff Jarvis 27-1-2009 46400 81 3.83 124 3.71 9 Wikinomics: How Mass Collaboration Changes Everything Don Tapscott, Anthony D. Williams 12-12-2008 115000 107 3.80 632 3.50 10 Personality Not Included Rohit Bhargava 31-3-2008 20100 32 4.69 20 3.85 11 The Twitter Book Tim O’Reilly, Sarah Milstein 11-5-2009 22200 18 4.89 17 3.53 12 Word of Mouth Marketing: How Smart Companies Get People Talking Andy Sernovitz 1-11-2006 27900 129 4.60 55 3.80 13 The Whuffie Factor: Using the Power of Social Networks to Build Your Business Tara Hunt 11-11-2008 16100 10 4.90 20 3.80 14 ProBlogger: Secrets for Blogging Your Way to a Six-Figure Income Darren Rowse, Chris Garrett 5-5-2008 11500 51 4.37 45 3.83 15 The Long Tail: Why the Future of Business is Selling Less of More Chris Anderson 1-1-2006 504000 192 4.10 1154 3.75 16 The Starfish and the Spider: The Unstoppable Power of Leaderless Organizations Ori Brafman, Rod A. Beckstrom 5-10-2006 59100 75 4.44 251 3.67 17 Social Media Marketing: An Hour a Day Dave Evans 13-10-2008 49800 23 4.78 6 3.60 18 Free: The Future of a Radical Price Chris Anderson 2-7-2009 66400 26 3.27 103 3.50 19 Radically Transparent: Monitoring and Managing Reputations Online Andy Beal, Judy Strauss 4-3-2008 11200 15 5.00 7 4.06 20 Permission Marketing : Turning Strangers Into Friends And Friends Into Customers Seth Godin 6-5-1999 62000 141 4.20 211 3.88 21 Smart Mobs: The Next Social Revolution Howard Rheingold 15-10-2002 63200 26 4.50 114 3.82 22 Grown Up Digital: How the Net Generation is Changing Your World Don Tapscott 3-10-2008 31000 33 4.12 56 3.65 23 Twitter For Dummies Laura Fitton, Michael Gruen, Leslie Poston 7-7-2009 8370 2 5.00 3 4.50 24 Naked Conversations: How Blogs are Changing the Way Businesses Talk with Customers Robert Scoble, Shel Israel 1-1-2006 43300 51 4.53 91 3.48 25 Designing for the Social Web Joshua Porter 4-5-2008 7160 19 4.53 34 3.84 26 Secrets of Social Media Marketing Paul Gillin 1-1-2008 20100 22 4.59 8 3.92 27 YouTube: An Insider’s Guide to Climbing the Charts Alan Lastufka, Michael W. Dean 28-11-2008 8880 17 4.82 13 3.51 28 The New Influencers: A Marketer’s Guide to the New Social Media Paul Gillin 15-4-2007 13800 47 4.51 29 3.64 29 Now Is Gone: A Primer on New Media for Executives and Entrepreneurs Geoff Livingston, Brian Solis 12-11-2007 23400 27 4.48 21 3.69 30 Creating Customer Evangelists: How Loyal Customers Become a Volunteer Sales Force Ben McConnell, Jackie Huba 12-11-2002 12700 38 4.66 19 3.85 31 Six Degrees: The Science of a Connected Age Duncan J. Watts 1-2-2003 68400 36 4.33 70 3.72 32 The Wisdom of Crowds James Surowiecki 25-5-2004 91900 176 3.93 1054 3.54 33 Content Nation: Surviving and Thriving as Social Media Changes Our Work, Our Lives, and Our Future John Blossom 9-1-2009 5560 5 5.00 4 4.25 34 The Big Switch: Rewiring the World, from Edison to Google Nicholas Carr 7-1-2008 44400 48 3.65 154 3.54 35 Twitter Revolution Warren Whitlock, Deborah Micek 11-11-2008 5750 33 4.67 15 3.37 36 The Facebook Era Clara Shih 22-3-2009 10100 30 4.97 5 2.60 37 Crowdsourcing: Why the Power of the Crowd Is Driving the Future of Business Jeff Howe 26-8-2008 42900 15 4.40 42 3.44 38 The Wealth of Networks: How Social Production Transforms Markets and Freedom Yochai Benkler 16-5-2006 42900 15 4.20 91 4.12 39 Me 2.0: Build a Powerful Brand to Achieve Career Success Dan Schawbel 31-3-2009 17000 47 4.45 4 3.25 40 Cluetrain Manifesto Christopher Locke, Rick Levine, Doc Searls, David Weinberger 6-1-2000 36400 155 3.83 211 3.77 41 Linked: How Everything Is Connected to Everything Else and What It Means Albert-Laszlo Barabasi 14-5-2002 21200 99 4.12 336 3.71 42 Tactical Transparency: How Leaders Can Leverage Social Media to Maximize Value and Build their Brand Shel Holtz, John C. Havens 10-11-2008 8190 4 4.75 9 3.96 43 Mobilizing Generation 2.0: A Practical Guide to Using Web2.0 Technologies to Recruit, Organize and Engage Youth Ben Rigby 25-4-2008 6510 9 4.67 10 4.10 44 Twitter Means Business: How Microblogging Can Help or Hurt Your Company Julio Ojeda-Zapata 14-11-2008 4210 11 4.73 9 3.83 45 Everything Is Miscellaneous: The Power of the New Digital Disorder David Weinberger 1-5-2007 47100 27 3.52 390 3.63 46 Blog Blazers Stephane Grenier 7-11-2008 3410 34 4.41 5 4.00 47 The Huffington Post Complete Guide to Blogging The editors of the Huffington Post 2-12-2008 16800 33 3.79 36 3.20 48 Convergence Culture: Where Old and New Media Collide Henry Jenkins 1-8-2006 40900 20 4.10 170 3.76 49 33 Million People in the Room: How to Create, Influence, and Run a Successful Business with Social Networking Juliette Powell 28-12-2008 6890 18 4.44 8 3.71 50 Web 2.0 and Beyond: Understanding the New Online Business Models, Trends, and Technologies Tom Funk 3-11-2008 4730 6 4.83 5 4.00 51 Building a WordPress Blog People Want to Read Scott McNulty 1-12-2008 5300 22 4.27 6 3.96 52 Putting the Public Back in Public Relations: How Social Media Is Reinventing the Aging Business of PR Brian Solis, Deirdre Breakenridge 1-3-2009 10100 12 4.75 4 3.50 53 Buzzmarketing: Get People to Talk About Your Stuff Mark Hughes 7-7-2005 13700 39 4.56 50 3.32 54 Social Media Is A Cocktail Party: Why You Already Know The Rules Of Social Media Marketing Jim Tobin, Lisa Braziel 5-11-2008 1160 10 5.00 1 5.00 55 How to REALLY use LinkedIn Jan Vermeiren 4-3-2009 4980 40 4.85 2 3.00 56 Facebook Me! A Guide to Having Fun with Your Friends and Promoting Your Projects on Facebook Dave Awl 16-2-2009 3460 11 4.64 7 3.78 57 The Cult of the Amateur: How Today’s Internet is Killing Our Culture Andrew Keen 5-6-2007 59200 113 2.49 229 2.42 58 The Age of Conversation 2: Why Don’t They Get It? Gavin Heaton, Drew McLellan 25-2-2009 549 5 5.00 59 YouTube for Business: Online Video Marketing for Any Business Michael Miller 29-8-2008 11600 10 4.40 3 4.29 60 Group Genius: The Creative Power of Collaboration Keith Sawyer 4-6-2007 7580 12 4.75 24 3.63 61 Blogging For Dummies Susannah Gardner, Shane Birley 10-1-2008 12600 14 4.50 21 3.44 62 A Survival Guide to Social Media and Web 2.0 Optimization: Strategies, Tactics, and Tools for Succeeding in the Social Web Deltina Hay 1-3-2009 872 3 5.00 2 4.00 63 Do It Wrong Quickly: How the Web Changes the Old Marketing Rules Mike Moran 23-9-2007 5160 14 4.79 2 5.00 64 Twitter Tips, Tricks, and Tweets Paul McFedries 11-5-2009 5780 41 4.56 3 2.31 65 Born Digital: Understanding the First Generation of Digital Natives John Palfrey, Urs Gasser 25-8-2008 20700 12 4.00 84 3.26 66 Blogging Heroes: Interviews with 30 of the World’s Top Bloggers Michael A. Banks 10-12-2007 11100 13 4.23 18 3.81 67 Facebook Cookbook: Building Applications to Grow Your Facebook Empire Jay Goldman 15-10-2008 911 10 4.80 2 4.00 68 I’m on LinkedIn – Now What??? Jason Alba 10-9-2007 12400 48 4.29 12 3.11 69 Join the Conversation Joseph Jaffe 19-10-2007 19600 17 4.18 18 3.55 70 The Social Media Bible: Tactics, Tools, and Strategies for Business Success Lon Safko, David Brake 4-5-2009 12700 2 5.00 1 3.00 71 The Future of Reputation: Gossip, Rumor, and Privacy on the Internet Daniel J. Solove 24-10-2007 14400 6 4.50 29 3.34 72 SocialCorp: Social Media Goes Corporate Joel Postman 18-12-2008 2710 4 4.50 3 5.00 73 Always On: Advertising, Marketing, and Media in an Era of Consumer Control Christopher Vollmer, Geoffrey Precourt 25-3-2008 5330 6 4.67 2 4.00 74 Building Buzz to Beat the Big Boys: Word of Mouth Marketing for Small Businesses Steve O’Leary, Kim Sheehan 30-3-2008 963 10 4.80 1 5.00 75 Herd: How to Change Mass Behaviour by Harnessing Our True Nature Mark Earls 6-4-2007 171000 4 4.25 13 3.74 76 The New Age of Innovation: Driving Cocreated Value Through Global Networks C.K. Prahalad, M.S. Krishnan 8-4-2008 246000 14 3.71 13 3.17 77 42 Rules for 24-Hour Success on LinkedIn Chris Muccio, David Burns, Peggy Murrah 5-12-2008 655 5 4.60 1 5.00 78 Satisfied Customers Tell Three Friends, Angry Customers Tell 3.000 Pete Blackshaw 8-7-2008 5930 15 4.47 9 3.52 79 The Social Network Business Plan: 18 Strategies That Will Create Great Wealth David Silver 24-2-2009 8340 19 4.37 0 80 The New Language of Marketing 2.0: How to Use ANGELS to Energize Your Market Sandy Carter 10-11-2008 5150 23 4.87 1 3.00 81 Millennial Makeover: MySpace, YouTube, and the Future of American Politics Morley Winograd, Michael D. Hais 30-3-2008 10100 15 4.27 29 3.08 82 The Corporate Blogging Book: Absolutely Everything You Need to Know to Get It Right Debbie Weil 3-8-2006 13300 17 4.65 11 3.15 83 The Anatomy of Buzz: How to Create Word of Mouth Marketing Emanuel Rosen 17-10-2000 20600 44 3.98 58 3.24 84 Life After the 30-Second Spot: Energize Your Brand With a Bold Mix of Alternatives to Traditional Advertising Joseph Jaffe 25-5-2005 10700 28 4.50 21 3.03 85 Beyond Buzz: The Next Generation of Word-of-Mouth Marketing Lois Kelly 26-3-2007 5420 22 4.45 11 3.69 86 The Truth About Profiting from Social Networking Patrice-Anne Rutledge 31-3-2008 2570 5 4.60 5 4.00 87 Citizen Marketers: When People Are the Message Ben McConnell, Jackie Huba 1-12-2006 9600 25 4.44 34 3.03 88 Publish and Prosper: Blogging for Your Business DL Byron, Steve Broback 11-6-2006 5030 13 4.92 11 3.60 89 Online Marketing Heroes: Interviews with 25 Successful Online Marketing Gurus Michael Miller 10-3-2008 4540 6 4.50 2 4.50 90 The Open Brand: When Push Comes to Pull in a Web-Made World Kelly Mooney, Nita Rollins 14-3-2008 4650 16 4.25 16 3.66 91 The Age of Conversation Gavin Heaton, Drew McLellan 18-1-2008 5290 5 4.80 92 Plug Your Business! Marketing on MySpace, YouTube, blogs and podcasts and other Web 2.0 social networks Steve Weber 13-7-2007 2060 28 4.25 5 4.20 93 Blogging for Business: Everything You Need to Know and Why You Should Care Shel Holtz, Ted Demopoulos 1-2-2006 7050 20 4.45 8 3.71 94 Web 2.0: New Tools, New Schools Gwen Solomon, Lynne Schrum 15-10-2007 2910 6 4.50 7 4.10 95 Blog Marketing: The Revolutionary New Way to Increase Sales, Build Your Brand, and Get Exceptional Results Jeremy Wright 15-11-2005 27200 19 3.89 8 3.71 96 Wikipatterns Stewart Mader 10-12-2007 7790 17 3.88 11 3.69 97 WordPress for Business Bloggers Paul Thewlis 8-8-2008 2370 4 4.50 3 4.29 98 The Weblog Handbook: Practical Advice on Creating and Maintaining Your Blog Rebecca Blood 13-6-2002 24000 36 4.03 15 3.21 99 Smart Start-Ups: How Entrepreneurs and Corporations Can Profit by Starting Online Communities David Silver 18-5-2007 3230 36 4.47 10 3.30 100 Media Rules!: Mastering Today’s Technology to Connect With and Keep Your Audience