Andrew Ford's List: Design

• Heat maps by companies such as CrazyEgg give a visual representation of what users are doing on your site by tracking each individual click a user makes.
• Having trouble deciding which design for your home page will work the best? Google Web Optimizer can implement A/B testing on your site to help determine which one is most effective.
• To help create the most interesting headlines that will capture the audiences’ interest, visitors are shown one of two different headlines randomly for the same story on a page. After the first 5 minutes of being posted, the headline with the most clicks is left as the final one everyone sees.
• What are people saying about your site? Listening and monitoring your audience through unsolicited feedback can be a very important tool to help understand them.

2 more annotations...

• Unusual Layouts

  • Breaking industry conventions is not always easy. Still, many designers push on to find fresh ideas and ways to innovate. Have you ever driven down a street where the homes perhaps have different-colored paint on the shutters but essentially look the same? The Internet can be the same, with designers cloning the same layouts day in and day out. But it is amazing what can be accomplished by a simple shift in the placement of website elements, while keeping the website familiar and easy to use.
• Unusual Layout Best Practices

  • There are no “standards” for designing your own unusual layouts, only guidelines to keep you on track. The style is defined by freedom from conventional standards and by placing items where visitors are not trained to find them. Here are some ways to achieve an unusual layout:
• Let your content articulate the design. Try even five or more columns without aligning everything perfectly. Prioritize usability, with layout as a secondary consideration. Let things flow naturally.
• Let your users view content horizontally or vertically, without making additional content hard to find. Bring an element of surprise and excitement when presenting crucial content.
• eep in mind that users tend to focus on faces. Guide them with visual imagery to help them find content. Also, make sure the layout does not disorient visitors. The experience should be new and delightful.
• India 60 has a layout that seems successful for every section of the website but “Videos.” Identifying the different content on the website is easy, but no matter how large your monitor (mine is 24″), you still seem to need to scroll.
• Big Kid has a series of windows and photos that wrap to your browser window, helping you navigate the content. An effective yet slightly disorienting approach.
• 26000 Vodka takes an abstract and innovative approach to layout. Even with the parts moving constantly, you still manage to find content and enjoy your visit.
• Red Mccombs Media has several different levels of navigation on its landing page and internal pages. While the page design is pleasing to the eye, it can be confusing and frustrating if you are not sure what you are looking for.
• Tiny Team has a very simple layout that replicates how folders are opened on a computer. You can easily navigate back and forth through sections after some trial and error. One feature that is lacking is direct access to a specific part on the website.
• Max Haus puts its navigation and search at the bottom of the website, with all options initially hidden. Once you leave the home page, returning is nearly impossible.
• Webbli World has a very creative layout. All of the main content is hidden from non-members. The unique layout of the Webbli creator and registration form, though easily lost, get your attention.
• Jan Sochor has a three-column layout that adapts to each section. The website feels very natural even though it contains at least four different layouts.
• Sursly has an interesting take on horizontal navigation; each page contains only a small chunk of information. While the layout as a whole may not be unusual, the dark frame containing the content is.
• Gavin Castleton’s layout has a split personality but helps you quickly identify your needs. Once on the website, you are presented with obscured content against a transparent background. The navigation transitions are appropriately nauseating.
• FMCS has a five-column layout that is not often seen. While plenty of content is displayed, you are never overwhelmed or confused. Content is easily findable, even if a bit hard ro read when crammed into the left column
• AntiSweden has a full-screen video layout, accompanied by a two-box navigation to the right. When you navigate to a new page, the simple navigation scheme remains.
• Samsung has stylized navigation to the right that changes with the photo. The layout is easy to use, though occasionally confusing when new elements are introduced.
• Love Bento groups its navigation in the lower-left with the bento box of content. While the website may appear overwhelming at first, you quickly realize understand how to find what you’re looking for.
• Unusual Navigation

  • Developing a unique navigation scheme that does everything but conform can be a huge task, almost the Mount Everest of Web design. Not many people take on the challenge, and not many who do succeed. In this section, we cover both the victories and defeats. Unusual navigation requires a balance between innovation and practicality. If you lean too far towards innovation, the navigation can become frustrating and even unusable. The goal is to make the navigation intuitive enough for the website to be perfectly usable.
• Unusual Navigation Best Practices
• Let your navigation float freely within the content, rather than using the typical “Z pattern” that helps users scan. Make sure the navigation is still clear and self-explanatory, even if it doesn’t sit in the usual location at the top. Make it intuitive yet simple, maybe with just a few symbols that expand into many options.
• Use imagery instead of, or in addition to, text. Allow users to use the mouse buttons and click wheel as alternatives (with instructions, of course). Also allow keyboard navigation as an alternative (instructions again, please).
• Finally, include arrows that visitors can use to cycle through the main sections without using the main navigation. Allow users to drag items to reveal new content, while maintaining usability and accessibility.
• Lucuma displays some great art, but the initial lack of content is a bit confusing. The horizontal scrolling is also interesting, although the pages are so short that you can see multiple pages at once.
• Okay Dave puts its navigation at the bottom, while the different images point to the same content.
• Marc Anton Dahmen combines mouse and keyboard options for navigation. Making the keyboard interact with the images and text is definitely unique. The configuration stands out while remaining practical.
• Andreas Smetana lets you use your mouse wheel or the arrows to navigate through photo thumbnails.
• Snuggle Fux takes a curious approach to layout and navigation, with functional expandable windows and no main navigation to be found. If you are looking for something in the 15 most recent topics, you should be fine; otherwise you will certainly give up and move on to another website.
• Cypher 13 has expandable navigation supported by photos and text. This style is interesting, functional and at times comical.
• Im Design lets you use your keyboard arrows and a few other keys to navigate the on-screen portfolio items. Some of the keys are not Mac-friendly, and visitors are forced to use the mouse on several occasions.
• Mandchou offers a small content area designed mainly for viewing the portfolio, complemented by thumbnails at the bottom of the viewport.
• Studio Stemmler has a plain landing page. But as soon as you select a category, the interface changes and you have multiple ways to access content.
• Lab for Culture has a unique and very interactive style of navigation for its case study section. After clicking through several types of navigation, the final presentation is useful and interesting.
• Salinas has a great “Wow” effect when you first select a section. Upon leaving the landing page, the appeal is lost, with the slow-loading content and awkward page transitions.
• Got Milk puts its navigation front and center and never budges, although the icons become text on hover.
• Ian Wharton uses a combination of navigation and arrows to let you cycle through content, with the option to view full-screen. The interface changes on interior pages, with the main navigation disappearing, leaving only a “Back” button.
• Eric Johansson lets you drag the slider at the bottom not only to access different pages but to discover content, too.
• Johnny Slack has a fun interactive navigation style that shows all of your options up front and then gives you the option to identify an item by category. When viewing projects, you are presented with expandable images.
• Yodabaz has a fresh and pleasing feel for its navigation, and you can find all the controls you would expect from a portfolio.
• OFIS borrows from the periodic table of elements for its navigation. It is minimalist yet useful, and it adapts when you enter a new section.
• SensiSoft has a familiar-looking information stand to help users connect with its unique style of navigation.
• Thibaud not only lets you drag with your mouse but takes a page out of the Pantone color book. Designers are familiar with this and know what to expect.
• When Unusual Becomes Unusable

• Not all unusual designs are as intuitive as their designers would like to believe. SOme can be more of a nuisance than a convenience. MIT offer some usability guidelines for websites, which are not detailed but still useful as a quick checklist. If your website’s purpose and content are not immediately understood, you may want to rethink your design. Your content’s structure does not have to be conventional, but it should be logical. Few things are more frustrating to a user than not knowing how to navigate content.

  Think of your website like a brand new vehicle. It has some things you are used to: a steering wheel, gears, a seat, etc. When you first sit in it, you immediately recognize certain items, but not others. If the gear shift has been moved from between the seats to behind the steering wheel, you might be confused at first. Not knowing how to shift detracts from the vehicle’s functionality. So, the vehicle’s controls should be clearly labeled and feel natural to use. The relocation of the gear shift is one of the more drastic advancements in the usability of automobiles in recent years and feels quite different from the “layout” of typical car.

  While creativity, uniqueness and pushing boundaries always benefit the Web community as a whole, usability is far more important. Your layout and navigation must be intuitive and easy to use to be successful.

43 more annotations...

• Should I Charge Per Hour?

  • Charging per hour makes sense if:
    Project requirements may change after you’ve already started working,
    It’s hard to tell exactly how long a project will take,
    You’re handling lots of small tasks or projects as they come up,
    Your client wants something beyond what you ordinarily offer.
• Should I Charge Per Project?

  • Charging per project makes sense if:
    You do this type of project often enough that you know how long it should take,
    Your client has a budget that doesn’t allow for an open-ended number of hours,
    You want to offer a package deal, such as a website and hosting for a certain price,
    The project is relatively short and specific.
• How Low Should I Go?

  • not all clients assume that a low price means that a particular web designer is offering a deal. Instead, many prospective clients will think that there is a reason your prices are below other web designers with similar portfolios and skills.
• Charging For All The Time You Spend

  • you can and should bill your clients for the following:
    Revisions: It’s rare for a client to like a design exactly the way you come up with it, but you can bill them for the time you spend revising your designs.
    Education: With some clients, you can spend hours going back and forth, educating them on what a website design actually includes. That is time you’ve spent on your project and it’s time you can bill to your client.
    Set up: Some designers take care of setting up hosting, if not providing it entirely. The time it takes to get everything ready on the hosting end of things is an expense your client can cover.
• Explaining Your Prices
• It can be hard for a new web designer to price a project high enough, simply because of a lack of confidence. As you build your skills and gain confidence, it becomes easier to quote higher prices to clients without worrying that the price is too high.
• When Should I Increase My Prices?

  • What you charge today isn’t necessarily what you should be charging for it a year from now. As you add to your skills, as well as your reputation, you’ll not only be more valuable to your clients but you’ll be able to demonstrate your worth with a larger portfolio of completed projects. You’ll be able to increase your prices — and you should.
• Timing A Price Increase

  • There are a couple of times that it can be easier to announce those new rates:
    The New Year: With the end of the year approaching, you can simply send out a notice that your rates will be going up on the first of the year. The same approaches works with the beginning of a new month if you aren’t prepared to wait until the end of the year.
    New Projects: If your client brings you a new project, it can be an ideal time to make the switchover. You can explain that for future projects, you’ve increased your rates, which provides you and your client a chance to talk about the matter.
    Contracts: If you have a contract with your client to provide certain services, like maintenance, on a continuing basis, that contract should have an ending date. That date gives you an opportunity to renegotiate your rates.
• Prices in the Wild

  • Actually seeing what other web designers charge is necessary to decide if your prices are comparable.
    Mary-Frances Main charges $60 per hour for most web design work. For programming, her rate is $72 per hour and for Flash, her rate is $65 per hour.
    Noel Green charges between $2,500 and $5,000 for a complete website, guaranteeing a 4-week turnaround on projects. Projects at the upper end of that range typically involve more complex features, such as shopping carts.
    Dixie Vogel charges between $60 and $80 per hour for most web design work.
    Stephanie Hobbs’s rates start at $1,200 for a 4-page website, add to her estimate for larger projects and sites with extra features, like Flash.
    These prices differ due to factors like the designer’s location, their experience and even the type of clients they prefer to work with. But, in each case, the web designer in question has thought through not only what he or she needs to earn but how comparable those prices are to other designers and where the prices can be increased.

7 more annotations...

• Tip 1 

   

  “Developing, building, and stubbornly maintaining a successful visual style will ultimately kill your creativity–and your career. Change constantly or die.”

• Tip 2 

   

  “Keep your desk tidy–not like mine. I spent an hour this morning looking for a DVD of images for a book cover, and finally had to ask the client to upload them again to our FTP. It turned out they’d mistakenly sent the DVD to a ‘Ryan Hughes’ in California, but with all that mess, I assumed it was under there somewhere.”

• Tip 3 

   

  “Think before you start to work. Something should be in your head or your sketchbook before you switch on your Mac. I never let my Mac control me–he knows his place; he is only a tool that helps me execute my thoughts.”

• Tip 4 

   

  “When stuck for material, think back to some terrible childhood trauma and draw it. Works every time.”

• Tip 5 

   

  “Brainstorm and rapidly prototype–force yourself to come up with as many ideas as you can, but spend no more than five minutes on each one. It’s surprising how quickly this can expose ideas that work and those that don’t. Often, ideas you least expect work best.”

• Tip 6 

   

  “For video, storyboards and animatics are crucial, but they needn’t look beautiful–mostly, they’re just a guide. Carry a notebook and pencil for sketching out ideas, and use basic storyboards to test out ideas as a sequence, and to make important storytelling, timing, and editing decisions.”

• Tip 7 

   

  “Create seminal pieces that tell the world about what you love, where you draw inspiration from, and where your enthusiasm peaks. This could attract a dream client or collaborators you share a common bond with. I love nature, so I create pieces to attract clients needing something nature-themed, to work together promoting, recreating, or enthusing over nature.”

• Tip 8 

   

  “Take photos of anything that tickles your fancy to use as inspiration later on. Don’t worry about quality or reflections—the pictures are just reminders. I love a badly stuffed weasel at the Bristol Museum. Its unnaturally arched spine and placid face are beautiful. I never got a good picture, but found something on my camera recently, and turned it into a character illustration.”

• Tip 9 

   

  “Take advantage of software integration. I create artwork in Illustrator and develop it in Photoshop. Vector elements pasted into Photoshop become Smart Objects that can be subjected to treatments like adjustment layers, masks, and smart filters–great for creating subtleties of texture and color that are lacking in designs made purely in Illustrator.”

• Tip 10 

   

  “Work without distractions such as ‘new e-mail’ alerts, and play your favorite music–that which affects you–to do your best work.”

• Tip 11 

   

  “Aim to spend a day entirely focused on creating one particularly special piece of work. Do everything you can to make this possible–avoid distractions in your schedule, and ensure you’ve had a good night’s rest and have a clear desk.”

• Tip 12 

   

  “Breaking your routine encourages your powers of observation and critical judgment, enabling you to view work from a wider perspective. Tunnel vision is the enemy of the single-minded worker, so take a side-step and look at something you don’t expect. Go for a walk, head in a new direction, to a place you’ve never been.”

• Tip 13 

   

   

   

  “I got this Twinings tea multipack recently. It’s made up of Assam, Earl Grey, Lady Grey, Breakfast, and Ceylon, and I find dipping into it perfect to spark that bit of creativity.”

• Tip 14 

   

   

   

  “To work as an illustrator, don’t think you need to be born talented–it’s not about holding the best cards, but playing the ones you have well. Know yourself, work hard, and understand your weaknesses, but also what you’re good at.”

• Tip 15 

   

  “Paste flat shapes from Illustrator to Photoshop as Shape Layers. Smart Vector Objects are great to maintain vector information in complex art, for choosing spot colors, and for rescaling. When working on murals or billboards, you can start at a third of the finished size and later upsize without losing quality.”

• Tip 16 

   

  “When creating complex layered compositions, stroke thickness needs a lot of attention. Use a smaller stroke thickness in a lighter color to make background items subtler, and a thicker, slightly darker stroke for foreground items, so they appear more clearly. For the focal point, use the thickest stroke and darkest fill color.”

• Tip 17 

   

  “Save time creating digital artwork by learning keyboard shortcuts. In Photoshop, use Actions to record specific tasks, such as changing the resolution of a batch of images rather than amending each one manually.”

• Tip 18 

   

  “Interesting compositions help retain interest in a drawing when there are many details–for example, mathematically dividing a page and balancing black and white equally. Working with rules like this keeps your brain creative–because you always want to break them, and when you do break them it makes sense.”

• Tip 19 

   

  “If I’ve hit a creative wall playing with color, and pushed hues in a direction that appeals, but not created a cohesive image, I’ll make duplicates of the image, add a layer of color and go through blending modes to see what more is possible. I’ll then pull color ideas from these variations.”

• Tip 20 

   

  “To get inspired and think of fun new ideas, half an hour hula-hooping in the garden usually does the trick.”

• Tip 21 

   

  “Don’t rely on plug-ins. Have ideas that are interesting and communicate effectively. Visual art and design is nothing if it doesn’t make a connection with the viewer and solve the communication problem. Learn how to use visual language to communicate in a way that is simple and smart.”

• Tip 22 

   

  “When starting a project, I grab visual reference. With a blobby, blocky sketch as a background, I layer reference images in Photoshop, with a Hue/Saturation adjustment layer topmost that knocks back the color to a low-contrast greyish look. I assign a layer mask to each layer image and invert the mask, turning the image invisible. Using a radial gradient, I work into the mask, exposing parts of hidden images, moving through the layers until something takes shape. The vagueness and lack of precision allows for happy accidents, where bits of exposed image work on other exposed images. From that foundation, you can refine masks, resize or reposition images, or start the illustration proper.”

• Tip 23 

   

   

   

  “Every few years, a creative group or individual affects the immediate culture of artistic individuals and their peers. It’s then up to those people that find it inspiring to go off and make their own innovative solutions, not just copy what inspired them."

• Tip 24 

   

  “You need to work on being original and make work you’re passionate about—don’t let people tell you what’s cool.”

• Tip 25 

   

  “Don’t spend much time looking at other people’s work. Know what’s going on and be aware of it, but do what you want, how you want to do it, and worry about who else is doing it later.”

• Tip 26 

   

  “The Photoshop Brush tool comes with loads of soft-edged airbrush-type brushes. Everyone uses them, which is why so much Photoshop painting looks like bad airbrushing. Seek out the one hard-edged pressure-sensitive brush and make copies of it at different sizes. This will give your work a much more organic, hand-painted look.”

• Tip 27 

   

  “We keep a library of 3D models we’ve built or purchased. This enables us to quickly mock up 3D scenes for style frames, preliminary composition, or a rough pre-viz. Also, a ‘dirt’ pass–otherwise known as ambient occlusion–enables clients to get an idea of form without getting into texturing and lighting, which may complicate the approval process.”

• Tip 28 

   

  “Keep a collection of sketchbooks. One for ideas, concepts, and thoughts, one for inspiration and accumulated stuff you like, and one for your own work, stuff in progress, experimentation, and alternate client proposals. Keep the ideas sketchpad handy, as you never know when that ‘Eureka!’ moment will hit you on a bus, out in the park, or in bed just before you fall asleep.”

• Tip 29 

   

  “The capacity to endlessly experiment with Illustrator is fantastic. You can start with an outlined letter and apply all manner of functions to see what happens. Duplicate combinations of tools to create unusual patterns, scatters, and vortexes. Have no expectations or plan–just slice, dice, duplicate, stretch, and repeat, and the results may surprise.”

• Tip 30 

   

  “Try to find time to read books, listen to music, watch movies, and do sport. I spend so much time in front of the computer that I need to give my eyes, body, mind, and spirit a break from time to time.”

• Tip 31 

   

  “I favour roaming antiques markets for the aesthetics encoded within their archaeology. It’s there I find the DNA that shapes my work and where I picked out the trembling chromosomes that determined the shape of my current body of work, Animalia.”

• Tip 32 

   

  “If in doubt, turn your work upside down, flip it, watch it in a mirror, play it backwards–anything to get a fresh perspective. Then you’ll notice all the faults. As a last resort, show your mum. She’ll spot the flaws immediately, but it won’t be pretty.”

• Tip 33 

   

  “I sometimes walk the streets for hours, sketching and taking photographs. Getting lost in the city can be a great thing. I often get off the Tube at a random station to see what I can find. I stumbled across a fair in south London one day and took a picture, returned to the studio the same day and was inspired to create the accompanying illustration.”

• Tip 34 

   

  “Loosen up with the oldest exercise in the world: drawing a nude model. Make it new by doing it on a tablet in Photoshop. If the legs look too short, try ‘perspective’ to make them longer; if the color is too drab, bump it up in layers. No mess, no mistakes! And if you’re timid, try it first with a mirror, in the privacy of your own home!”

32 more annotations...

• Grungy Metal Texture
   In this tutorial learn how to create a really nice looking grungy metal texture.

• Abstract Background of Colored Bars

   

• Colourful swirl

   
• Stripy abstract wallpaper in Photoshop
   This tutorial will show you how to create a stripy abstract wallpaper from scratch in just a few steps.
• Create a Nature Inspired Painted Background in Photoshop
   Learn how to make a background just grabs and pulls the reader right in
• Creating Chameleon Effect Fabric Texture
   Create this beautiful multi toned texture in Photoshop

• Realistic Stone Texture

   
• Chroma Wallpapers
   How to create a energetic, vibrant, colorful wallpaper
• Amazing wooden texture/background
   This tutorial will teach you a basic but effective way to complete this desired outcome, which would work great as a background.
• The lightning effect
   Develop cool lightning effects for your background
• Create Carbon Fibre Pattern
   Here’s how you can create a carbon fibre pattern and use them in any designs, all with Photoshop.
• MSNBC Style Effect Background
   Create an effect like the one in the header of the MSNBC.com website.
• Retro Grid Background
   This tutorial shows you how to create Photoshop Retro Grid Background for your Web Layout.
• Creating A Watermark
   This tutorial will teach you how to create a professional watermark on any image you like.
• Create a Retro Photo and Background
   Take a regular, boring photo and liven it up using with some effects to give it more of a retro feel to it. We are then going to take the photo and create a background for it to lie on.
• Awesome digital bokeh effect
   The process is very easy and we will be using the super powerful Brush Engine, one of the coolest things in Photoshop.
• Metal Texture Tutorial
   Learn how to create this full realistic metal texture in Photoshop
• Realistic denim (jean) texture from scratch
   In this photoshop tutorial, I play with some filter and layer style option to create a surreal jean texture from scratch.
• Creating a Mac-Type Background in Photoshop
   This tutorial is about making a “mac” style background. You can use these in all sorts of situations, including the obvious –your desktop– as well as part of your designs or for corporate work
• Abstract Light Rays
   This Photoshop background design is more subtle and simple than some of the others, but still looks great.
• Fabric Folds Texture Tutorial
   Learn to create a background image that looks like multiple folds of silk fabric. This is a great effect and technique for your collage artwork, as it is easy to blend or fade in with other elements of a collage piece.
• The Ultimate Wood Tutorial
   In this tutorial, we are going to create a wood texture and apply some artwork on top of it that has an aged paint feel.
• Create a Wavy Blackberry Style Wallpaper
   The design has a cool wavy pattern with interesting lighting effects, like the Blackberry 9000 wallpaper.
• Creating Pixel Sharp Diagonal 45-degree Scanlines Patterns with Photoshop
   The tutorial below shows you an easy way to create two different pixel sharp 45-degree scanline patterns for use as Photoshop patterns.
• Space Lighting Effects
   So in this Photoshop tutorial I will show you how to create a space scene with some nice Lighting Effects in 10 Steps.
• Creating Your Own Organic Textured Backgrounds
   The challenge in making textured backgrounds is finding the right assets, having the right tone to match the content on your site, and being patient enough to keep experimenting. There are so many combinations out there, I would love to see what everyone comes up with.
• Designing Flower Texture
   Design a cool close up flower background
• Digital Star Effect
   Turn a regular photo into a high-tech digital artwork.
• Create an Abstract Retro-Pop Wallpaper
   In this tutorial, I’ll show you how to create a beautiful, vibrant, Retro-Pop abstract wallpaper. You’ll also learn how to add some wonderful texture to your designs and make some abstract shapes!
• How to Turn a Texture into a Seamlessly Tiled Background?
   Take a texture and turning it into a background image ready for seamless tiling.

28 more annotations...

• 1

  . Remove The Unnecessary <div> Tags

   

  I’ve seen a lot of people wrap a <div> tag around the <form> or <ul> menu list. Why create an extra <div> tag that you don’t need? You can achieve the same result by applying the CSS rules to the selector.
• Sometimes we wrap the content with an extra <div> tag strictly for spacing purposes. The example on the left uses a <div class="sidebox"> to create margin space in between the boxes. But if each box has a heading (ie. <h4>), we can simply apply the margin space to the h4 selector and drop the extra <div class="sidebox"> tag.

• 2. Use Semantic Markups

   

  You should always use semantic markups to code HTML documents (ie. <h1> for headings, <p> for paragraph text, and <ul> for list items). So, even when the CSS is not presented nor supported, your document still makes sense.

• 3. Minimize The Use of <div> Tags

   

  Have you seen the messy templates where <div> tags are everywhere and they drive you crazy? Have you ever missed a closing </div> tag or have an extra opening <div> tag messing up the entire layout? I’m sure most developers have experienced it before. So, you should always minimize the use of <div> tag if possible. It will make debugging and editing easier.
• I

  nstead of using <div> tag for breadcrumb navigation, it makes more sense to use <p> tag.
• I can use CSS to cut down two <div> tags by replacing with one <span> tag. They both produce the same layout.

• 4. Format (Indent) Your Code

   

  You should always format your source code (ie. indent your nested elements) so it is easier to read and debug. If you have Adobe Dreamweaver, you can easily format the code by using the Commands > Apply Source Formatting (from the application menu).

• 5. Comment The Closing </div> Tags

   

  When coding for platform templates (ie. WordPress themes), the template is most likely splitted into several files: index.php, header.php, sidebar.php, and footer.php. Hence, you should always make a comment for the closing </div> tags so you won’t get lost. For example, when I see </div><!-- /wrapper -->, I know it is the closing tag for <div id="wrapper">.

6 more annotations...

• Flavour Extended

  • http://www.smashingmagazine.com/2009/05/20/flavour-extended-the-ultimate-icon-set-for-web-designers/
  Add Sticky Note
• Quartz

  • http://www.smashingmagazine.com/2009/06/18/freebie-release-quartz-icon-set/
  Add Sticky Note
• Siena

  • http://www.webdesignerdepot.com/2009/03/200-free-exclusive-icons-siena/
  Add Sticky Note
• Function Free Icon Set

  • http://wefunction.com/2008/07/function-free-icon-set/
  Add Sticky Note
• Project Icons

  • http://www.smashingmagazine.com/2009/04/27/project-icon-set-for-free-download/
  Add Sticky Note
• Standard Iconset

  • http://templay-team.deviantart.com/art/Standard-Iconset-126393911
  Add Sticky Note
• Stationery

  • http://www.smashingmagazine.com/2009/01/05/stationery-icons-soccer-icons-and-atlantic-wordpress-theme/
  Add Sticky Note
• Fresh

  • http://www.smashingmagazine.com/2008/10/09/finance-and-applications-a-free-icon-set/
  Add Sticky Note
• Practika

  • http://www.smashingmagazine.com/2008/09/23/practika-a-free-icon-set/
  Add Sticky Note
• On Stage

  • http://www.smashingmagazine.com/2008/08/27/on-stage-a-free-icon-set/
  Add Sticky Note
• Milky

  • http://iconeden.com/icon/milky-a-free-vector-iconset.html
  Add Sticky Note
• Web Application Icon Set

  • http://www.webappers.com/2008/02/12/webappers-released-free-web-application-icons-set/
  Add Sticky Note
• Light Icons

  • http://sone-pl.deviantart.com/art/Light-Icons-74036005
  Add Sticky Note
• Bright!

  • http://www.iconeden.com/icon/bright-free-stock-iconset.html
  Add Sticky Note
• Monofactor Vector Icons

  • http://www.monofactor.com/free-vector-icon-set-1-25-icons/
  Add Sticky Note
• E-Commerce Icons

  • http://playground.ebiene.de/2316/free-ecommerce-icons/
  Add Sticky Note
• E-Commerce Icons

  • http://www.webresourcesdepot.com/e-commerce-icons-collection/
  Add Sticky Note
• Money Icons

  • http://qvectors.net/vector-icons/vector-money-icons/
  Add Sticky Note
• Chalkwork Payments

  • http://www.mezzoblue.com/icons/chalkwork/payments/
  Add Sticky Note
• Basic Icons

  • http://prokofusha.deviantart.com/art/Basic-set-125164098
  Add Sticky Note
• WooFunction

  • http://www.woothemes.com/2009/09/woofunction-178-amazing-web-design-icons/
  Add Sticky Note
• Icons for Designers

  • http://www.littleboxofideas.com/blog/freebies/exclusive-free-icon-set-for-designers
  Add Sticky Note
• Portfolio Icons

  • http://vandelaydesign.com/blog/site-news/portfolio-icons/
  Add Sticky Note
• MinIcons

  • http://kyo-tux.deviantart.com/art/MinIcons-115690703
  Add Sticky Note
• Brand Spanking New Mini Icons

  • http://www.brandspankingnew.net/archive/2006/12/hohoho.html
  Add Sticky Note
• Farm-Fresh Web Icons

  • http://psd.tutsplus.com/freebies/icons/free-farm-fresh-web-icons/
  Add Sticky Note
• Led Icon Set

  • http://psd.tutsplus.com/freebies/icons/led-icon-set/
  Add Sticky Note
• Web Development Icons

  • http://www.icojoy.com/articles/19/
  Add Sticky Note
• Developers Icons

  • http://sekkyumu.deviantart.com/art/Developpers-Icons-63052312
  Add Sticky Note
• Sketched Up

  • http://twinware.deviantart.com/art/Sketched-up-free-iconset-103460995
  Add Sticky Note
• WooThemes Ultimate Icon Set

  • http://www.woothemes.com/2009/02/wp-woothemes-ultimate-icon-set-first-release/
  Add Sticky Note
• FamFamFam Mini Icons

  • http://www.famfamfam.com/lab/icons/mini/
  Add Sticky Note
• 32px Mania

  • http://www.midtonedesign.com/#portfolio?32pxmania
  Add Sticky Note
• Moleskine Icon

  • http://bigkobe.deviantart.com/art/Moleskine-Helvetica-Icon-R-122702258
  Add Sticky Note

32 more annotations...