Productivity Tips for Web Designers
Illustration by John Hersey

Productivity Tips for Web Designers

with Sue Jenkins

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Video: Organic and ethical SEO coding tips

- Hello everyone, this is Sue Jenkins with productivity tips for web designers. In this lesson we will review some of the ways that you can edit your code to improve your site's SEO organically and ethically all without spending a dime. Organic SEO involves making your HTML markup, your CSS, JavaScript, and other code as standards compliant and accessible as possible, while still being informative and search engine friendly.
Expand all | Collapse all
  1. 8m 11s
    1. Organic and ethical SEO coding tips NEW
      8m 11s
  2. 24s
    1. Welcome
  3. 42m 36s
    1. Making blog headlines pop, with typography
      7m 52s
    2. Exploring the secrets of effective block quotes
      4m 10s
    3. Going big with type
      5m 32s
    4. Pairing fonts for the web
      6m 59s
    5. Styling your web links
      7m 49s
    6. Improving font readability
      10m 14s
  4. 1h 13m
    1. Improving your layout efficiency with rulers, grids, and guides
      5m 56s
    2. Adding killer shadow effects
      9m 20s
    3. Creating customized type for logos and graphics
      8m 30s
    4. Configuring the workspace for web design
      8m 14s
    5. Saving time using Illustrator symbols
      8m 50s
    6. Formatting text for the web
      7m 0s
    7. Graphic styles for the web
      8m 9s
    8. Two fantastic texture techniques
      7m 52s
    9. Zen and the art of rounded corners
      4m 59s
    10. Saving time using text wrap as padding
      4m 55s
  5. 1h 17m
    1. Grabbing measurements to speed up your workflow
      5m 29s
    2. Editing nondestructively with Smart Filters
      7m 27s
    3. Using content-aware scaling for photos on the web
      7m 53s
    4. Advanced tips for sampling colors
      6m 53s
    5. Best practices for image resizing
      6m 53s
    6. Tinting images using one or two tones
      5m 45s
    7. Tricks for quick teeth whitening
      3m 47s
    8. Balancing color and tone using levels
      8m 33s
    9. Choosing the right file format when optimizing web images
      7m 46s
    10. Creating animated GIFs for memes and banner ads
      7m 28s
    11. Pulling the text from images with OCR
      4m 3s
    12. Making oddly sized images work in your layout
      5m 14s
  6. 56m 39s
    1. Using Google font effects
      4m 39s
    2. Commenting code for better clarity
      6m 19s
    3. Utilizing master CSS files to speed up design
      4m 33s
    4. Adding pizzazz with CSS shadow effects
      4m 45s
    5. Incorporating multiple background images
      4m 54s
    6. A two-minute trick for rotating objects
      4m 17s
    7. Creating stitched borders with CSS
      3m 50s
    8. Dropping in CSS drop caps
      6m 26s
    9. Coding special characters dependably with entities
      3m 29s
    10. Rounding square images using CSS
      3m 14s
    11. Customizing your text-selection color with CSS
      4m 12s
    12. Tinting images with CSS for cool hover effects
      6m 1s
  7. 1h 6m
    1. Managing sites to harness the power of Dreamweaver
      5m 36s
    2. Externalizing CSS and JavaScript for better efficiency
      7m 5s
    3. Publishing using Dreamweaver's integrated FTP
      7m 56s
    4. Cleaning up redundant and unnecessary code
      5m 19s
    5. Using Find and Replace for rapid search and editing
      8m 8s
    6. Validating your code to W3 standards
      5m 19s
    7. Using the Link Checker to find broken links and orphans
      4m 27s
    8. Building code snippets to save time
      6m 48s
    9. Creating pop-up windows without writing JavaScript
      4m 35s
    10. Hiding and showing elements to create a simple image gallery
      5m 6s
    11. Understanding links and paths to write better code
      6m 25s

please wait ...
Watch the Online Video Course Productivity Tips for Web Designers
5h 25m Appropriate for all Jul 31, 2014 Updated Jul 23, 2015

Viewers: in countries Watching now:

Productivity Tips for Web Designers is the weekly series for web designers who want to enhance their design, software, and freelance business skills and streamline their workflow. Whether you're new to web design or working professionally as a seasoned designer, you'll discover techniques that can help you become more proficient at your craft. Tune in every Thursday for a new tip on topics including typography; SEO; design software like Illustrator, Photoshop, and Dreamweaver; and web coding in HTML and CSS.

Sue Jenkins

Organic and ethical SEO coding tips

- Hello everyone, this is Sue Jenkins with productivity tips for web designers. In this lesson we will review some of the ways that you can edit your code to improve your site's SEO organically and ethically all without spending a dime. Organic SEO involves making your HTML markup, your CSS, JavaScript, and other code as standards compliant and accessible as possible, while still being informative and search engine friendly.

In addition, all SEO techniques employed should be performed in an ethical way that does not violate any laws, guidelines, or standard codes of ethics, especially those set down by Google and other search engines. You may have heard about the terms Black Hat SEO and White Hat SEO, which generally refer to the ethical practices of SEO providers. Black being bad and White being good. A better way to frame what's good or bad however is to question whether certain SEO practices have willfully disregarded Google's guidelines in a deliberate effort to improve search engine rankings.

Good SEO, like good content, attracts visitors and the more visitors that come to your site regularly the more opportunities you have to convert them into paying customers. As a web designer your role may have nothing to do with marketing or SEO, but there are some things that you can do to your code as part of your web design services that can help with organic SEO. Adding free organic SEO to your pages can be done at any time and in any order.

But for simplicity I've organized 16 techniques into three categories which I call Code As You Go, Cody Tidy Up, and Code Extras. Here are my tips for the Code As You Go category. First, use semantic markup to identify the importance of your content. That means marking up paragraph text with P tags, heading ones, heading twos, em and strong for emphasis and bold, et cetera. Number two, use accessible markup.

This includes things like adding alt attributes to your images, and target and title attributes to your links using all lowercase letters for your file names and folders, and making CSS and JavaScript external to your HTML. Third here is to use descriptive file names and folder names. Search engines really do pay attention to how you name your files, so you should name them logically based on their content. Such as about, or our mission, or weekly specials, or Golden Gate Bridge.

Fourth, use RWD. Build responsive websites that are fast loading and accessible by everyone on every device. And number five, avoid using JavaScript for your navigation menu, since roughly 10% of the internet may have their JavaScript disabled. Use CSS for menus instead. When you're finished building your site and are ready to enter your testing phase prior to publishing add the following Code Tidy Up tips to your to-do list.

First, add meta tags to all your pages. The most important one is the meta description, which can be up to 150 characters long, including spaces and punctuation. Be sure to include keywords near the front of the description and for increased SEO benefits the description can be unique on every page of your site. Second, use unique and thoughtful title tags. Your titles can be up to 65 characters long and should include keywords near the front.

Good titles often identify what visitors can expect to find on the page. Three, use internal links to relevant pages on your site. If your copy includes words for contact us for more information then link the words contact us to your contact page. Number four, fix broken links. A broken link is terrible for SEO. Number five, scan your code in code view and look for coding issues. In Dreamweaver when an error is detected the code editor will alter the color of your HTML to alert you that there's a problem.

And number six, validate your code and correct any errors before publishing. Even little things like missing alt and title attributes can be detrimental to your SEO. As for SEO sociability, consider pursuing as many of the following organic SEO suggestions as possible from the Code Extras category. Number one is embed social media follow links on your site. Establishing a web presence on social media can help attract web site visitors.

Two is to embed social media sharing links on your site so your visitors can easily share your site's content. Visit or to get free social share links for your site. Number three, increase your backlinks by becoming a guest blogger or writing articles for other websites and blogs. The more links that point to your domain the better your natural, organic SEO ranking. Number four, add Google+ authorship to your site by adding your domain to your contributors section of your Google+ account.

And number five, another really great thing to do to improve organic SEO is to sign up for Google Webmaster Tools online. Once you sign up you can get the code to add to your site, which can help you identify potential coding problems and offer suggestions on how you can fix them for better SEO. From a non-code content only perspective try to have at least 1000 or more words of text on every page. You also wanna take care to avoid duplicate content, as search engines might ignore or not even index pages that share the same information.

After you've launched your site be sure to submit your domain to Google and Bing so the site can be indexed and visitors can find you. Don't expect immediate or magical results after submitting your domain. In all likelihood, your site may take several days to be indexed. In addition, don't expect your site to be listed on the first page of search engines results listing without spending money on advertising. The only exceptions are when your company has a really unique domain name or has an unusual product or service offering and your competition is slim.

Otherwise, if you don't wanna spend any money on marketing or hiring a good copy editor your site will have to rely on good old organic SEO to naturally improve search engine rankings. Now let's see if you can identify some opportunities to apply organic SEO to a sample HTML file. Pause the video for a few minutes to review the code on this page to see how many of my 16 free organic SEO coding tips you could use to improve the file's SEO. When you're finished come back to review the results.

Welcome back. There's quite a bit that can be done to this sample page to improve the SEO. Most of the issues are in the code. From the Code As You Go section this page needs alt attributes on the image and title and target attributes on the link. The file names and folders should use all lowercase letters, and the page could be converted into RWD. From the Code Tidy Up list this page needs meta tags, a title tag, and internal links. There's also broken links and coding errors that need fixing before validation.

And from the Code Extras list this page would benefit from embedding social media links and social media share links. I hope you enjoyed learning about these 16 free organic SEO coding tips. Think of them as a value added service that you can provide to your customers to keep them happy. The more you use them, the more likely these techniques will become part of your normal web design workflow, making you a better, more conscientious, and valuable designer.

Find answers to the most frequently asked questions about Productivity Tips for Web Designers .

Expand all | Collapse all
please wait ...
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.

Mark all as unwatched Cancel


You have completed Productivity Tips for Web Designers.

Return to your organization's learning portal to continue training, or close this page.

Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.