The Angry Web Designer

It’s all about content - literally.

Okay, so I know you’ve heard this a thousand times before - and that’s because it’s true! Content is king.

What you may not have heard is how to find this content and make it work for your website. Here are some places to get started;

Find your keywords and key-phrases

1. Google AdWords;

Google AdWords has a tool that will comb your website and pick out the best keywords and key-phrases on your website. Not only that, it will tell you the popularity of those keywords for your area and around the globe, so you can identify the best performing keywords.

2. WordTracker.com;

Take your keyword and key-phrase list from Google and treck on over to WordTracker. They have a 30-day free program for you to use and try out the system. Plug in your suggestions from Google, and WordTracker will spit out some additional keywords and key-phrases to work with.

Use your keywords and keyphrases properly

Now that we have an insane list of keywords and key-phrases, we can start tailoring our content to the list. Assuming that you have a general site map you’re currently working with, you can modify the page titles and headings to correlate with the keywords. Also, this is a good time to prune pages and add pages that may seem more important after your keyword search.

The most popular keywords should be used in titles, urls and headings. Less popular keywords and key-phrases should be sprinkled throughout the content. A word of caution to the wise, do NOT spam your pages with keywords and key-phrases. Google will pick up on any gross-misuse of keywords and banish you into the sandbox. So be smart and prudent here. We’re ‘optimizing’ - use complete sentences and proper grammar (hopefully better than myself >.<).

Now there is some debate over the META tag’s use - I say use um. The keyword meta tag isn’t used as much, but Google still recognizes the description tag, so better to be safe than sorry.

Proper markup is crucial

How crucial? Well, let me put it this way - the company I last worked with paid an outside “SEO firm” thousands of dollars for zero results. Once the company launched the new site I created with 100% semantic code implemented the tips I mentioned above, they were hitting nearly 85% of their keywords.

Learn proper HTML structure and CSS. Don use tables unless you’re display tabular data - and if it is tabular data, mark up the table properly! Use only one (or two) h1 tags, h2 tags under the h1, h3 tags under the h2’s, etc. As my friend would say - think of your pages as sections of a book report or the chapters of a story. Use lists and images properly (and move non-crucial images to your css). Do not use any markup like FONT COLOR or FONT SIZE in the HTML; instead declare all styles in the CSS. This brings down the code to content ratio. You always want more content than code.

Track what isn’t working

Now, if you’re in the sandbox (the place Google sends websites before they’re ‘trusted’) - this step will take some more time. Regardless, you should be using some sort of tracking or analytics tool to monitor the actions people take when visiting your site. Track where people are coming from, how long they are staying on the site, where they go on the site and how long they stay on each page. These four indicators will tell you what your strongest keywords are and wether or not people are finding the information they thought they would. Make modifications to pages that have high bounce rates and low lingering times.

That’s it kiddies - SEO in a for web designers. There is a lot more you can do in term of online marketing, but that’s another article entirely. The point is, TRUE and REAL SEO begins and ends with design and development. No outside firm can offer true SEO services, that would require changing HTML - which they don’t do. They offer ‘marketing’ services (and crappy ones at that). I promise to cover Internet Marketing soon - but for now I need to finish this site.

—–
Hi, i am interested in developing a logo for my new company. I do not have much to offer in return, but i am willing to allow you to keep the design in your portfolio. Please email me if you can help and i will email you back with the name of my buisness, our services and what type of logo i am looking for.
—

I am tired of you douche bags coming on here saying “I can’t pay you much, but you get to keep it for your portfolios!” Yippie. It’s asshats like you that completely undervalue the services we graphic artists provide to our clients. Do you not understand the worth that is to be the identity of your company? If someone told fed me this line, you know what I’d do short of laughing in their face? I’d slap some clip art on it and call it a day because when a client says something like that to me, I’m thinking they must not care what their company is truly worth. Oh, and believe it or not, college students need to eat. “Getting to keep it for out portfolio” does not pay the bills. We are selling a worthwhile, legitimate service. You wouldn’t for to your mechanic a suggest such a thing, or to the hair salon for instance and demand high lights when you only can only afford the trim. This informative video explains what I’m getting at;

The Vendor Client relationship - in real world situations

Oh and by the way, students develop their portfolio in school, THAT’S WHAT IT’S FOR!

Web Design Inspiration and CSS

1. HTML5 Gallery
2. Abduzeedo
3. Best of the Web Gallery
4. CSS Globe
5. CSS Mania
6. CSS Arts
7. CSS Elite
8. CSS Heaven
9. Faveup
10. Fuel Your Creativity
11. Icon Pot
12. BittBox
13. Spoon Graphics Blog
14. Share Some Candy
15. Logo Design Love
16. Noupe

Best Practices

1. Astheria
2. POSH CSS
3. CSS Tricks
4. Perishable Press
5. w3c HTML blog
6. A List Apart
7. Zeldman Presents
8. Molly Holzschlag

Usability and Science

1. Creating Passionate Users
2. Joe Lamantia
3. CyberPsychology & Behavior
4. PEW Internet
5. UIE BrainSparks
6. UX Booth

Design and Development Resources and Tutorials

1. PSD Tuts
2. NET Tuts
3. Vector Tuts
4. Delicious Popular
5. Microformats:Recent Changes
6. MezzoBue
7. Outlaw Design Blog
8. Six Revisions
9. Vandelay Design Blog
10. 37signals - Signal vs. Noise
11. 43folders
12. Dave Woods Blog
13. MakeUseOf
14. WebAppers
15. Designs From Scratch - Articles and Tutorials
16. Smashing Magazine
17. Web Resources Depot
18. YUI Blog
19. JQuery Blog
20. MooTools - The Blog
21. CSS Zen Garden

Marketing and Business

1. Andrew Chen Blog
2. John Battelle’s Search Blog
3. Google’s Social Web Blog
4. Google’s Webmaster Blog
5. I, Cringely
6. Duct Tape Marketing
7. Fast Company
8. INC
9. Seth’s Blog
10. Small Business Trends
11. Marketing Experiments Blog
12. SEOMoz

After reading Teifion’s post on SEOMoz, Hiding from your competitors, it got me thinking, what else could you do to screw over your competition?

So let’s set the stage. You’re awesome; your competition sucks (this is accurate right?). By hiding your delicious code from these evil blood suckers, you can gain an advantage over their mediocre abilities. Meanwhile, they can’t hijack your awesome skills.

Teifion makes some wonderful suggestions, you can;

1. Redirect your competitors, based on their IP address (read Hiding from your competitors to learn Teifion’s suggestion on how to get their IP address).
2. Add a touch of remembrance - basically show them your site from 10 years ago. We all have that monstrous “first site” zipped up somewhere; admit it, we all hold on to old crap ;).
3. Really be devious - This is my favorite part! Teifion suggests you break all the links on your redirect site, add tons of slow loading images and scripts and make the experience down right painful for anyone to view the site. Lovely!

This all got me thinking, what other things could you do in order to make you competition believe you’re more clueless than they are?

1. Alert “Welcome to the of our site” - on every page …
2. Disable the browser back button
3. Create navigation links (i.e. About Us, Contant Us) that actually are actually PDF downloads
4. Make links “blink” on hover, or disappear completely
5. target=”blank” - everywhere
6. Place google adwords all over your pages
7. Start all your documents at the body tag

Have fun!!!

Every once in awhile I’ll scan the CraigsList board to see if there are any interesting web design contracts or jobs; and lately, it’s been looking rather bleak. What’s more annoying however, is the fact that some of these job posts list ridiculous pay for highly skilled positions. I suppose people could be happy that jobs are even available - but reducing someone’s normal salary by a third (or even by a quarter) is absolutely ridiculous.

Some of my favorite CraigsList failed ads for web design positions;

1. ASP/VB 6 Programmer - $14-$16 an hour
2. “Web Designer needed A.S.A.P!!” - $12 an hour
3. “Entry level Web Design Position” - $10 an hour
4. “PHP web assistants(s) needed” - $10 to $15 an hour
5. “Graphics Specialist (Mid) $18/hr ” and “Graphics Specialist (Junior) $15″
6. “Joomla Expect to Redesign / Add / Mod!” - $10 an hour
7. “Technical Support Tier I Representative” - $11 to $13 an hour

The really funny thing is, these ads expect skills such as;

• HTML / CSS
• LAMP (linux, apache, mySql and php)
• VB
• JavaScript / AJAX
• CAD
• GIS
• Flash
• SEO / PPC

WTF?? A person who has only 3 of those skills should earn at LEAST $20 an hour - and that’s modest.

I suppose this is the reason the web is so darn ugly - you get what you pay for!

By Laura Milligan

If you’re looking to break into the web dev industry, start your own development and design business, or learn a few new skills to remain a competitive force in your field, you don’t necessarily have to go back to school and pay for an expensive degree. The Internet is full of free tutorials and collections from top universities and well-respected websites to train you in areas like web design, graphics and imaging, programming and coding, multimedia, connecting with your audience, and even learning freelancing and entrepreneurial skills to help you grow your business. We’ve collected over 100 of the best open courseware collections in this mega list just to get you started.

Web Development

Learn web page authoring, the basics of HTML coding and programming skills here.

1. Software Engineering for Web Applications: This MIT course gives intermediate to advanced instruction in Web security, accommodating user demands and more.
2. Web Page Authoring: Get the basics of working with HTML coding so that you can start experimenting with colors, text, links and more.
3. Ruby on Rails: Learn about plugins, Ruby tools, and style information from the Ruby wikibook.
4. Visual Basic 6: When making websites that need to accommodate Internet explorer, turn to this collection of free tutorials.
5. Server-Side Web Development Distributed Lectures: Learn all about server-side programming, Web servers, creating PHP programs and more from these lectures.
6. Web Programming, Development and Data Integration: This class covers everything from Dreamweaver MX to databases to copyright and patents.
7. HTML Basics: You can’t be a web developer if you don’t know HTML. Learn the basics in this course from the University of Washington.
8. Introduction to Creating Home Pages on the World Wide Web: This collection covers a basic network overview, dos and don’ts of web design, and more.
9. Computer Science E-1: Understanding Computers and the Internet: This course can be taken in Chinese, English, and Turkish, over YouTube, iTunes, or Google Video.
10. Firefox: The Mozilla Developer Center publishes this tutorial for Firefox caching and more.

Multimedia

Working with multimedia can give your designs and your business the extra push you need to attract more clients. Discover ways to create multimedia designs in this list.

11. Introduction to Flash MX: Sofia’s course introduces web devs “to the Macromedia Flash multimedia authoring environment.” You’ll learn about animation, sound and more.
12. Multimedia and World Wide Web: This DePaul University class is broadcast through iTunes.
13. Designing Social Media: Designing social media sites and outlets online requires an understanding of unique concepts.
14. Social Visualization: This MIT class challenges Web workers to “examine ways of visualizing people, their activities and their interactions,” especially online.
15. Introduction to Multimedia Programming: Watch these videos to learn all about multimedia projects and concepts, including regions, presentations, binary notation, and more.
16. Building an Internet Radio Station: This course covers the basics of creating an Internet radio station, including legal issues, examples of successful Internet radio stations and more.
17. The WebDeveloper.com Secret Guide to RealAudio: This tutorial maintains that “making RealAudio files is easy and can be completely free.” Learn how in this tutorial.
18. Multimedia: Interactivity, Composition and Synchronization: Consider technology standards, multimedia distribution, and the culture of multimedia in this French-language class from the ParisTech “Graduate School.”
19. Multimedia: The Tutorials for Web Developers site has a whole section devoted to multimedia questions and tips.
20. Fundamentals of Computational Media Design: Consider digital art and traditional art in this MIT class.
21. Creating Interactive Multimedia: The University of Southern Queensland offers this class students wanting to improve their web development and design skills.

Web Design

From fonts to colors to shading to graphics, read below for free courses in web design.

22. Three-Dimensional Modeling, Animation and Rendering Using Blender 3D Software: This class from Tufts University helps web designers and developers create 3D images on the computer.
23. Computer Graphics: Learn about perspective, lighting, shading, algorithms and other computer graphics topics in this MIT class.
24. Algorithms for Computer Animation: This graduate-level course will give you advanced training in developing images and animation.
25. Introduction to Web Design: Learn about Basic HTML coding, fonts, colors, and more in this Indiana University course.
26. Virtual Reality: Gain an understanding of virtual and computer design through texture, sensors, lighting, shapes and text.
27. Design: Learn about the basic principles of design and what it takes to organize a design project in this course from The Open University.
28. Cascading Style Sheets: Learn how to manage colors, fonts and other design concepts with the help of this collection.
29. Graphics: Find tutorials for Flash, Photoshop and more here.
30. Graphic Design: Miami Dade College’s class in graphic design basics is offered through iTunes U.
31. Illustration: This course focuses on using Adobe Illustrator to create designs on the computer.
32. Getting the Most From Your Effects: So what if you can’t keep up with all the new design downloads or afford to purchase cutting edge software? Understand how to make the most of the tools you already have with this free guide.
33. Website Design: This collection connects designers and developers to great tools, free templates, and loads of tips for creating effective, profitable sites.
34. Information Visualization: Learn all about color, interaction, graphs and trees, perception and more design concepts in this course.
35. Introduction to Computer Graphics: This undergraduate course from the University of British Columbia covers lighting and shading, textures, curves, and other visualization basics.

Freelance/Entrepreneurial Collections

Turn your hobby into a lucrative career or side gig by freelancing. These classes and courses will help you get started.

36. Podcast for Freelance Graphic Designers: If your specialty is graphic design, listen and watch these podcasts that give tips on making your career successful.
37. Introduction to Copyright Law: If you’re working for yourself, you need to be extra certain about copyright laws and infringements.
38. 20+ Ways to Make Money Creating Online Cartoons: This short tutorial could give you a boost in marketing yourself, getting motivated, and making a few extra bucks.
39. agO Design: This collection of Web design and freelance tutorials will connect you to must-have tools, advice for “creative block” and more.
40. Communications and Information Policy: MIT gives students and Web developers a peek into “the technology and policy context of public communications networks” in this class.
41. Internet and Copyright Law: Check out this tutorial for another look at Internet copyright law.
42. Law for the Entrepreneur and Manager: MIT’s business law class is designed especially for those running their own businesses.
43. Freelance Tutorials: This inclusive collection features courses that help new freelancers decide whether or not a self-driven career is right for them, searching for jobs, and working with clients.
44. Podcasts: These aren’t exactly classes, but these podcasts from FreelanceSwitch have great tips, support and stories just for freelancers.
45. Business: The Tutorial Blog publishes business-oriented tutorials and courses just for freelancers. Learn how to better manage your projects, correctly invoice clients, and be more productive.
46. Web Careers: W3Schools gives web developers tips to start their own web worker career.

Finance and Business

For more specialized help with managing your web business and finances, turn to these classes to learn about web standards, management techniques, accounting and more.

47. The Business of Web Standards: In this tutorial, Web workers learn how to design quickly while maintaining quality sites.
48. Entrepreneurial Finance: Learn how to handle your own finances, as well as your creative pursuits, in this MIT class.
49. Business Operations and Management: This collection from Kutztown University of Pennsylvania Small Business Development Center includes classes that will help you start up your own web development business.
50. Accounting Courses: Classes in this collection include “Preparing a Balance Sheet,” “Accounting 101,” and “Preparing a Cash Budget.”
51. Pricing: Understand demand, pricing strategies for new and old products, and consumer behavior in this course, so you’ll know what to charge your clients.

Usability and Connecting with your Audience

If your designs can’t connect with an audience, your clients won’t be happy and you won’t be making any money. These classes from MIT and other authoritative sites challenge you to design for real human beings and an active Internet community.

53. Queues: Theory and Applications: Understand the nature and purpose of queuing systems in the service and computer industries in this course.
54. Principles of Digital Communications I: This class may be especially important for developers whose websites will appear on cell phones and other mobile or wireless devices.
55. Affective Computing: Learn how computers and humans interact by studying emotion, voice, behavior and other concepts.
56. Common Sense Reasoning for Interactive Applications: Learn how to create applications and interfaces that highlight common sense reasoning.
57. The Anthropology of Computing: Get a social history of computers in this course.
58. People-Centered Designing: Though you’re working with computers, it’s important to know how to create designs that affect real human beings.
59. Using Web Standards in Your Web Pages: Update your design and development skills by learning how to make old browsers and new web standards coincide.
60. Software Accessibility - Where are we Today?: Discover how to make the most of technology and the Internet through alternate input devices, sound, visual images and more.
61. Making Sure Your Theme Works with RTL Locales: This tutorial helps developers who need to design a site that can be read in Hebrew, Persian, Arabic and more.
62. Theme Change in Firefox 3: Update your client’s sites so that they are displayed correctly in Firefox 3.
63. Back to the User: Creating User-Focused Web Sites: This two-part series helps you “use your real estate wisely” and create relevant designs to attract customers.
64. User Interface Design and Implementation: Learn “how to design good user interfaces” by understanding the basic concepts and practical tools involved in the process.

Advertising and eMarketing

Learn how to advertise your own business and give your clients’ sites a boost with these general and Internet-specific marketing courses.

64. How to Find Clients: Advertise yourself and figure out ways to find new clients in this tutorial for Web developers.
65. Marketing Courses: Try out these marketing courses to advertise your services online.
66. E-Marketing: This Spanish-language course from the University of California - Irvine gives a great introduction to e-marketing.
67. Search Engines: Technology, Society and Business: Get a thorough understanding of what search engines can do for your business and your client’s websites in this UC - Berkeley course.
68. Listening to the Customer: Help your business grow by giving your customers more than well-designed websites. This course will teach you the skills you need to analyze market trends and customer behavior, which will help you create more effective designs and sites.
69. Entrepreneurial Marketing: If you’re thinking about turning your Web dev hobby into a small business, learn new marketing techniques in this MIT class.
70. eMarketing 101: Chapters in this course cover topics in blogging, e-mail marketing, viral marketing, and more.

Programming

Master programming skills in C++, Java, PHP, C#, Ruby and more here.

71. Java Programming: Let Sofia show you how to work with Java and understand object-oriented programming.
72. Learn to Program in C++: Learn all about C++ in this thorough tutorial from Cprogramming.com.
73. C# Programming for Beginners: This course, from C# Corner, shows you “how to write and compile C# programs, understand C# syntaxes, data types, control flow, classes and their members, interfaces, arrays, and exception handling.”
74. The Java Tutorial!: Here is another Java-oriented course to help you write applets, troubleshoot Java problems and more.
75. PHP: Visit this site for information and how-tos on PHP basics, functions, forms, html entities and more.
76. Programming: PHP: This Wikibooks guide discusses the basics of programming with PHP, and it provides links to other great PHP and Web development resources.
77. Ruby Learning: This website “helps programmers have more fun!” Check out the Ruby Study Notes for an introduction and support for Ruby.
78. Programming Methodology: Rice University’s general programming course features topics in computer architecture and C++.
79. Information Science and Technology: Read lectures in computational linguistics and advanced computer architecture from the University of Tokyo here.
80. AJAX: Learn to work with AJAX when using XML, JavaScript and more.
81. ASP is FUN!: This free class teaches the basics of ASP coding, working with a database, ASP functions, troubleshooting and more.
82. Fundamentals of Red Hat Linux: This free course includes a section on configuring the Internet, setting up domain names and more.

General Computer Collections

These refresher courses will keep you current in computer science, Internet culture and Web development.

83. Information on the Web: Improve your Internet search skills so that you can find what you need more quickly.
84. Tutorials for Open Office: Learn how to use OpenOffice for your work with the help of these tutorials.
85. Protocols in Multi-Serve Networks: Consider how your design or site connects and communicates with other humans and computers all over the world.
86. Machine Vision: For a scientific approach to creating images and communicating symbols, take this course from MIT.
87. Introduction to Computers: This UC - Berkeley class covers topics in website design, copyright issues, virtual reality, the nature of data and information, and more.
88. Principles of Computer Systems: This intro course from MIT may help you take your Web development and computer business to the next level.
89. Ambient Intelligence: This class considers the future of technology, where “people are surrounded by intelligent and intuitive interfaces embedded in the everyday objects around them.”
90. Web Building Tutorial: Learn about web standards, web design, web security and more in this free tutorial from W3Schools. This collection even includes a web glossary.
91. Web Hosting Tutorial: From hosting e-mail to hosting domains to hosting databases, this tutorial covers it all.

Miscellaneous Collections

From bug reporting to ethics to typography, this list features a mish mash of web development tutorials and concepts.

92. Mozilla Web Developer FAQ: Get help working with Mozilla browsers here.
93. Bug Writing Guidelines: Learn how to write bug reports in this tutorial.
94. Setting Up Extension Development Environment: This Mozilla-centered tutorial discusses debugging, working with different extensions, and setting up a development profile.
95. First Impressions on the Internet: Keep these tips and design concepts in mind when creating a web page meant for any type of audience.
96. Media in Transition: Get a history of the ever changing technologies and communication systems in this course.
97. Human Computer Interfaces: This French-language class from the ParisTech “Graduate School” explores human interaction with computers and technology.
98. Ethics and the Law on the Electronic Frontier: MIT’s class explores Internet regulation, the fourth amendment, policy-aware Web and other topics related to law and the Internet.
99. Image Processing and Artificial Vision: This class covers “image processing and the main techniques used in artificial vision and multimedia applications.”
100. Holographic Imaging: Learn how to create your own holographic images in this MIT class.
101. Digital Typography: This MIT course is from 1997, but it offers a solid history of typography and challenges students to develop new digital applications.
102. Using Timers to Benchmark PHP Applications: This open course from the Dev Shed helps web developers create benchmarking scripts.