How to Teach the Business of Web Design

As both a student and a teacher of web design, I’ve found some amazing resources on how to share specific techniques. There are tutorials online for everything from designing a responsive site to securing a site from hackers. But there aren’t a lot of similar tutorials for the actual business of web design — the processes that go along with landing a job as a web designer or building a business selling web design services.

It’s the context that surrounds web design: without some of these ancillary skills, it can be impossible to actually use the skills one has developed in web design. The question remains, though: how can we teach the business of web design?

Integrating Business Skills with Web Design Classes

When a student is first learning web design, it doesn’t make sense to distract her with other details. Just remembering the differences between CSS and HTML can be all-consuming.

But once that same student has reached the point where she’s learning the aesthetics and the nuances of web design, rather than the technicalities, there’s little reason to teach those skills outside of the context she’ll need to use them in the future.

Asking a web design student to come up with wireframes that must be approved before she can move forward seems like a little thing — something that will require more time on the part of the instructor and that won’t be missed if you skip it. But that small step is required to build the habits that a professional web designer needs. It’s rare to complete an entire project without getting any feedback at all, making it important to build the habit of asking for useful feedback and learning how to respond to it.

Web Design Best Practices

Many web design instructors teach at least some of the best practices of web design, like creating sites usable by disabled visitors. But there are best practices in every part of web design, from how a designer sets up her files to the contract that she signs with her client. Expanding a syllabus to include these steps isn’t hard, provided you’re willing to have students complete every step of a professional web design project along the way.

There may be nuances in how a web designer may prefer to manage her projects, but there are new graduates coming out with no concept that there’s any way to manage a project beyond working full steam ahead to meet a specific deadline that an instructor assigned. When such a designer has to estimate how long a project will take, the wheels almost always fall off.

What Needs to Be Taught

When a class is only twelve weeks long, it can seem impossible to fit in everything. But it’s worth remembering that few web designers learn everything in just one class: these pieces of context can be introduced in a short class and expanded on through an entire curriculum.

Project Management: Whether a web designer is looking for full-time employment or freelance clients, it’s crucial to know how to actually get all the work in a given project done. There are a variety of different project management systems out there, but as long as a designer knows the basics of setting deadlines, breaking projects up into individual tasks and getting feedback from stakeholders, she can adapt to different software.

Data Storage: Religiously backing up files is crucial to working online, but it’s not a skill every web designer has. Understanding the details of how to restore data and handle other emergencies that come up with the files that make a website run should be required.

Contract Law: Web design is often done on a contract-basis, meaning that web designers should know what they’re signing when they work with a client. There are a lot of clauses that can come back and bite a freelancer, not to mention the problems that can pop up when she doesn’t put absolutely every detail into the contract.

Copyright Law: A surprising number of web designers can’t tell you if they actually own the copyright for the designs they’ve created. There’s even the occasional designer who doesn’t know that sites can be copyrighted, which can lead to problems with copying existing sites.

Basic Bookkeeping: If a web designer wants to strike out on her own, she has to know the fundamentals of running a business. After all, if you can’t write an invoice, you can’t get paid.

There are certainly other skills that will help a web designer actually do the work she wants to. But these are particularly key, while still not appearing in most web design courses at all. Consider adding in a few elements in your next class.

Guest Author Thursday Bram is the editor of 21times.org, a daily newsletter for web developers.

Useful links: media queries, IDs, 24 Ways

Cross-Browser Retina/High Resolution Media Queries. Brett Jankord has some suggestions for improvements on the current way of working with media queries for high res devices.

IDs will not make your document more semantic by Louis Lazaris  is a response to a couple of previous authors on the question of ID use. He links to the previous articles and has an update at the end about one of the articles. Interesting semantic discussion.

Just in case you hadn’t realized it’s December, a little reminder that 24 Ways is publishing again. Today’s post is about accessibile color.

Keep it Clean: Your Blog and Clean HTML

I frequently work with content that gets moved from one place to another. Sometimes I get guest posts here on Web Teacher that have to be formatted from one source or another into WordPress. Most often, however, I work with content from a BlogHer network blogger who is putting content from their own blog on BlogHer.com.

Sometimes it can take me as long as a hour to clean up the HTML that gets pasted in from one blog to another. It is possible to write clean HTML in a blog, but it doesn’t always happen.

Why is Clean HTML Desirable?

  • It moves easily from one place to another and looks good in both places.
  • It doesn’t have a lot of inline styles that worked on one blog, but don’t make sense anywhere else.
  • It fits right in with the look and feel of its new location, because the HTML is uncluttered with presentational information.

What is Clean HTML?

Clean HTML is the bare essentials. It is content with just the tags that format it as headings, paragraphs, lists, etc. There isn’t any style information added to the tags about alignment or margins or text colors. Here is an example of clean HTML.

clean html

Clean HTML is content formatted with an appropriate HTML tag that describes the content. The example above has some paragraphs, a couple of headings, and some links. The tags (p, h3, a) describe exactly what the content is semantically. There is nothing added to the HTML that affects alignment, spacing or anything that is related to the appearance of the content. There’s another name for clean HTML. It’s called POSH, or plain old semantic HTML.

Here’s an example of HTML that is not clean or semantic.

not clean

In this example, the tags do not describe the content. A div is a generic container, so we don’t know if what is enclosed in the div is a paragraph or something else. The style rule in every div should not be in the HTML at all. Style rules belong in the style sheet, not the HTML. When you move that blog post with its added style rules to another blog, the styles in the HTML may be completely inappropriate in the new location. It’s okay to have a class assigned to an element in your HTML, it that class is really needed. In this example, I don’t think it is. Both the class and the style rules could be eliminated by formatting the text properly as paragraphs.

How Can a Blogger Keep the HTML Clean?

A big part of it is what you touch and what you don’t touch.

I’ve outline items you do touch regularly in WordPress in this image. Other blogs look approximately the same.

do touch

  • Use the media icons to upload media.
  • Use the B icon to create <strong> tags for strong emphasis. This normally makes the text display in bold and somewhat larger. Just because it’s bold and a little larger that does NOT make it a heading. It only makes it have strong emphasis.
  • Use the I icon to create <em> tags for emphasis. This normally makes the text display in italics. Just because it’s in italics that does NOT make it a book or newspaper title, nor does it make it represent a foreign language. It only makes it emphasized. See the note on bold and italic in the next section.
  • Use the Paragraph menu to format paragraphs. The pull down menu by the Paragraph also allows you to create headings from h1 to h6. Something formatted with an h1, h2, h3, etc. is a real heading.
  • Use the list icons to create lists. You can make something that looks like a list out of a paragraph with line breaks, but it’s not a list – it’s a paragraph.
  • Use the link icons to create links.
  • Use the quote icon to create a blockquote.

Touching the other icons, such as the alignment icons or the color and size icons generally add unwanted style rules to your HTML.

The indent and outdent icons will create a blockquote if you apply it to text. (Use the quote icon if you want a blockquote.) The indent and outdent icons are for making nested lists.

What if I Actually want Bold or Italic?

There are tags that create text that is either bold or italic. They are the <b> and <i> tag sets. If you actually want something to be bold instead of <strong> or italic instead of <em> you can do it in the HTML pane of your blog. The HTML button is in the upper right corner of your blog post window. When you click it you see the HTML you’re creating.

HTML pane

You can type anything you want in this window. HTML works with opening and closing tags that turn formatting on and off. So <b> says start bold here. Then </b> says stop the bold here.

Suppose you wrote this sentence:

I love my dog, Buster.

If you want the word Buster to be bold, click into the HTML pane, find the word Buster, and put the; tags around it, like this:

I love my dog <b>Buster</b>.

You can do the same with book titles or foreign words using the <i> tag.

How Often are you “Fixing” the Appearance of your Posts?

If you find yourself fussing around with margins or borders around images, or the colors of text, or the alignment of text and images, or the spacing between things each and every time you enter something in a blog post, then you are muddying up the HTML. Appearance should be taken care of in the style sheet. The blog post window should be used only to enter content. All those things you fuss with can be in the style sheet so they can apply every time you insert an image or create a heading.

I’m not going to explain how to modify your CSS rules in this post, but I may write a separate post about it at some point. I did talk about how to hunt down the rule you need to modify in the CSS in a presentation from 2009.

Less fussing with appearance is really the key. Making your style sheet do all the fussing for you is the goal. Then you won’t need to do anything with your post but add the content and mark it up with the proper formatting using semantic tags for headings, paragraphs, lists, images, and blockquotes.

Web Designers Take Note—7 Quotes from Awe-Inspiring TED Talks

Every day, new websites, social networks and blogs pop up across the Internet. Covering everything from politics to purses, these new developments convey and communicate various types of information, but they all have something in common—a web designer helped make it possible.

By combining technological advances, artistic vision and forward-thinking software, designers and developers help bring to life all sorts of ideas. However, like with any job or task—especially a creative one—the potential for burnout and stagnancy is always present. So, to give your work some new life and keep it from going stale, read over some of these inspirational TED quotes.

Eli Pariser

“We really need the Internet to be that thing that we all dreamed of it being. We need it to connect us all together. We need it to introduce us to new ideas and new people and different perspectives. And it’s not going to do that if it leaves us all isolated in a Web of one.” — Eli Pariser, Pioneering online organizer.

In Eli’s video on filter bubbles, he touches on a very real challenge that faces everyone involved in the creative process of the web and that’s keeping it broad and growing, yet connected at the same time. What he is specifically talking about it are the dangers of pigeonholing people based on their searches and interests, thereby keeping them sheltered from new ideas or perspectives. This directly relates to designers and developers, as their creations are how data even reaches the consumer in the first place. If it is unappealing or hard to follow, the search and exploration might stop there, limiting the overall experience.

Web designers must remember how their role affects the Internet as a whole, as it really is all one big puzzle, after all.

David Carson

You have to utilize who you are in your work. Nobody else can do that: nobody else can pull from your background, from your parents, your upbringing, your whole life experience.” — David Carson, Typographer and author.

This quote by David Carson is an especially important one for designers, as it serves as a reminder that no matter how complex the web might get, design and inspiration still come from within. Sure, they might be using digital software to create their masterpieces, but that doesn’t make these designers lesser artists than those using paint and a canvas. They have to see what they want to create from within and go with it. See the video in its entirety.

John Hockenberry

Design [is] the emerging ethos formulating and then answering a very new question: What shall we do now, in the face of the chaos that we have created?”— John Hockenberry, Journalist and commentator

Although John Hockenberry might not realize it, he is, in a way, speaking to the designers of the web here. They are the ones who must make sense of all of the information coming at the consumer. They are the ones that have to display it in an attractive, comprehensible way. If they didn’t, users would be lost in the “chaos” Hockenberry mentions. Hear more of his thoughts here.

David McCandless

“Data is the new soil, because for me, it feels like a fertile, creative medium. Over the years, online, we’ve laid down a huge amount of information and data, and we irrigate it with networks and connectivity, and it’s been worked and tilled by unpaid workers and governments.”” — David McCandless, Data Journalist

McCandless sort of echoes the idea of Hockenberry in that he acknowledges the web is a mass of data to be ingested by people. He goes on to say that it takes elaborate networks and connectivity to make it all a reality—that’s where the designers and developers come in. McCandless’ words should serve as a reminder to web designers everywhere just how important their job is. See the whole talk.

Maira Kalman

“I said, ‘Well, how much space do I have?’ And they said, ‘Well, you know, it’s the Internet.’” — Maira Kalman, Illustrator

Kalman’s words are brief but speak volumes. Before the Internet, artists and designers were limited by page boarders, cut lines and more. The Internet, however, has changed all that. There are copious amounts of space with which to work and endless pages that can be filled—it’s just up to designers to work with what they have and take advantage of that. Check out the rest of her TED talk.

Aaron Koblin

“An interface can be a powerful narrative device. And as we collect more and more personally and socially relevant data, we have an opportunity, and maybe even an obligation, to maintain [our] humanity and tell some amazing stories.” — Aaron Koblin, Digital Artist

Sometimes, web designers get so backed up with work and routine that they lose sight of what they are actually doing. Koblin, however, helps remind them of the art behind the labor. Through this quote and his entire TED talk, he reinforces the idea that the Internet is a powerful tool that should be used to its full potential. That’s something all designers should keep in mind as they work.

David McCandless

“By visualizing information, we turn it into a landscape that you can explore with your eyes, a sort of information map. And when you’re lost in information, an information map is kind of useful.” — David McCandless, Data Journalist

Much like some of the previous quotes, McCandless’ thoughts aim to help designers remember to keep the end result in mind. His talk centers around using the tools and space available to make an appealing, informative presentation people everywhere can appreciate. As designers, it is their job to manipulate the minor details into a big picture that makes sense and doesn’t overwhelm the consumer.

If you find your creations have gone a bit stale and are looking to rev-up your designs check out these TED quotes and videos. They should give you the eye-opening inspiration you need.

Guest author Rachel Sanders is a freelance writer and designer who creates content for various education, design, and business websites. When Rachel isn’t writing informative articles and designing websites, she likes to read, research education trends, and discuss typography. Please leave comments and questions for Rachel below. She appreciates your feedback!

 

#1reasonwhy

I first noticed the uproar over #1reasonwhy in this post: As Of Right Now, Women in Games and Tech Are Tweeting About Industry Sexism, Offering Mentoring To Others at The Mary Sue. I went to Twitter and searched on the hash tag and the number of posts coming in were so rapid I couldn’t even read them before they were gone. Since then, The Guardian has published a more comprehensive post on the topic, #1reasonwhy: the hashtag that exposed games industry sexism.

Here are just a couple of the more hopeful posts out of a sad Twitter stream on #1reasonwhy.

 

 

Will the worst offenders in the gaming industry be changed by the conversation? I hope so. Congratulations to those who spoke out about their treatment, and to those who offered mentoring and help to others.

Reading the book vs. hearing the speaker

Which book on web design or web standards or some related topic has been the most influential on your thinking? Or maybe it wasn’t a book at all, but a speaker at a tech conference?

I was thinking about reviewing Ekaterina Walter’s new book, Think Like Zuck: The Five Business Secrets of Facebook’s Improbably Brilliant CEO Mark Zuckerberg. It occurred to me that I was interested in what she had to say because I’ve seen her speak and thought she was a knowledgeable speaker. I’m predisposed to be interested in her book.

Back in the early days of web standards and efforts to achieve some sort of standardization in browser behavior, I attended talks at conferences by people like Jeffrey Zeldman, Eric Meyer, and Molly Holzschlag. They convinced me to be a believer in web standards before I’d ever read any of their books. Designing with Web Standards, Zeldman’s book, now in it’s 3rd edition, is the foundational volume on the topic. It’s a book I’ve purchased 3 times and recommended to hundreds of other people. Does that reflect my early buy-in to the idea of web standards while at a conference, or does it reflect the power and message of the words on the pages of the book?

Are you buying and using and recommending tech books by people that you don’t find on the tech conference circuit? Or do you stick with books by people you’ve seen in person at an event? In my case, I can say that I read and recommend more books by people I’ve heard speak in person. The takeaway to me is that you can sell more books if you get yourself on the speaker’s platform at a tech event.