Category: HTML

What Is HTML? Back to Basics

Since I have a background in print, I’m always eager to help designers from other areas get a start in web design and basic development. I know from experience that the transition is an extremely intimidating one that many people simply don’t think they can manage.

screenshot

Since I have a background in print, I’m always eager to help designers from other areas get a start in web design and basic development. I know from experience that the transition is an extremely intimidating one that many people simply don’t think they can manage.

Fortunately, I can also attest to the fact that it’s probably not as difficult as you might imagine. In the world of hardcore coding, HTML and CSS rank pretty low on the barrier to entry scale.

Today we’re going to start a series that examines the basic building blocks of web development. HTML, CSS, JavaScript; if you’re a complete and utter beginner who might not even have a basic grasp of what these technologies are much less how to wield them, then this series is for you.

 

What Is HTML?

There are a million ways that I could start this discussion. We could go into the drivel of how HTML stands for Hypertext Markup Language or how it was invented in 1980 by physicist Tim Berners-Lee as a system for sharing documents, but you can get all that from Wikipedia. If you’re interested in the history of the World Wide Web, I highly recommend investigating the topic further, but that doesn’t help us much in our discussion of what HTML is today and how you’ll need to use it.

What you really need to understand is the conceptual purpose of HTML. What is it for? Why do you need it? How does it compare and relate to other technologies like CSS and JavaScript?

HTML: The Most Important Piece

screenshot

Along these lines, HTML can be thought of as the fundamental building block of the web as you know it. There’s an underlying architecture of complicated technology that makes up “The Internet” but the good ol’ WWW is largely dependent on HTML.

In fact, technically, HTML is all you need to create a web page. A few extremely simple lines of HTML uploaded to a web server would constitute a web page, which is definitely not something that can be said for CSS and typically not something that can be said of JavaScript. The point here is that, while all of these technologies are closely related, HTML is the pivotal piece of the puzzle.

Now, before you get too excited, that doesn’t mean that you can get away with only learning HTML. You’d be hard pressed to find a modern web page that doesn’t utilize, at minimum, a combination of HTML and CSS.

Markup Languages

To truly understand what HTML is, you’ll need to understand what markup languages are and why they exist (I’m sneaking in that drivel after all).

Basically, the web is written in plain text. Now, by “plain text” I don’t just mean a lack of images, I mean a lack of rich formatting of any kind. Unlike in Microsoft Word where you can easily create bold italic text at any point size, writing code is more like using WriteRoom or IA Writer; all you get is plain old letters and symbols.

The Typewriter Metaphor

screenshot

Imagine composing an essay on an antique typewriter, then handing that essay to someone so that they could enter it into a computer. Your typewriter doesn’t have any formatting features, but when your associate enters your essay into the modern word processor, you want it to have headers, bold text, italic text, bulleted lists and more. How would you tell that person where to implement these features?

The answer is of course that you would “mark up” your document and insert extra indicators of how you want the text to be formatted. These wouldn’t be present on the end result but are merely meant to tell the interpreter how to make everything look the way you intend. This is exactly how a markup language works. With HTML, this markup is accomplished through tags.

Tag, You’re It

As I write this article, I’m doing so in plain text HTML. This means when I want to bold something, I can’t simply hit a button. Instead, I insert a bold tag:

1
The last word will be in <b>bold</b>.

See how I used “<b>” to indicate where the bolded text would begin? Also notice how I used “</b>” to indicate where the bolded text would end. To italicize something, I use the same technique.

1
<i>This is italicized.</i> This isn't. 

The bracketed portions are known as tags, and each set of tags has a starting and stopping point. With these, you tell the interpreter, in our case a web browser like Firefox, how you want the content to be formatted. When we place content between an opening and close tag, we typically say that we have “wrapped” it in a tag.

Example Tags

Now that you know what tags are, here are some more very basic examples of some HTML tags:

  • <p>paragraph</p>
  • <h1>header</h1> (h2, h3, h4, etc. create incrementally smaller headers)
  • <small>small text</small>

Links, Tags and Attributes

screenshot

This is where the “Hypertext” in “Hypertext Markup Language” part comes in. One of the major parts about writing HTML, and indeed about using the web in general, is linking. That’s how it all works right? If there is a web page loaded into your browser and you want to get to another page, what do you do? Click a link! This system is fantastic for connecting all of the various bits and pieces of information stored on the web.

To link something in HTML, we of course use a tag. This tag is going to look a bit more complex than most though. Let’s look at an example that links to the Design Shack home page.

1
Read <a href="http://designshack.net/">Design Shack</a> daily for awesome bits of design goodness.

Here we have not just a tag but an attribute as well. The tag (<a></a>) tells the browser that there’s a link and the attribute (href) tells the browser where the link should go. The syntax for this type of structure is as follows:

1
<tag attribute="VALUE">Text, images, etc.</tag>

In our previous example, anything between the “a” tags becomes a link. So the words “Design Shack” would’ve been an active text link that, upon clicking, directed the user to the href URL, which was the Design Shack homepage.

Placing an image via HTML works much the same way. We use the “src” attribute to point the browser to the location of the image and the “alt” attribute for text that will appear in place of the image if it can’t be displayed. Notice the closing tag structure is a bit different this time with all the “img” info placed within a single tag.

1
<img src="images/thepicture.jpg" alt="alternative text">

You Can Read HTML!

If you’ve been reading along up to this point, the following should make perfect sense.

1
2
3
4
<h1>What is HTML?</h1>
<p>You've officially learned enough that you should be able to read basic <bold>HTML</bold> fairly easily. This text is marked up with all kinds of tags, but once you know what they all mean, it becomes fairly readable doesn't it?</p>
<p>Now that you know what HTML looks like, let's move on and discuss it from a more <em>conceptual</em> point of view. What purpose does it serve in the grand scheme of web design?</p>

HTML: The Skeleton of a Web Page

screenshot

We now have a good idea of how HTML is a markup language and what that means. We know that it’s basically a way to give the browser plain text and have it output richly formatted and even active content that can be clicked on to some end. The last thing we need to understand is how it fits into the overall picture of a completed web page.

As we’ve seen in the examples above, HTML mostly relates to directly inputting content onto a page. The actual underlying structure of any web page is the kind of tagged statements we just learned about. Most text and links you see on any given page, as well as many of the images, are implemented directly with HTML.

HTML is Meant to Be Boring

As I said above, HTML is technically all you need for a web page. However, this HTML content by itself is quite plain. Notice that nowhere in the examples above have we told the page what background color we want to use, what size the text should be, which fonts to apply where, how wide certain portions should be and how they should line up, etc.

We’ve simply thrown in the content without any real thought towards what it will look like. Looking at any page on the web you can see that no one stops here. Each site has its own look and feel, its own color scheme, typography, layout, etc.

For example, imagine that your local news site picks up a story from the Associate Press. They could print the story verbatim and therefore have the same basic HTML structure for that content, yet it would likely look quite different from the version on the AP site. Why?

CSS is The Skin, Hair and Clothing

The answer is that modern HTML is not generally used to govern aesthetic style and layout. For this, we’ve adopted something called Cascading Style Sheets, or CSS.

The typical web developer workflow might be to insert all the various pure content first into an HTML document, then jump over to CSS and begin crafting that content to appear in a more visually pleasing and usable way. A year later the developer could come back and toss in a brand new CSS file that makes the website look completely different, all without touching the HTML.

JavaScript jumps into this game by taking a more active role in how the page behaves. Animations, form submissions, dynamic content, these are the domain of JavaScript. Lately CSS has been encroaching on this territory, but that’s a topic for another day.

What Is HTML5?

screenshot

Before we wrap this up, you’re probably wondering what the heck all this HTML5 talk is about. HTML5 is exactly what it sounds like: the fifth major iteration of HTML.

Web technologies aren’t set in stone, they’re constantly evolving and expanding. Just like print designers generally have to keep up with the newest bells and whistles in the latest version of Photoshop, so web designers have to keep an eye out for changes in web standards.

HTML5 brings lots of new features to the table while cutting out some unnecessary fat from its previous installment. For instance, HTML5 developers have some new tags to work with that make the basic structure of a web page more logical.

For more on HTML5, check out our complete series on the topic:

Conclusion: More to Come!

This article was meant to give you a basic conceptual overview of HTML. If you started reading without a clue as to what HTML is and how it’s used, hopefully you now have a basic grasp of these concepts.

As we look to the future I’ll be expanding this topic and walking through the basic anatomy of an HTML document and then moving on to another important question: What is CSS?

Be sure to check back soon for more on these topics!

Image sources: xlibber, Ryan Amos, Dave Parker

Career Options: 10+ Types of Graphic Design Jobs to Consider

So you want to be a graphic designer? What does that mean exactly? What types of jobs are available? It turns out deciding to be a designer is a pretty vague choice that often requires some more direction and career evolution before you really land yourself in a meaningful career.

So you want to be a graphic designer? What does that mean exactly? What types of jobs are available? It turns out deciding to be a designer is a pretty vague choice that often requires some more direction and career evolution before you really land yourself in a meaningful career.

Today we’ll explore the underlying structure of the graphic design industry and take a brief look at some different design jobs and career paths that you can and should explore. Whether you’ve been a designer for ten minutes or ten years, this article could help you find your place in the industry.

 

A Word About Semantics

The following descriptions represent, at best, industry norms largely based on my own experience. The truth is, there are no real restrictions or guidelines in place for labeling a design job and frankly, employers often get it very wrong.

I’ve seen “front-end” design jobs with years of hardcore coding knowledge requirements, “senior” design jobs that are in reality quite low level, and companies calling for expertise in UX without even knowing what it is. The simple truth is, you can’t always judge a job by its title but will have to look at its requisites and expected daily activities to be sure.

Levels

Before we get into specific areas of the industry, you should familiarize yourself with some of the basic levels that you can expect to be placed at in any given specialty. Whether you’re in package design or UI, you’ll find that there’s a hierarchy to climb your way up if you want to reach the top and make the big bucks.

Mac Operator/Entry Level Designer

Mac Operator (sometimes written “MAC Operator”) is a term that you almost never hear in web design but appears frequently in the print industry. Other terms like “Mac specialist,” “artworker,” “entry level designer,” or even simply “graphic designer” are often equivalent.

Though the use of the term varies considerably, most often you’ll find that a Mac Operator is someone who, quite frankly, can use a Mac for what is was once widely known for: desktop publishing. Mac Operators can, at the very least, use page layout software (Quark, InDesign, etc.) with a high level of proficiency.

“Mac Operators can, at the very least, use page layout software (Quark, InDesign, etc.) with a high level of proficiency.”

Mac Operators are often not usually in a position to display much, if any, creative prowess. Instead their roles are restricted to converting existing low-resolution artwork or sketches from designers to a print-ready layered file or to make minor changes to preexisting work created by someone else.

As an example, I worked for a marketing company who would have designers come up with a first round of artwork, which would be sent off for approval. If the piece came back with copy changes and other slight suggestions, it would go to the Mac Operators to be tweaked. If however, it required major design changes, it would go back to the higher level designers. In smaller companies this is obviously done all by one person but larger companies want to make sure they’re paying high level designers to do high level work, not copy changes.

Mid-Level Designer

This takes almost no explanation and is pretty much exactly what it sounds like. As a mid-level designer, you’re neither at the bottom or the top. You have a few years of experience, often anywhere from 3-7, that has earned you a reasonable pay bump and the freedom to actually engage in custom design projects from the ground up whether as a team member or solo designer.

“These are the meat of the industry and tend to be the guys and girls who produce the largest volume of work.”

Advertising agencies, marketing companies, dedicated design firms, these are filled with midlevel designers. These are the meat of the industry and tend to be the guys and girls who produce the largest volume of work, which is then passed up the line for approval and suggestions. The pay varies widely, the hours can be crazy; this is the stereotypical graphic design job.

Senior Designer

Senior designer is a pretty vague title as far as duties go. It’s typically gauged more by experience than duties, with those designers who have 6+ years of experience having a much better chance at landing a senior design position.

A very typical example of a design team will have one or two senior designers, with a handful of low to mid level designers. The senior designers are often the voices to listen to, the experienced few whose opinions carry more weight and paychecks slightly higher numbers, without necessarily being “the boss.”

“The senior designers are often the voices to listen to, the experienced few whose opinions carry more weight and paychecks slightly higher numbers.”

The senior designer is often the one who reports to the creative director and goes through status updates on various projects, lessons learned on past projects, etc. Direction from the creative director is often filtered through this person to the team.

Again though, expect senior designer jobs to be all over the place. Often it only refers to the years of experience you have. You could easily find yourself with a “senior designer” position in a company where you’re the only designer!

Art/Creative Director

These are the Don Drapers of the world. While everyone else sits in a cubicle, the Creative Director sits in an office. For the most part, Creative Directors started at the bottom and worked their way up through 10+ years of experience.

“While everyone else sits in a cubicle, the Creative Director sits in an office.”

A typical Creative Director might actually do more managing than actual full on design work. Good Creative Directors know how to maximize the potential of their teams. All major work is filtered through them and they have the ultimate say on the direction of the creative, specific artwork used, how the tasks are split up and more.

They also manage a good deal of the client relations. Meetings, planning, phone calls, emails, lunches, dinners, long flights and presentations fill the time of the Art/Creative Director, which some love while others long for the days when they could spend their time in front of Photoshop.

The Creative Director position is a precarious one. Often, they get the praise when a project goes right, even if they haven’t really designed a single thing. Similarly, when projects go horribly wrong, they take the blame, even to the risk of their own jobs. They’ll pass both praise and castigation on to their team, but ultimately it’s their heads that often rest on the chopping block.

Areas of Design

Now that we’ve made it through basic hierarchy, it’s time to examine some different directions your career could take in terms of emphasis. There are a million different types of designers and this list is not meant to be exhaustive but to provide a brief overview of the most popular titles.

I’ve split the jobs between the web and print industries. The two are conveniently categorized as separate, but the reality is that you can easily find overlap in the real world. The smaller the firm, the more likely they are to have one person who makes the coffee, designs the packaging and codes the website. Larger firms tend to specialize more and allow employees to settle into a niche.

Print

If you’re going into design, there’s no reason to only consider the digital world. Before you pursue this path, take a look at our recent article, Are Print Designers Doomed? An Important Look at the Facts. This outlines the very real trend of the decreasing availability of print jobs in light of the simple fact that print designers will definitely still continue to play important roles in society for all of the foreseeable future.

Package Design

Package designers are exactly what they sound like, they design the boxes, bottles, cans, bags and cartons that fill every shelf in every store. A package designer could focus primarily on label artwork (canned goods and cereal boxes are pretty set in shape and size) but they could just as easily be asked to come up with ideas for custom containers. Shampoo bottles are an example of a product with a container that is often heavily customized by each major brand.

“These designers have an amazing sort of anonymous fame.”

These designers have an amazing sort of anonymous fame. Their work is everywhere: in our stores, all over our kitchens and bathrooms, even in our dark, abandoned backyard sheds. Every product you’ve ever purchased that came in any sort of container was largely a work of a packaging designer.

If you can spend hours comparing peanut butter labels and dog food photography, then packaging design might be right up your alley. If you have a taste for 3D modeling, physical container design is definitely a field to explore.

Advertising/Marketing

These jobs exist in both the print and digital categories with more and more dollars being directed away from print and towards digital every year. I merely placed it in the print category because that’s where these industries were born (along with radio and television).

Advertising and marketing are two very closely intertwined but distinct categories of design. Some firms specialize in one over the other, some do both. As a designer with a job in advertising, you might do a little marketing and vice versa. However, in my experience with a marketing firm, the two areas were very distinct. Here’s how it worked where I was:

Advertising and Branding
The advertising firm or in-house department was often concerned primarily with branding and the public image of a product or company. These designers created the personality of the brand: its logo, characters and mascots, typography, colors, messaging, goals, drive, etc. This carried over to general advertising activities such as television commercials, radio spots, print ads and web banners all aimed primarily at communicating the brand’s existence and personality.

“Advertising can and does completely shape the way consumers perceive a brand.”

Advertising can and does completely shape the way consumers perceive a brand. One example that comes to mind is Herbal Essences shampoo. Years ago this brand was a fairly sensual brand obviously targeted at middle age and older females: the commercials depicted women of this age undergoing an orgasm-like experience upon using the shampoo (ridiculous but true). These days however, everything from the package design to the commercials obviously target a much younger audience and focus on youthful fun rather than mature sensuality. The shampoo inside the bottle is exactly the same, but the advertising folks have dramatically changed the perception of the product.

Marketing
Along these same lines, marketing leverages the existing brand design: logos, packaging, targeting, personality, etc. in a more sales-focused arena. Marketing designers create coupons, in-store promotional materials and engage other short-term projects meant to achieve incremental lift, which is to say tactics such as a holiday sale where purchase is hopefully increased.

“The advertising people develop who the brand is while the marketing people are tasked with getting it in the hands of as many people as possible.”

The advertising people develop who the brand is while the marketing people are tasked with getting it in the hands of as many people as possible. Sales numbers, quarterly earnings, brand partnerships; this is the world of the marketing department, all of which is translated to real materials that must be created and designed for print and digital distribution.

For instance, every scrap of junk mail that comes out of your mailbox and into your recycling bin is designed by a designer in marketing. Don’t bash it, I used to be that very guy and absolutely loved my job! It was always fun to receive, and subsequently toss, my own direct mail materials.

Print Publication Designer

The publication industry was historically one of the heaviest hitters as far as the number of designers employed, though this number has reduced dramatically with the rise of the web. Magazines and newspapers were the Internet of yesterday and are still a large part of every day information consumption for many people.

“This is definitely a field that can only exist through the hard work of talented designers.”

Every single page in these daily, weekly, monthly, bi-monthly and annual publications has to be designed, compiled and organized by teams of Mac Operators, Graphic Designers and Creative Directors. Take a look at the number of pages in any magazine, then take a look at the magazine section of your local bookstore to see how many there are and you’ll see that this is definitely a field that can only exist through the hard work of talented designers.

Devices like the iPad are creating an interesting overlap of print design techniques and digital technology. Some online publications are moving from the familiar blog format to a more magazine-like experience with individual pages that can be turned via gestures. This is a natural evolution for these types of designers and should hopefully help alleviate disappearing jobs.

Logo Design

It’s hard to believe that some people can make a full time living solely through logo design but it does in fact happen. It’s more typical for a company to provide a full range of marketing/advertising/branding services, but logo specialists are on the rise and are quite a talented group. If you’re good with a pencil and tend to be more of an artist than a designer, logo design is a perfect field for to pursue.

Once again, though logo design comes from the print world, these days tons of companies exist only in the digital realm and still require the same service.

Digital

Now that we’ve looked at some areas of print design and even some that exist in both print and web, let’s look at those jobs that primarily exist as a response to the popularity of the Internet in the past two decades or so.

Front End Web Designer

Front end web designers create the web as you know it. Each individual site and page has a “front end” and a “back end”. Though the back end can require some sort of design if it also has users, this is often a more focused on development and coding, so the front end is where most of the actual design emphasis is placed. To put it differently, developers make the websites work while front-end designers make them pretty .

“At the most basic level, front end web designers spend their time creating comps in Photoshop or Fireworks.”

Front end designers can be expected to have a range of different skills. At the most basic level, front end web designers spend their time creating comps in Photoshop or Fireworks. These comps are then passed on to developers and turned into live, working designs.

More and more though you see the job requirements of front end designers including basic development capabilities. There’s a raging conceptual debate over whether or not designers have any business coding, but the reality is that employers are beginning to require knowledge of at least HTML and CSS before considering you as a candidate. Even if you won’t actually be engaging in those activities, designers who understand the underlying structure and capabilities of the web are valuable assets. Following this same line of thought, front end development tends to be HTML, CSS and JavaScript while backend development involve heavier hitters like PHP

Designer/Developer

At the other end of the spectrum sits the designer/developer. These individuals aren’t satisfied with merely handling the front end aesthetic but push themselves further and become fully competent in HTML and CSS. Some go even further than that and pick up JavaScript, PHP, Ruby and other prominent web technologies.

Again, let the debate rage on about whether or not one person should really hand all of these duties but the reality is that there are a million people with skill sets this extensive and they are excellent candidates as far as employers are concerned.

UI Designer (User Interface Designer)

As the web and even desktop computer environments become more ingrained into our daily lives, the role of the UI designer becomes more and more important. In many ways a sub-segment of front-end design, UI design relates specifically to the design and in many cases actual hand-coded development of application and website interfaces.

For example, if you need a personal website to show off your work, you might hire a general web designer or firm to design and code the whole thing. However, if you want to create a productivity application with custom buttons, fields, navigation, typography and other design elements, then you would hire a UI designer.

UX Designer (User Experience Designer)

There is a lot of confusion surrounding this particular field and to what extent, if any, it overlaps other areas of design. In general, the user experience designer is primarily concerned with low fidelity design, meaning the end product of the UX designer can be fairly far from the finished, more aesthetically developed version of the design.

A project in its initial stages is often placed in the hands of a UX expert or team, who will outline, sketch and wireframe the basic workflow or “experience” of the user. The job doesn’t stop there though and continues through to the ultimate completion of the design in various roles that are complementary to the other types of designers on the project.

“A project in its initial stages is often placed in the hands of a UX expert or team, who will outline, sketch and wireframe the basic workflow or ‘experience’ of the user”

This is crucial in applications, e-commerce sites and other large web and software projects. It’s important to note that UI design is an aspect, but by no means the whole, of UX. Areas such as research, usability and A/B split testing all fall into the area of UX on some level.

UI vs. UX
The differences between UI and UX are often disputed. In “The Difference Between UI and UX“, our own Shawn Borsky defined UI design as specifically the design of input/output controls and anything else that allows the user to interact with the system while UX is more of the sum of all the parts and the impact it has on the user.

Others however, state that the difference between the two lies more in the difference between design and development, meaning it’s a matter of the difference between a UX Designer and the UI Developer. UXMatters.com defines a UX Designer as “one who designs the user experience” (which includes research, testing, etc.) and a UI Developer as “One who builds user interfaces that support the exchange of information between an application’s users and its back-end processes and databases.”

Obviously, the two different perspectives are quite similar and together give you a good idea of the overall difference between the two areas. As a crude rule of thumb, I always say that a UI guy designs the button but the UX guy tells him where to put it.

Other Considerations

Beyond the general hierarchy of design jobs and the specific areas of focus, there are a couple of more topics of which to take note.

Places to Work

One major concern is where you work, which has a huge impact on the definition of the titles above. As I mentioned, smaller companies tend to have fewer people perform more varied tasks while larger companies focus employees toward narrower tasks. In fact, it’s not really the size of the company that counts but the size of the design or creative department. Some employers are dedicated design firms and therefore tend to pay closer attention to these definitions and roles. Others are companies that have nothing to do with design but have an in-house design team that can range dramatically in size. For instance, in Phoenix where I live, Fender Guitars employs quite a few graphic designers.

There’s also the self-employed/freelancer route where you have the freedom to decide what type of designer you are and can even change that distinction from day to day. Want to try focusing on logos for a year? Go for it! Want to bill yourself as a UX expert? No one is stopping you. Freelancing isn’t for everyone but countless designers swear they would never do it any other way.

How Much Will You Make?

The all important question! Don’t feel bad if money is a primary concern for how you pick a job. People can go on and on about loving what you do and doing what you love but ultimately you need a paycheck and almost no one can argue that big checks are better than small ones on payday.

If, like me, you’re quite interested in this topic, check out our recent article, How Much Money Do Designers Make?

Conclusion

The point of this article is to get you thinking about all the different types of designer you could be. Sometimes we get stuck in a professional rut and, while we can’t imagine being anything but designers, we long for a new area of emphasis. If you’re starting to hate your job, the solution to professional contentment could be above. Maybe you’re struggling with UI design when you really would prefer packaging or are sick of advertising and would be more suited to focus on publication or web design. I encourage you to explore each area that interests you and put some hard thought into whether or not you’d be happier in that position.

Leave a comment below and let us know what type of designer you are and what type of company you work for. Are you a freelancer who does all of the jobs listed above or do you work for a Fortune 500 company focusing on one or two of these areas? We want to know!

How to Make Slicing Suck Less: Tips and Tricks for Slicing a PSD

I have a dirty little secret, I hate slicing Photoshop files. By that I don’t mean that I hate turning PSD comps into websites, I mean that I hate Photoshop’s slicing tools. The whole process makes my PSD look busy, cluttered and overly complicated so I usually skip it altogether and instead opt to manually crop and save out images individually as needed.

I have a dirty little secret, I hate slicing Photoshop files. By that I don’t mean that I hate turning PSD comps into websites, I mean that I hate Photoshop’s slicing tools. The whole process makes my PSD look busy, cluttered and overly complicated so I usually skip it altogether and instead opt to manually crop and save out images individually as needed.

In order to fight this tendency and attempt to see the true usefulness of Photoshop’s slicing tools, I embarked on a mission to learn all the intricacies of how slicing works. Below is a collection of tips and tricks that resulted from this journey. Hopefully, you’ll learn a thing or two you never knew!

There are Three Types of Slices in Photoshop

Three types of slices!? This was one of the most interesting and surprising things that I learned. Having not really experimented with the slicing features too much, I just figured there was only one way to go about it. I was wrong.

The three different kinds of slices are User Slices, Auto Slices and Layer Based Slices. To begin, let’s talk about the two you’re probably familiar with: User Slices and Auto Slices. These are very closely related, in fact, one creates the other.

As you know, to slice a PSD you start by grabbing the Slice Tool (C) and drawing a box around the area that you want to export as a standalone image. By adding slices to all the areas of your comp that you want to do this to, you can quickly and easily optimize and export several images at once.

What I’ve done here is draw a box around the logo at the top of the page. This one action created both a User Slice and several Auto Slices. When you create a slice, Photoshop assumes that your end goal is to turn the entire PSD into a series of slices. I personally think this assumption is quite annoying, and we’ll discuss later how to get around it. For now, just know that because of this assumption, Photoshop extends the edges of your slice all the way across the PSD, thereby creating several other sections automatically. This is illustrated in the image above.

Tricks for Working with User and Auto Slices

While we’re on the topic of User and Auto Slices, let’s go over some of the obvious and not-so-obvious features so that you can really get a feel for what tools and options you have at your disposal.

Moving and Editing Slices

Once you’ve made a slice, you should see controls similar to that for a Free Transform that will allow you to move and edit it. You can also use the Slice Select Tool to ensure that you’re only editing current slices and not creating new ones. This tool is found under the Slice Tool in the fly out menu.

Converting Auto Slices to User Slices

Throughout the entire slicing process, Auto Slices are continually created and updated and they stay distinct from user slices. Later, we’ll look at how to export them as files or ignore them when exporting, but for now let’s take a look at how to turn an Auto Slice into a User Slice.

The process is extremely simple. First, you have to select the auto Slice using the Slice Select Tool. Next, select the Auto Slice that you want to convert and hit the “Promote” button near the top.

That’s it! Now the Auto Slice should change color, indicating that it is now a User Slice. Now you’ll have greater control over its size and how it exports.

Auto-Dividing Slices

When you have a series of objects that are distributed horizontally, vertically or even in a grid, you don’t have to take the time to go through and make a slice around each individual unit. Instead, you can make one slice that covers all of the objects and tell Photoshop to do the rest.

To do this, first make your big slice by drawing a box around all of the objects. Then, with the Slice Select Tool enabled, click the “Divide” button at the top of the page.

This should bring up the “Divide Slice” dialog box shown above. Using this window you can quickly insert extra vertical and horizontal slices. If they don’t align right, you can adjust them manually after hitting the “OK button.”

Slices from Guides

Many of you are probably much more comfortable working with guides than slices inside of Photoshop. The reality is that they both work very similar, but the guides system admittedly feels a bit smoother.

If this is how you roll, this fits perfectly into an easy workflow for creating slices. Simply drag out guides to slice up your PSD and ignore the slicing tools altogether. Then, once you’re all finished, select the Slice Tool and hit the “Slices from Guides” button at the top.

Naming Slices

One of the annoying things that will bug you the first time you work with slices is that when you export them, the resulting files all come up with big ugly names that aren’t at all meaningful. To fix this, you need to make sure you’ve gone in and named each slice appropriately. Whatever name you assign will then be carried over as the file name upon export.

To name a slice, simply double-click on its contents with the Slice Tool selected. This will bring up the dialog below.

Notice that you have several options here, including setting the color for the slice, manually inputting the dimensions and assigning a name. There’s also a bunch of HTML stuff like URL, Target, etc. It turns out, Photoshop can take your sliced PSD and output it as a web page. Some bash this functionality because the default settings create a table-based layout, however you can switch these to utilize CSS.

Now, don’t get too excited. Even with the CSS options selected, Photoshop is still pretty rotten at building a website for you. You’re much better off doing it by hand or at least taking it over to Dreamweaver, which means you should ignore all these other options completely.

Layer Based Slices and Why They’re Better

One of the main features that made slicing suck a lot less for me is Layer Based Slices. These are a particular brand of User Slices that are superior in several ways.

As the name implies, these slices are not based on a box that you draw manually but instead automatically adhere to a layer’s bounds. To create a Layer Based Slice, select a layer in the Layers Palette, then go to the menu and select Layer>New Layer Based Slice. Note that this even works if you have multiple layers selected, each layer will simply be turned into its own slice!

Obviously, in order for this to work properly, you have to be really be good about how you structure your layers. You should be building your mockups as fully layered and organized files anyway so this shouldn’t be a problem.

The Advantage

One of the main reasons that normal slices are so lame is that it creates a lot of extra work if you want to go back and tweak your designs. After you shuffle the artwork around, you have to then go back and move all your slices to align with the new layout. This annoyance is why I always just manually save out the individual pieces through cropping.

However, Layer Based Slices are actually quite intelligent. When you move around your layers, your slices automatically follow. If you add an effect that changes the bounds, such as an Outer Glow, the slice expands to include it. If you transform the layer to 30% of its original size, again the slice updates automatically!

Obviously, there’s a clear argument here for using Layer Based Slices whenever possible as it saves you an incredible amount of time in the inevitable re-design stage.

Killing the Clutter

Another of my biggest annoyances with slicing is that it can create a really cluttered looking PSD. This is mostly do to the Auto Slicing side effect.

As an example, take a look at the image below (it’s a bit over-simplified here but you get the point). Here I only really only wanted to create three slices, but Photoshop has automatically gone in and turned it into twelve slices!

I don’t know about you, but I don’t build webpages as one big collection of images all crammed together. So I simply don’t want all these extra slices! I’m not going to export these areas into images, so all they’re doing is adding noise to my interface. When I see a document like this, the slices cease to be a meaningful tool for me.

To fix this, we can grab the Slice Select Tool and hit the “Hide Auto Slices” button at the top of the screen. This does exactly what the name implies, ditches all of those nasty Auto Slices from view.

Look how much simpler our document becomes! The few slices that we used are clearly identifiable and therefore retain their usefulness. In my opinion, this method of viewing your slices is greatly preferred. This is one of those cases where Photoshop simply tries too hard to predict my preferred workflow and ends up overdoing the features.

Exporting Slices

This is where the usefulness of slicing really comes into play. Without slicing, you have to save out each portion of your comp one at a time. The workflow would be something like the following: make a selection, crop, optimize in Save for Web, save, undo crop, and repeat. That’s a lot of unnecessary steps! Let’s see how it works with slicing.

After you’ve finally figured out all the ins and outs of slicing and have your PSD ready to go, it’s time to go to the File menu and select “Save for Web and Devices.” You’re probably familiar with this dialog already but it’s a bit different when you have slices in your document.

If you have any slices, the preview of your document in this window shows all of them (unfortunately, this includes those annoying Auto Slices). From here you can simply click to select each slice and optimize the settings for each individually. This includes file type, quality, etc. So in one session, you can set up an export of three JPGs and a PNG, each at a quality that you deem appropriate.

Once you’ve adjusted everything to your liking, hit the “Save” button. A dialog should pop up that allows you to choose a folder to place all of the images in. Remember that we already set up the naming convention so just leave that as is. The key here is to make sure that you’re only exporting either “All User Slices” or “Selected Slices”.

Depending on your desired workflow, either of these options works great. The default option is simply “All Slices”, which will include not only your User and Layer Based Slices, but also the completely useless Auto Slices that you’ll just have to throw in away anyway. Save yourself the trouble and ditch these here before the actual save takes place.

Conclusion

We went over a lot of pretty technical Photoshop stuff today so I’ll try to sum it up nicely. First, slicing a PSD can really feel like a clunky process if you don’t know what you’re doing. Make sure you really look around in Photoshop and experiment with the tips above to ensure that you’re making the most of the tools available to you.

Secondly, remember that there are three types of slices: Auto Slices, User Slices and Layer Based Slices. Auto Slices are pretty lame and are more of an unfortunate side effect to slicing than a helpful feature. You don’t have to agree with me on this, but if you do, hide them so they’re not so distracting. User Slices are simply those that you intentionally create. You can adjust them with the Slice Select Tool and name them by double-clicking on the contents. Layer Based Slices are just like User Slices, only they are much smarter because they automatically adhere to a given layer’s bounds. You can move, resize and add effects to a layer and the slice will continually update on its own.

Finally, when exporting a document with slices, choose the Save for Web command and optimize each slice as its own file. Also make sure to only export the User Slices or Selected Slices, otherwise all of the Auto Slices created by Photoshop will fill up you images folder.

This is probably way more than you ever wanted to know about slicing in Photoshop, but hopefully this has helped you spot the inefficiencies in the system so that you can adjust and still take advantage of this useful set of tools without being hampered by its awkwardness.

Leave a comment below and tell us how you slice a PSD. The workflow that I’ve set up here is just one of many possible solutions and I’m anxious to hear and learn from yours!

 

Looking for a reliable PSD to HTML development company? We have all that it takes to create beautiful, responsive markups that render perfectly across platforms and devices.

Reach out to us to discuss your project and get back an immaculately coded HTML template in just a few hours!

 

Frequently Asked Questions

What is PSD slicing and why is it important in web design?

PSD slicing is the process of dividing a Photoshop Document (PSD) into smaller image files that can be used on a website. It is important in web design because it allows designers to create visually appealing, custom web designs that load quickly and efficiently. By slicing a PSD, designers can extract images and graphics, optimize them for the web, and create a website that accurately reflects their design vision.

Can you explain the difference between raster and vector slicing?

Raster slicing and vector slicing are two different techniques used to create images for websites. Raster slicing involves dividing a bitmap image (such as a photograph or scanned image) into smaller pieces, while vector slicing involves dividing a vector image (such as a logo or illustration) into smaller pieces. Raster images are made up of individual pixels, so when they are resized, they can lose quality and become pixelated.

Vector images, on the other hand, are made up of shapes and paths, so they can be resized without losing quality. As a result, vector slicing is typically preferred for creating images that need to be resized frequently (such as icons or logos), while raster slicing is more commonly used for photographs and other images that do not require resizing.

What are some best practices for optimizing sliced images for web use?

Optimizing sliced images for web use involves reducing their file size without compromising their quality. Some best practices for optimizing sliced images for the web include:

  1. Using the appropriate file format (JPEG, PNG, GIF) for the type of image
  2. reducing the image size to the smallest dimensions possible.
  3. Using compression techniques to reduce file size without losing quality
  4. Minimizing the number of colors used in the image.
  5. Removing any unnecessary metadata or hidden layers in the image
    using CSS techniques like sprites and lazy loading to reduce the number of HTTP requests.

By following these best practices, sliced images can be optimized for the web, resulting in faster loading times and a better user experience.

What are some common mistakes to avoid when slicing PSD files for web design?

There are several common mistakes to avoid when slicing PSD files for web design, including:

  1. Not organizing layers properly, which can lead to confusion and errors during slicing.
  2. Saving images in the wrong file format or at the wrong resolution, which can affect image quality and load times.
  3. Failing to account for different screen sizes and resolutions, which can lead to inconsistencies in the final design.
  4. Neglecting to optimize images for the web, which can result in slow loading times and a poor user experience.
  5. Forgetting to test the sliced images on different devices and browsers to ensure that they display correctly.

By avoiding these common mistakes, designers can ensure that their sliced images are optimized for the web and accurately reflect their design vision.

Can you provide some tips for slicing images with transparency or complex backgrounds?

When slicing images with transparency or complex backgrounds, it is important to pay attention to the details and take extra care to ensure that the final image looks good on the web. Here are some tips for slicing images with transparency or complex backgrounds:

  1. Use the right file format for the type of image (PNG is often a good choice for images with transparency).
  2. Carefully select the area of the image to slice, paying attention to the edges and any areas of transparency.
  3. Consider using a layer mask or alpha channel to isolate the area of the image that you want to slice.
  4. Use anti-aliasing to smooth the edges of the sliced image and avoid jagged edges or pixelation.
  5. Test the sliced image on different backgrounds to make sure that it looks good and blends seamlessly into the design.

By following these tips, designers can create high-quality sliced images with transparency or complex backgrounds that accurately reflect their design vision.

Are there any limitations or considerations to keep in mind when slicing PSD files for email templates or other non-web applications?

Yes, there are several limitations and considerations to keep in mind when slicing PSD files for email templates or other non-web applications. For example, email clients often have limited support for certain HTML and CSS elements, which can affect how the sliced images are displayed.

Additionally, email templates typically have stricter size limitations than web pages, so designers need to be mindful of the file size of the sliced images.

It is also important to consider the aspect ratio of the sliced images and make sure that they look good on a variety of devices and screen sizes. By keeping these limitations and considerations in mind, designers can create effective sliced images for email templates and other non-web applications.

Effortless Full Screen Background Images With jQuery

Today we’re going to build a simple and fun webpage for the sole purpose of showing off Fullscreenr, a great little jQuery plugin that makes it easy to add a background image to your site that automatically adjusts to the window size.

Today we’re going to build a simple and fun webpage for the sole purpose of showing off Fullscreenr, a great little jQuery plugin that makes it easy to add a background image to your site that automatically adjusts to the window size.

We’ll also throw in some @font-face and rgba action to keep things modern and educational on the rest of the build. Let’s get started!

 

Demo

Just so you can get a feel for what we’re building, check out the demo below. To see the jQuery in action, resize the browser window and watch how the image adapts dynamically.

View the demo

screenshot

Now that you’ve seen how it works, let’s build it!

Step 1: Grab Fullscreenr

screenshot

The first thing you’re going to want to do is go to the Fullsreenr website and download a copy. Grab the JS files and throw them into a folder with a basic website framework: html, css and images folder.

Step 2: Start the HTML

To begin the HTML, thrown in the code for an empty page and add the references for the stylesheet and the two JavaScript files.

1
2
3
4
5
6
<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- JavaScript codes -->
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.fullscreenr.js" type="text/javascript"></script>

Step 2: Select a Background Image

Before we insert the code for placing our background image, we’ll need to know the size. Which of course means we need to find an image.

I grabbed the image below by Faisal.Saeed on Flickr Creative Commons. It’s an awesome snowy mountain scene that should make the perfect setting for our site.

screenshot

Next, I sized the image so that it would be 907px by 680px. These are the dimensions that we’ll use in our next step.

Step 3: Insert the Fullscreenr Snippet

In the demo files of the Fullscreenr download, you should find the following JavaScript snippet to enable the plugin. I’ve customized it a bit with the image dimensions specified above.

1
2
3
4
<script type="text/javascript"> 
    var FullscreenrOptions = {  width: 907, height: 680, bgID: '#bgimg' };
    jQuery.fn.fullscreenr(FullscreenrOptions);
</script>

All you have to do for your own version is change the hight and width to match that of your own image.

Step 4: Body HTML

Next up, there is a chunk of HTML in the demo page that you’ll need to grab. The structure may seem a little funky but really all the developer has done is applied the background image to the body and created a basic container (realBody) for you to then add all the rest of your content to. If you don’t like the div ID names used by the developer, feel free to change them to something more conventional.

1
2
3
4
5
6
7
8
<!-- This is the background image -->
<img id="bgimg" src="img/mountains-907x680.jpg">
<!-- Here the "real" body starts, where you can put your website -->
<div id="realBody">
    
<!-- Here the "real" body ends, do not place content outside this div unless you know what you are doing -->
</div>

As you can see, all we’ve done here is throw in the background image.

Step 5: Add the CSS

Finally, throw in the CSS below to make everything work properly. This is necessary to make sure your content will scroll correctly and stay positioned properly in the stack.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
body {
    overflow:hidden;
    padding:0;margin:0;
    height:100%;width:100%;
}
#bgimg {
    position:absolute;
    z-index: -1;
}
#realBody{
    position:absolute;
    z-index: 5;
    overflow:auto;
    height:100%;width:100%;
    background: url('../img/raster.png');
}

And with that, you’re done! You should now have a background image that dynamically scales with the browser window. The transition is super smooth and works brilliantly.

screenshot

The plugin comes with an dotted pattern image overlay, shown below in a zoomed-in view. If you don’t like this effect, simply leave it out!

screenshot

If you’d like, you can stop here and proceed with your own design. If you’re interested on where to go from here, I’ll finish up with some fun design.

Step 6: Add a Background Div and Header

Now that we’ve got our background image, we want to center a div over the top of it and give it a background fill. We’ll also give it a basic header that I thought seemed appropriate given the snowy background image.

1
2
3
4
5
6
7
<img id="bgimg" src="img/mountains-907x680.jpg">
<div id="realBody">
    <div id="container">
        <h1>Welcome to Hoth</h1>
    </div>
</div>

Next we’ll style these two elements with CSS (insert this in addition to the CSS above).

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#container {
    width: 800px;
    height: 1000px;
    margin: auto;
    margin-top: 60px;
    padding-top: 10px;
    background:rgba(0,0,0,.8);
    
}
#container h1 {
    color:#fff;
    font-family: 'KitchenpoliceRegular', sans-serif;
    font-size:60px;
    font-weight: normal;
    text-decoration:none;
    text-align:center;
}
@font-face {
    font-family: 'KitchenpoliceRegular';
    src: url('KITCHENPOLICE-webfont.eot');
    src: local('‚ò∫'), url('KITCHENPOLICE-webfont.woff') format('woff'), url('KITCHENPOLICE-webfont.ttf') format('truetype'), url('KITCHENPOLICE-webfont.svg#webfontCRDciSXC') format('svg');
    font-weight: normal;
    font-style: normal;
}

This is a big chunk of code but it’s all super basic. First, we gave the container a height and width, then set the margins to auto. This gives us a vertical strip that automatically stays centered on the page. The background color for the container has been applied using rgba. This will give us a nice transparent container that lets some of that nice background image show through.

Next, we used applied some basic styles to the header and customized the font using @font-face. I used a font called Kitchen Police and an @font-face kit from FontSquirrel.

At this point, your page should look like the image below.

screenshot

Step 7: Add a Header Image

The next step is extremely easy. All you have to do is toss in an image that’s the same width as the container (800px).

1
2
3
4
5
6
7
8
<img id="bgimg" src="img/mountains-907x680.jpg">
<div id="realBody">
    <div id="container">
        <h1>Welcome to Hoth</h1>
        <img src="img/walkers.jpg">
    </div>
</div>

And with that your image should fall right into place without any extra styling.

screenshot

Step 8: Add Some Text

In this step we’re going to add some basic filler text to the page and in the next we’ll add a grid of images. Since the text will hypothetically tie into the images, we’ll throw it all into a “grid” div.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
<img id="bgimg" src="img/mountains-907x680.jpg">
<div id="realBody">
    <div id="exampleDiv">
        <h1>Welcome to Hoth</h1>
        <img src="img/walkers.jpg">
        
        <div id="grid">
            <h2>Good Times on Hoth:</h2>
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
        
    </div>
</div>

To style the text, we’ll first add a little margin to the top of the div. Then we apply basic color, size, and positioning to both the h2 tag and the paragraph tag. Notice I used some more @font-face goodness, this time with Lobster.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#grid {
    margin-top: 20px;
}
#grid h2{
    color: #fff;
    text-align: left;
    margin-left: 65px;
    font-size: 30px;
    font-family: 'Lobster', sans-serif;
    margin-bottom: 3px;
    font-weight: normal;
}
#grid p{
    color: #fff;
    text-align: left;
    margin-left: 65px;
    margin-bottom: 3px;
    font-size: 12px;
    font-family: helvetica, sans-serif;
    margin-top: 0px;
    width: 650px;
    line-height: 18px;
}
@font-face {
    font-family: 'Lobster';
    src: url('Lobster_1.3-webfont.eot');
    src: local('‚ò∫'), url('Lobster_1.3-webfont.woff') format('woff'), url('Lobster_1.3-webfont.ttf') format('truetype'), url('Lobster_1.3-webfont.svg#webfontcOtP3oQb') format('svg');
    font-weight: normal;
    font-style: normal;
}

This should give you a nicely style block of text similar to that in the image below. Now we can move onto the final step!

screenshot

Step 9: Add the Gallery

To finish the page up, we’ll toss in a simple image gallery that is basically just a grid of nine JPGs. To give the photographers credit, I’ve linked each to the original source images on Flickr.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
<img id="bgimg" src="img/mountains-907x680.jpg">
<div id="realBody">
    <div id="container">
        <h1>Welcome to Hoth</h1>
        <img src="img/walkers.jpg">
        
        <div id="grid">
            <h2>Good Times on Hoth:</h2>
            <p>Lorem ipsum dolor sit...</p>
            <a href="http://ow.ly/35afM"><img src="img/hoth1.jpg"></a>
            <a href="http://ow.ly/35ah9"><img src="img/hoth2.jpg"></a>
            <a href="http://ow.ly/35aim"><img src="img/hoth3.jpg"></a>
            <a href="http://ow.ly/35ajg"><img src="img/hoth4.jpg"></a>
            <a href="http://ow.ly/35ajY"><img src="img/hoth5.jpg"></a>
            <a href="http://ow.ly/35alw"><img src="img/hoth6.jpg"></a>
        </div>
        
    </div>
</div>

As the final piece of the puzzle, we’ll toss in some margins and borders to make the image grid look nice and styled.

1
2
3
4
5
6
7
8
#grid img {
    margin: 20px 10px 20px 10px;
    border: 3px solid #000;
}
#grid a:hover img{
    border: 3px solid #fff;
}

That should space everything and and finish up your page! Feel free to keep going and add in a navigation section, footer, sidebar and whatever else you can think of!

screenshot

Conclusion

jQuery and the Fullscreenr plugin present the easiest and best-looking solution I’ve found for scaleable background images. If you’d rather try the same effect with CSS, check out Chris Coyier’s methods on CSS-Tricks. Chris presents three possible alternatives, the last of which uses pure CSS and works much better than other CSS attempts I’ve seen.

As always, thanks for reading. If you liked the article give us a tweet, digg or any other social shout out you can come up with!

10 Tips for Designing HTML Emails

Love ‘em or hate ‘em, HTML emails are a wildly popular marketing tool and you will almost definitely come across clients that want you to build them.

Love ‘em or hate ‘em, HTML emails are a wildly popular marketing tool and you will almost definitely come across clients that want you to build them.

If you don’t know anything about HTML emails, they’re annoying to develop and break all the rules you’ve ever learned as a web designer, but being able to code them is a valuable skill to possess. Today we’ll look at ten quick and easy tips to get beginners started on the road to creating beautiful and functional emails.

#1 Use Tables

Wait what? Didn’t we abandon non-semantic table-based designs ages ago? Yep, and now you get to experience the joy all over again. Unfortunately, most email clients don’t support a plain old CSS layout like you’re used to. Instead, it’s back to the 90s and familiarizing yourself with cellspacing.

If you’re unfamiliar with table-based layouts, here’s a simple example.

	<table cellspacing="0" cellpadding="10" border="0"> <tbody><tr> <td width="100"></td> <td width="200"></td> </tr> </tbody></table>

Table Tools

If you want an easy way to build the basic structure of an HTML table, check out the free generators below.

#2 Use Inline CSS

HTML emails do support limited CSS, but you can’t use an external style sheet. Instead, you use inline CSS to style the various elements in the tables.

	<p style="background: #cccccc; color: white;">Some text goes here.</p>

The snippet above shows you the basic syntax for inline CSS. As you can see, the code is essentially the same, you just embed it right into the code of your HTML rather than linking to another document.

Inline CSS Tools

If you’re more comfortable using an external stylesheet during development, just use one of the tools below to convert it to inline styling once you’re finished.

  • Premailer: Converts CSS to inline styles and checks your code against email standards
  • HTML Inline Styler: Converts CSS rules into inline style attributes

#3 Nest Your Tables

Another quirk regarding email clients is that they are quite inconsistent when it comes to interpreting margins and padding. To overcome this problem, use nested tables whenever possible. The code is a little messier but you’ll have much greater compliance across the board.

To “nest” a table simply means to place one table inside of another. You can nest multiple tables, just be wary of overnesting and creating a huge mess. Some email clients start to get buggy around eight nests, but you should be able to come in far below this number for most of your designs.

#4 Watch Your Width

Several email clients are fairly limited in their width. For instance, consider the online Gmail client. Building a normal size webpage and then displaying it in the tiny Gmail window will force the user into awkward horizontal scrolling.

There are too many possible clients and screen sizes to code for every scenario so the consensus among the web community is usually just to keep your emails fairly narrow. As a rule of thumb, try to stay under 600 pixels wide in every email design you create.

#5 Be Careful With Images

There are several complications to consider when using images in HTML email. First, some clients don’t support background images, others do support them but will often have them turned off by default. This is by no means an argument that you shouldn’t use images in your design. The strongest selling point of HTML emails is that they surpass the quality and possibilities of the rich text already available in most email clients. Eliminating images altogether can really reduce the benefits.

Instead of completely abandoning images, just make sure that your message works fine without them. Use background colors as a fallback so any text will remain readable and test your layout with images disabled.

Another thing you have to be aware of with images is that you can’t (or at least, shouldn’t) embed them into the email. Instead, you’ll have to host them long-term on a reliable server and then link to them in your code.

Finally, make sure you watch your load times. People are used to clicking on an email and seeing the contents, not waiting for images to load. If you make me endure long load times, I’ll hit delete faster than you can explain why it’ll be worth the wait.

#6 Allow Easy Unsubscribing

HTML emails are most often part of a stream of newsletters subscribed to by a user. Many times users sign up for a service and don’t even realize it means they’ll be receiving a newsletter. Other times they consciously decide to sign up but change their mind later.

In either case, unsubscribing should be a painless process that virtually anyone viewing the email should be able to figure out. To accomplish this, include an unsubscribe link and make sure it’s easy to spot. Designers and marketers who attempt to hide this link lack integrity and respect for their audience.

If the person doesn’t want your email, they’re not reading it anyway. There’s no value in sending 10,000 emails to spam folders all over the world. It’s far better to know that those receiving your newsletter are actually interested.

#7 Consider Your Content Carefully

Marketers and business owners often see an email newsletter as the sole source of consistent contact with their customer base. They are therefore often tempted to fill it with as much content and information as possible. As a designer, help them resist this urge by designing a template that showcases a little information extremely well rather than a lot of information very poorly.

The key here is quality over quantity. No on will read a thousand word marketing email. You have, at the very best, 3-5 seconds to grab the average reader’s attention before they hit delete. Accomplish this with fast loading, attractive visuals, concise copy and clear descriptive headers.

#8 Include Other Viewing Options

In addition to including an unsubscribe option, you should present at least two alternate ways to view the email for anyone not receiving their preferred experience. For the minimalists, a simple text version is best. There are plenty of people out there who think that email should stay simple and simply don’t want to see your fancy-pants attention grabbing graphics.

At the opposite end of the spectrum are users who do want the full rich experience but are being held back by a buggy email client. For these users include a fairly prominent link (often at the top) that allows them to view the email in a browser. Because browsers are infinitely better for displaying HTML and CSS, you can even beef up the browser-based version by coding it more like you would a normal web page (or simply have the browser display the original version).

#9 Test Thoroughly

When designing a web page, one of the most annoying processes you have to go through is cross-browser testing. This process usually involves testing for Webkit, Mozilla, IE and maybe even Opera if you’re really dedicated. If you can believe it, designing for email clients is even worse!

There are upwards of 30 popular email clients, each with their own standards and varying support for different commands. To begin, test in the email clients that you have handy. Sign up for accounts with popular webmail clients like Gmail, AOL and Yahoo. Also make sure to test out the default apps for both Macs and PCs.

Obviously, you can’t test every client. If you’ve got the budget, sign up for a month of a service like Litmus during the testing phase. This will allow you to quickly get a preview of the finished product on 33 different email clients and is one of the best ways to ensure that everyone is covered.

screenshot

During the design stage, be sure to check out The Email Standards Project. This is one of the single best sources available for detailed reports regarding what is and isn’t supported by various email clients.

#10 Use a Template

The best way that I’ve found to begin the process of designing your first HTML email is to grab a template. Even if you have a very specific design in mind, modifying a professionally developed template rather than starting from scratch can save you countless hours in troubleshooting time.

This will also give you a good look into how other developers structure and style their tables. Just remember that if you’re going to redistribute or sell an email template as stock art, you shouldn’t be stealing from someone else’s work! In these cases, you’ll want to really know what you’re doing and develop your own structure from the ground up.

Free Email Templates

screenshot

Fortunately, you don’t have to pay a dime to snag some quality free templates from which to start your design process. Most of the premium email services offer free downloads to get you started, often with no signup required. Check out the resources below:

Conclusion

To sum up, when designing email templates, start with a good basic template, code like your dad did a decade ago, keep your content both conceptually and physically lean (less than 600 pixels wide), make it easy to unsubscribe and see alternate versions, and test like crazy.

Leave a comment below and let us know if you found the article helpful. Also be sure to share any bits of wisdom you’ve picked up along the way for designing HTML emails.

Best Resources for Learning WordPress Development

Odds are, if you’re a web developer, learning WordPress is either on your todo list or something that you’ve already committed yourself to. Learning to build WordPress themes is an excellent professional move that will open you to a wealth of new clients and personal opportunities.

Odds are, if you’re a web developer, learning WordPress is either on your todo list or something that you’ve already committed yourself to. Learning to build WordPress themes is an excellent professional move that will open you to a wealth of new clients and personal opportunities.

To follow up our article last week on tutorials for learning web design, below is a list of books and free tutorials specifically targeted at learning to develop for WordPress. Whether you’ve never heard of WordPress or are just looking to update your current WordPress skill set, there are plenty of resources below to get you on your way.

Free Tutorials

If you’re on a budget and need to learn quick, free tutorials provide a great way to get started and provide just enough information to help you pick up WordPress without bogging you down with too much unnecessary extras.

WordPress 3.0: Ultimate Guide to New Features (Six Revisions)

Many of the articles below are for older versions of WordPress so I wanted to begin by pointing out this guide to WordPress 3.0. The older articles still have plenty of solid information and relevant examples, just be sure to keep the newest version of WordPress in mind when reading them.

screenshot

How to Create a WordPress Theme from Scratch: NetTuts

“Following on from the recent article on “PSD to HTML”, this tutorial will look at taking a HTML/CSS template and turning it into a functioning WordPress theme. There is so much you can do when creating your own theme we couldn’t nearly cover it all. So, we’re going to look at how themes are structured, creation of the core files and splitting up that index.html file.”

screenshot

Designing for WordPress: CSS Tricks

“Over the last few weeks, I have been been doing a video screencast series on Designing for WordPress. It is a three-part series which covers downloading and installing WordPress on a server all the way to a completed theme.”

screenshot

Premium WordPress Theme Design: Design Reviver

“This time you’ll learn how to slice the design and convert it into XHTML + CSS, then I’ll show you how to use the css files to mock-up a WordPress template.”

screenshot

WordPress Theme Development Checklist: divtodesign

“As you might know, I have been diving into WordPress theme development and I’ve learned many tips and tricks along the way. I noticed I was forgetting about some small issues all the time. That’s why I decided to make a WordPress Theme Development Checklist. ”

screenshot

How To Create WordPress Themes From Scratch: ThemeTation

“I’m going to show you how to create a wordpress theme from scratch in these 3 parts of tutorial series. I will cover from Structuring, designing in Photoshop, slicing, coding into fully css based html, and finally wordpress implementation.”

screenshot

Creating WordPress Themes: Introduction

“This new series will begin with the basics and then I’ll proceed to more advanced techniques. I will also be incorporating different techniques that I’ve picked up from other developers that I’ve found to be extremely handy, and I’ll be providing links and credits to that info as I go along.”

screenshot

Developing a WordPress Theme: Dezinerfolio

“Instead of coming up with some more themes, we decided to write a tutorial on how to develop a wordpress theme which we are sure will help a lot of you to design as you wish and bring them out into wordpress. We are not too advanced wordpress developers but still we are sure the below tutorial will help you successfully develop a wordpress theme. Below you will learn to convert your xHTML CSS site into a Compact WordPress Theme (final output is same as the normal theme but here code is shorter and easier to understand).”

screenshot

How to Build a Custom WordPress Theme from Scratch: SpoonGraphics

“If you’re confident with your CSS and HTML, it’s not hard at all to step up to the challenge of building a custom WordPress theme. This overview shows the process of how my latest custom WordPress theme was built from design concept through to completed theme. See how the static design is split up into the various WordPress theme files, and discover how the simple PHP snippets can add that dynamic functionality of a blog.”

screenshot

Creating A Quality WordPress Theme: 12 Points to Consider (Noupe)

“But what exactly makes a WordPress theme great? How does one go about creating a quality theme? In fact, it’s not that difficult. You can do a few simple things while developing your theme—from the planning stage right through coding—to make it stand out from the legions of average (and below-average) themes out there.”

screenshot

Customize Your Own WordPress Theme: Vandelay Design

“An increasing number of businesses and website owners are using blogs as a means of communication with their customers and website visitors. If your business already has a website it is possible to have a blog that matches the look and feel of your existing website without doing a complete re-design and without paying thousands of dollars to have the blog developed. Using WordPress you can tailor an already existing blog theme to seamlessly flow with the rest of your website.”

screenshot

Designing and Coding a WordPress Theme From Scratch: DeveloperTutorials

“In this multi-part series I’ll detail how to create and design a WordPress theme from nothing more than your imagination using Photoshop, CSS, XHTML and PHP.”

screenshot

So you want to create WordPress themes huh?

“Creating a WordPress theme from scratch is not hard. I’ll hold your hand through it. Tutorials on this topic have been written before and the WordPress website also has guides for you to follow. But are those tutorials and guides really helpful to you when you don’t understand the lingo? Even I got lost while reading the WordPress guides.”

screenshot

Create Your Own WordPress Theme from an HTML Template

“In this article, I’ll show you how to take an existing HTML and CSS site template and convert it into a theme for WordPress. Of course, WordPress theming is much too vast a topic to cover entirely in a single article, so I’ll provide you with some resources at the end to further your learning. It’s hoped, though, that this article will serve as a good introduction and give you a solid foundation to start learning about creating your own WordPress themes.”

screenshot

How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial (ThemeShaper)

“In Only 11 Individual Lessons this WordPress Theme Tutorial is going to show you how to build a powerful, up-to-date, WordPress Theme from scratch. As we go along I’ll explain what’s happening including (for better or worse) my thinking on certain techniques and why I’m choosing one path over another. Essentially, I’ll be teaching you everything you need to know about WordPress Theme development.”

screenshot

Building Custom WordPress Theme

“This chapter will show you how to build a custom WordPress theme. Although the Codex site provides very good documentations on how to create a theme, but I find it too complicated for a beginner. In this tutorial, I will explain the basics of how WordPress theme works and show you how to convert a static HTML template into a theme. No PHP skill is required, but you need Photoshop and CSS skills to create your own design.”

screenshot

Books on WordPress

If you’re serious about becoming a professional WordPress developer, it’s time to pick up a good book on the subject. These are usually far more in-depth than free tutorials and really cover the material you need to know inside and out.

Below are a few great books to consider in your search. Some are physical books that you can purchase on Amazon, others downloadable PDFs.

Rockstar WordPress Designer: $29

“During the course of the book you’ll build THREE WordPress themes, a blog, a portfolio site and a general site with menus and submenus. Each theme demonstrates different aspects of WordPress theming and all three are packaged in with the book so you’ll have Photoshop, HTML, CSS and WordPress PHP files to refer to.”

screenshot

Beginning WordPress 3: $26.99

“WordPress is one of the most popular blogging and content management web templating platforms—it easily allows you and your business to make a statement about yourself and what you do. WordPress is also quite cost-effective, as it’s free for just about anyone to use. WordPress is colorful and flexible, and includes a variety of themes, templates, and plug-ins for you to explore and use. Beginning WordPress 3 aims to address these for the beginner who wants to start using and developing with WordPress.”

screenshot

WordPress For Dummies: $16.49

“The bestselling guide to WordPress, fully updated for newest version of WordPress. WordPress, the popular, free blogging platform, has been updated with new features and improvements. Bloggers who are new to WordPress will learn to take full advantage of its flexibility and usability with the advice in this friendly guide.”

screenshot

Smashing WordPress: Beyond the Blog: $29.69

“Smashing WordPress shows you how to utilize the power of the WordPress platform, and provides a creative spark to help you build WordPress-powered sites that go beyond the obvious. You will learn the core concepts used to build just about anything in WordPress, resulting in fast deployments and greater design flexibility. Inside, WordPress expert Thord Daniel Hedengren takes you beyond the blog and shows you how WordPress can serve as a CMS, a photo gallery, an e-commerce site, and more.”

screenshot

Professional WordPress: $29.69

“An in-depth look at the internals of the WordPress system. As the most popular blogging and content management platform available today, WordPress is a powerful tool. This exciting book goes beyond the basics and delves into the heart of the WordPress system, offering overviews of the functional aspects of WordPress as well as plug-in and theme development.”

screenshot

WordPress: Visual QuickStart Guide

“This book gives readers the tools they need to create beautiful, functional WordPress-powered sites with minimal hassle. Using the WordPress user interface as a baseline, authors Jessica Neuman Beck and Matt Beck walk new users through the installation and setup process while providing valuable tips and tricks for more experienced users. With no other resource but this guide, readers can set up a fully-functional and well-designed WordPress site that takes advantage of all the features WordPress has to offer.”

screenshot

Using WordPress: $16.49

“WordPress has grown into the #1 blogging tool in its category: several million bloggers have downloaded this powerful open source software, and millions more are using WordPress.com’s hosted services. Thirty-two of Technorati’s Top 100 blogs now use WordPress. Using WordPress is a customized, media-rich learning experience designed to help new users master WordPress quickly, and get the most out of it, fast! It starts with a concise, friendly, straight-to-the-point guide to WordPress. This exceptional book is fully integrated with an unprecedented collection of online learning resources: online video, screencasts, podcasts, and additional web content, all designed to reinforce key concepts and help users achieve real mastery. The book and online content work together to teach everything mainstream Wordpess users need to know.”

screenshot

Head First WordPress: A Brain-Friendly Guide to Creating Your Own Custom WordPress Blog ($23.09)

“Whether you’re promoting your business or writing about your travel adventures, Head First WordPress will teach you not only how to make your blog look unique and attention-grabbing, but also how to take advantage of WordPress platform’s more complex features to make your website work well, too. You’ll learn how to move beyond the standard WordPress look and feel by customizing your blog with your own URL, templates, plugin functionality, and more. As you learn, you’ll be working with real WordPress files: The book’s website provides pre-fab WordPress themes to download and work with as you follow along with the text.”

screenshot

Closing Thoughts

I hope the resources provide the catalyst you need to begin your journey as a WordPress developer. In closing, I want to remind you that the official WordPress codex is definitely on of the best resources out there for all things WordPress.

Let us know in the comments below if we left out any of your favorite tutorials or books for learning WordPress.

30 Free Video Tutorials for Learning Web Design

Getting started in web design can be quite difficult. For readers, there are tons of great free tutorials online. However, some people find visual instruction to be more effective for their learning style.

Getting started in web design can be quite difficult. For readers, there are tons of great free tutorials online. However, some people find visual instruction to be more effective for their learning style.

Instructional videos are an incredibly rich learning tool and could be just what you need to finally learn web development properly. We’ve compiled a list of over 30 excellent screencasts for beginners across a number of web technologies and disciplines.

NetTuts

NetTuts is one of the best providers out there for free content related to learning web design. They have a wealth of articles and video tutorials for learners at all levels. Here are a few for beginners in HTML5, CSS3 and JavaScript.

The Ultimate Guide to Creating a Design and Converting it to HTML and CSS

“This screencast will serve as the final entry in a multi-part series across the TUTS sites which demonstrates how to build a beautiful home page for a fictional business. We learned how to create the wireframe on Vectortuts+; we added color, textures, and effects on Psdtuts+; now, we’ll take our completed PSD and convert it into a nicely coded HTML and CSS website.”

screenshot

How to Make All Browsers Render HTML5 Mark-up Correctly: Screencast

“HTML 5 provides some great new features for web designers who want to code readable, semantically-meaningful layouts. However, support for HTML 5 is still evolving, and Internet Explorer is the last to add support. In this tutorial, we’ll create a common layout using some of HTML 5’s new semantic elements, then use JavaScript and CSS to make our design backwards-compatible with Internet Explorer. Yes, even IE 6.”

screenshot

How to Build a Lava-Lamp Style Navigation Menu

“One of our readers requested a tutorial on how to build a lava-lamp style menu. Luckily, it’s quite a simple task, especially when using a JavaScript library. We’ll build one from scratch today.”

screenshot

JavaScript from Null: Video Series

“This screencast series focuses exclusively on JavaScript, and will take you from your first “Hello, World” alert up to more advanced topics.”

screenshot

How to Convert a PSD to XHTML

“I continue to be amazed by how well Collis’s “Build a Sleek Portfolio Site From Scratch” tutorial continues to perform. It’s been months, yet it still posts strong numbers every week. Considering that fact, I decided to create a screencast that shows you exactly how to convert a PSD into perfect XHTML/CSS.”

screenshot

Slice and Dice that PSD

“In today’s video tutorial, we’ll be slicing up a PSD, dicing it for the web, and serving it on a warm hot plate. Our design sports a neat “Web 2.0″ feel and comes courtesy of Joefrey from ThemeForest.net. Be sure to visit his profile if you have the chance.”

screenshot

Doctype TV

The guys at Doctype put out frequent screencasts on subjects ranging all over the web design spectrum. Below you’ll find videos to get you started on Ajax, grid-based design, CSS3 columns and building your first jQuery plugin.

Grid Based Design and AJAX 101

“Nick gives an overview of grid based design and Jim breaks down the basics of AJAX.”

screenshot

CSS3 Columns and jQuery Plugins

“Nick deconstructs CSS multi-column layouts and Jim shows you step-by-step how to create your very own jQuery plugin.”

screenshot

TutVid

TutVid is a web design tutorial site that offers free instructional videos. You can also buy a given video to receive a higher resolution downloadable version along with any associated project files. Below we’ll look at a few of the available Dreamweaver tutorials.

Dreamweaver CS4: Styling Tags with CSS

“Learn all about styling tags and how to write CSS code in Dreamweaver. By the end of this tutorial you will have a good understanding of how to write CSS, how CSS works, and how you can write your CSS code in Dreamweaver.”

screenshot

14 Steps: How to Use Divs

“We will take a look at a whole bunch of the things you want to be sure to know when starting to use Divs. Learn all about placing and using Divs as well as styling them with CSS in Dreamweaver!”

screenshot

Create a Basic XML Document

“In this video we will quickly run over XML, what it is, and what it is used for. We will then sit down and write out our very first XML document just a simple list of six people. We will use Dreamweaver, but really any text editor is fine. We will cover creating writing the actual language, adding attributes, as well as how we create our own tags and just some basics to get you going writing your own XML document.”

screenshot

Create a Full CSS Website

“In this video we will start with a folder of images and in about 30 minutes construct a very simple 2 column layout using CSS to style our page! We will learn all about using divs, creating CSS rules, targeting divs, creating a background, and so much more! Start learning to harness the raw power of Cascading Style Sheets to create, layout, and style your web pages today!”

screenshot

Themeforest

Themeforest is an Envato marketplace that sells website templates of various types (HTML, WordPress, Joomla, etc.). The site also has a blog that posts some really helpful content from time to time. Check out the screencasts on PHP and jQuery below.

Diving into PHP Video Series (11 Parts)

“Today marks the beginning of a brand new series that will show you EXACTLY how to get started with PHP. Just as with the “jQuery for Absolute Beginners” series, we’ll start from scratch and slowly work our way up to some more advanced topics. ”

screenshot

jQuery for Absolute Beginners

“Starting today, I’m launching a daily video series that will teach you PRECISELY how to use the jQuery library in your own projects. We’ll start out by downloading the framework, creating our first function, examining syntax, and more. Every day, I’ll post a five-ten minute “training regimen” that expands on what you’ve already learned. So there’s no reason to fight it anymore! Learn this dang thing and start earning more money on ThemeForest.net with your new-found skills.”

screenshot

CSS Tricks

Chris Coyier over at CSS Tricks pushes out a steady stream of incredibly educational video tutorials. His site currently has 84 free to download screencasts that cover various HTML, CSS and JavaScript techniques and tips. Below we’ll look at six that should be helpful to beginners.

Converting a Photoshop Mockup (part 1 of 3)

“In this first-ever video podcast, I start the conversion process of an Adobe Photoshop mockup of a website, into a real live CSS based website. This is pretty rough here folks, I’m sure these will get more focused with time.”

screenshot

CSS Formatting

“Being organized and using good formatting in your CSS files can save you lots of time and frustration during your development process and especially during troubleshooting. The multi-line format makes it easy to browse attributes but makes your file vertically very long. The single-line format keeps your file vertically short which is nice for browsing selectors, but it’s harder to browse attributes. You can also choose how you want to group your CSS statements.”

screenshot

Converting a Photoshop Mockup: Part Two, Episode One

“There has been LOTS of great feedback on the first series of Converting a Photoshop Mockup into HTML/CSS. So let’s do it again! Every website is different will require different conversion technqiues so there will be plenty to learn this time around that will be different from last time.”

screenshot

Designing for WordPress: Part One

“In part one, we will be downloading and installing WordPress. Then we will install the “Starkers” theme by Elliot Jay Stocks to start with a completely fresh slate for our new design. No sense starting with the default theme, it’s more trouble than it’s worth! In part two, we will go over the theory behind designing for WordPress and how it’s much like “working modularly” and actually get started designing. In part three, we will finish up the design and start in with some more advanced functionality.”

screenshot

HTML & CSS – The VERY Basics

“This video is the VERY basics of what HTML and CSS is, for the absolute beginner. HTML and CSS files are, quite literally, just text files. You don’t need any special software to create them, although a nice code editor is helpful. You can create these files on any computer and use your web browser to preview them during development. You can think of HTML as the content of your website: a bunch of text and references to images wrapped in tags. CSS is the design of your website. It targets the tags you wrote in your HTML and applies the style. Keeping these two things separate is key to quality web design.”

screenshot

Building a Website: HTML/CSS Conversion

“In part 2 of this series, we begin the HTML/CSS conversion of the Photoshop mockup we created in part one. We start with a very skeletal project framework. Then we take a look at the Photoshop file layer organization. Then we start from the bottom up, creating the pieces we need from the Photoshop file and writing the HTML and CSS we need to get the job done. Much of the work isn’t actually “slicing” the Photoshop file, but looking closely at it and trying to mimic what is done there with correct markup and CSS techniques.”

screenshot

Victoria Web

Victoria web is a sort of online web school currently in beta. They have a small handful of free video tutorials for web developers.

Getting Started With PHP

“Looking to begin learning and creating PHP applications? This video demonstrates tools used by industry professionals in order to get their applications up and running quickly and effectively.”

screenshot

jQuery Introduction

“Introduction to the jQuery JavaScript framework. You will learn how to use CSS selectors in order to modify DOM objects, sliding them in and out of view, fading, and creating custom animations.”

screenshot

Entire Web Design

“Learn to create this entire dealership website from start to finish. Covering various techniques such as layer masks, clipping masks, reflections, shadowing, and more.”

screenshot

ShowMeDo

ShowMeDo is a source for instructional videos on working with open-source technology and software.

The basics of Javascript

“In this video I show the basics of Javascript. The <script> tag begins in between the tag. It could also be in between the <body> tag. That is why we call the message() function from within the onload attribute in the <body> tag (That is, when the page loads). Outputing simple text on the html page and alert boxes, defining a function and an if/else clause, gives us an immediate and general feel of what Javascript is.”

screenshot

Python from zero

“This series of videos is a very basic approach to python programming for beginners. In the hopes that the audience will stay tunned until the pygame tutorials, which will show how to make simple 2D games with no prior knowledge of computer graphics.”

screenshot

Other Sources

The videos below are from scattered sources around the web. It’s always good to learn from as many separate sources as possible to make sure you’re getting a thorough education.

Creating a WordPress Template – Part 1 of 3

“An in-depth three part walk through for creating your first WordPress theme.”

screenshot

Modify WordPress Theme – Video Tutorial

“This is the 3rd video of Advanced WordPress Video Tutorials. This video tutorial is showing how to work with some WordPress theme codes, that is how to add autoresponder code to the blog sidebar, how to put banner in the single post and similar things.”

screenshot

How to make a wordpress plugin

“A short video tutorial on how to make a wordpress plugin.”

screenshot

Creating a Website: From Start to Finish

A three part series that takes you from designing a website in Photoshop all the way through coding in HTML and CSS.

screenshot

jQuery Online Movie Tutorial by John Resig

“John Resig, creator of jQuery javascript library, has posted an online video about how to make an accordion style menu using jQuery. Pretty basic stuff… but a good intro to jQuery if you’re new to this.”

screenshot

Conclusion

With all the free resources above, I hope you’re running out of excuses for not being able to code sites by hand. It’s time to jump in a get your feet wet. Merely following along with the videos above will teach you loads and will get you well on your way to becoming a full-fledged web developer.

Know of any more free video tutorials? Leave a link in the comments below.

30 Gorgeous and Versatile CSS Menus

Sometimes the navigation menu can be one of trickiest parts of the design process. This single area can set the tone for the usability of the entire site. When you turn your PSDs into HTML, make sure your navigation is legit!

Sometimes the navigation menu can be one of trickiest parts of the design process. This single area can set the tone for the usability of the entire site.

Today we’ll look at 30 inspiring examples of good menu design. Though many are pure CSS, others add in some images and/or JavaScript to increase the aesthetic and functionality.

Delving Deeper

It’s always more helpful to get a feel for the process of the development than to merely see an image, so in this section we’ll briefly discuss the aesthetic of each menu and how the developer accomplished the effect. This way you can gain inspiration into how to use new methods to create your own unique menus.

Silk Tide

This is one of the most minimal menus on the list. It’s basically just plain text with an extended blue box rollover but it’s really easy to implement and results in a nice effect.

screenshot

Glenn Sorrentino

This example uses CSS borders on the top and bottom of the menu that increase in thickness when you hover over them.

screenshot

Strutta

If you have a textured background, consider using transparency in your menu to increase the aesthetic. This could easily be done with RGBa in CSS3.

screenshot

Elbow Park

Another example of transparency in the navigation area. This one uses a similar effect to the first example with the selection box extending up to the top of the page. This increases visibility and makes for a more seamless design.

screenshot

Thoughtbot

As you rollover these buttons the background changes to a brighter red. This combined with the glossy look (accomplished with a transparent PNG) creates the illusion of the area lighting up.

screenshot

Toffee Nut Design

This beautiful example uses CSS sprites for the navigation. The entire menu is one PNG showing each of the tabs in three states: off, on, and on+selected.

screenshot

Safarista

Here we see each section of the navigation as a hybrid of image and text. The icon, gradient and smaller background make each section’s image while the larger text is styled HTML with a underline hover effect.

screenshot

David Jonsson

Another simple hover effect that bleeds to the top. This one had hidden icons that only display when you mouse over. A nice effect!

screenshot

Asvalia

I really like the colors and the crooked text on this menu. The glowing rollovers are perfect.

screenshot

Bonsai Studios

This one is an extremely simple vertical menu with transparency and a darkening hover. It gets the job done, looks great and can be built in minutes.

screenshot

Great Expectations Church

Another vertical navigation menu. This one implements some basic but attractive icons and a background GIF with a gradient for the hover.

screenshot

Ryan Couser

This one uses some simple sprites to accomplish the hover. Each icon is an image with both the on and off states.

screenshot

Kk Media

Here we see a vertical menu with more detailed icons. Each link is an HTML list item with a simple background image applied in CSS.

screenshot

Bite Club

I really loved this navigation bar. The brightness really grabs your attention and the reversal of the colors makes a perfect rollover. This also uses a sprite for each menu item, each with three states.

screenshot

Capital City Equipment Company

I though the house shaped navigation selection was clever on this one. The text in each link is part of the image, if you replicate something like this it would be simple just to use live text over the background image instead.

screenshot

Strawberry Leisure

This dropdown menu uses a small repeating transparent PNG to pull of the reduced opacity effect. Again, we can look forward to this being much easier in the near future with RGBa when more browsers get on board.

screenshot

Artificial Studio

Yep you guessed it, more image sprites (sensing a trend here?). The big buttons and excellent gradients make for a beautiful navigation area.

screenshot

Cognigen

This was by far one of the most original concepts I came across in my search. To pull of the unique 3D effect, the designer has used a whopping four states for each button that change depending on whether the button is selected, hovered over, or has an adjacent selection.

screenshot

More CSS Menu Goodness

Now that we’ve discussed quite a few great examples, here are a bunch more to check out. Use your browser’s inspect feature to check out the code and images behind any that you like!

Manndible Cafe

screenshot

Code Greene

screenshot

Opera

screenshot

Mac Rabbit

screenshot

Clark Builders

screenshot

Mr. B and Friends

screenshot

Subvert

screenshot

The Swish Life

screenshot

Mystery Tin

screenshot

LiveResto

screenshot

FeelSocial

screenshot

Gowalla

screenshot

NZ Festival

screenshot

Download Prebuilt Menus!

Need a good starting point for your own CSS menus? Check out these great free resources.

Now Show Us Yours

Do you have a CSS menu that you’re particularly proud of? Use the comments below and leave a link so we can see. Also let us know which of the examples above you liked best.

Twitter Bootstrap 2: Bootstrap Goes Responsive

Twitter just released Bootstrap 2.0, an update so large it equates to a near full rewrite. There are quite a few new features and toys to play with, but the real headliner is that the framework is now fully responsive. Join us as we dig in to see how the new grid works and what other cool new features have been added. You’ll learn how to implement Bootstrap in your projects and will also pick up some extremely handy CSS techniques that you can use anywhere.

Recently, we published a piece titled 5 Incredibly Useful Tools Built Into Twitter Bootstrap, which took a look at the basic structure of Twitter’s Bootstrap framework and walked you through implementing some of the major components.

Twitter just released Bootstrap 2.0, an update so large it equates to a near full rewrite. There are quite a few new features and toys to play with, but the real headliner is that the framework is now fully responsive. Join us as we dig in to see how the new grid works and what other cool new features have been added. You’ll learn how to implement Bootstrap in your projects and will also pick up some extremely handy CSS techniques that you can use anywhere.

Demo

We’ll be talking about several new Bootstrap features today. If you want to see them in action, stop by the live demo below.

Demo: Click here to launch.

screenshot

Implementing the Responsive Grid

The most major aspect of Twitter Bootstrap is of course that it is now fully responsive. If you’re still labeling the whole responsive movement as a silly fad in hopes that you can ultimately skip learning the requisite techniques, you’re out of luck. Responsive design is well on its way to being a standard practice instead of a “nice to have” add on. It’s really not as complicated as you might think and tools like Bootstrap make it even easier.

The new responsive grid is twelve columns wide and works much like the sixteen column grid from Bootstrap 1. If you’ve ever used any grid system before, then you’ll feel right at home as there’s nothing too Earth shattering here.

screenshot

To implement the grid, you pretty much follow the same steps as you always did. Start with a container div, then create a row and fill that row with span(x) divs. Given that it’s a twelve column grid, just make sure the numbers in a row add up to twelve. Try four “span3″ divs, a “span9″ with a “span3″ or even just a straight up “span12″ to go all the way across. Here’s a quick example:

1
2
3
4
5
6
7
<div class="container">
  <div class="row">
    <div class="span4"><p>Lorem ipsum dolor sit amet</p></div>
    <div class="span4"><p>Lorem ipsum dolor sit amet</p></div>
    <div class="span4"><p>Lorem ipsum dolor sit amet</p></div>
  </div>
</div>

The above represents a static grid. It will still be responsive, it just won’t respond to every minute browser window size change, only those set by media queries. If you want a fluid grid, use the fluid classes:

1
2
3
4
5
6
7
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span4"><p>Lorem ipsum dolor sit amet</p></div>
    <div class="span4"><p>Lorem ipsum dolor sit amet</p></div>
    <div class="span4"><p>Lorem ipsum dolor sit amet</p></div>
  </div>
</div>

The Media Queries

The included media queries are listed below, starting at mobile and working their way up. Basically, each one goes in and changes the size of the columns to reflow the layout to something more appropriate for the viewport.

  • @media (max-width: 480px)
  • @media (max-width: 768px)
  • @media (min-width: 768px) and (max-width: 980px)
  • @media (max-width: 980px)
  • @media (min-width: 980px)
  • @media (min-width: 1200px)

The first media query (480px and below) targets smartphones and pretty much breaks everything down to a single, 100% width column. This may be a bit oversimplified for your tastes, but the beauty of frameworks like this is that they’re only suggestions, you’re encouraged to customize to your heart’s content.

The next media query targets portrait tablets with a range of 480px to 768px, then up to 980px for landscape tablets and on up to standard desktops and large displays.

For the static grid, individual columns start at 70px wide, then jump down to 60px and finally down to 42px before going 100% width for mobile.

screenshot

Tip: Grab the Right Download
Interestingly enough, the media queries aren’t included in the default download from the Bootstrap homepage. If you want them, you’ll have to grab the GitHub Download.

Nice Attribute Value Selector Usage

If you check out the code for the media queries, you might learn a neat trick or two. For instance, the devs have implemented a solid example of the “Arbitrary Substring Attribute Value Selector”, which I wrote about in CSS Selectors: Just the Tricky Bits.

screenshot

Bootstrap has many classes that use the word “span” (span1, span2, etc.), and rather than typing out each individually, the ASAVS grabs them all in one go with this fancy bit of code: [class*=”span”]. This selector actually digs through the HTML and finds anything with “span” in the class name, regardless of what follows it. Even a class of “spansomethingtotallycrazy” would be targeted.

Content Transformation

Though the heart of the media queries is to reflow the columns, there’s a lot more going on here as well. The developers have actually taken the time to restructure many of the elements so that they transform as the viewport size changes.

For instance, the navigation menus change pretty drastically when you’re viewing on a tablet or smartphone. To see an example, test out the Bootstrap Homepage. At full size, the navigation menu is a simple horizontal list of text links.

screenshot

On a tablet or smartphone though, the text is cleared out and replaced with a button up in the top right of the screen.

screenshot

Tapping on the button will expand the new menu area. Here we have a vertical list of links, which allows for larger tappable areas.

screenshot

Responsive Images

screenshot

The navigation menu isn’t the only thing that changes size with the viewports, lots of other objects do as well, from simple buttons up to more complicated objects like image carousels. To pull off the automatically resizing images, Twitter has taken the “max-width: 100%;” route. Here’s the full snippet:

1
2
3
4
5
6
img {
  max-width: 100%;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

This makes it so that, as those columns and rows resize themselves, the image width will max out at the width of the parent column. Also notice the “-ms-interpolation-mode: bicubic;” line. This is a fairly obscure property that essentially makes image re-sizing smoother in IE.

More New Stuff

The responsive functionality is definitely the coolest new feature of Bootstrap, but there’s a lot more here to get excited about. Here are three of my favorite items:

Progress Bars

screenshot

Bootstrap now has cross-browser-compatible progress bars that are super easy to implement. Just insert a snippet like the one below:

1
2
3
<div class="progress">
  <div class="bar" style="width: 30%;"></div>
</div>

The “width: 30%” here resembles how far along the progress bar will be. If you want to change that to half full, just type in 50%.

Button Groups

screenshot

Button groups are a bit like breadcrumb navigation in that they’re individual buttons that are all smushed together. Normally, this takes a good chunk of code to pull off. Not only do you have to style the general button theme, you also have to make the first and last button different.

With Bootstrap, all you need are some links with the “btn” class inside of a “btn-group” div.

1
2
3
4
5
<div class="btn-group">
  <a class="btn" href="#">One</a>
  <a class="btn" href="#">Two</a>
  <a class="btn" href="#">Three</a>
</div>

Carousels

screenshot

The old Bootstrap JavaScript plugins have been revamped and some completely new ones have been added. My favorite here is the new jQuery carousel. The example code below may seem hefty, but if you break it down it’s pretty simple. The slide contents gets thrown in the “.item” div and an optional caption can be added. Navigation is tossed in at the end.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
         
        <div class="item active">
            <img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
            <div class="carousel-caption">
                <h4>Third Thumbnail label</h4>
                <p>Lorem ipsum...</p>
            </div><!--end caption-->
        </div><!--end item-->
         
         <div class="item">
            <img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
            <div class="carousel-caption">
                <h4>Third Thumbnail label</h4>
                <p>Lorem ipsum...</p>
            </div><!--end caption-->
        </div><!--end item-->
         
    </div><!--end inner-->
     
    <!--nav-->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>

Conclusion

When a large company like Twitter puts out a free resource, it’s a gamble to actually build your workflow around it. One major issue is that you can’t know for sure how well it will be kept up in the long run. Fortunately, it seems like Bootstrap is, for now at least, a fairly high priority at Twitter. The new version represents a massive amount of time and effort and it really shows. This is turning into one extremely extensive boilerplate.

I’m personally stoked that Twitter deemed it necessary to take Bootstrap responsive. This will definitely help further the cause of responsive design that works well across not only all major browsers, but all major devices as well.

Leave a comment below and let us know what you think of Bootstrap 2.0. Did you try the first version? What are your favorite improvements?

PSD to HTML Slicing Tutorials

Any good web designer must know the basics of markup. Check out these nice and easy PSD to HTML slicing tutorials to understand how the process works and to broaden your skill-set.

Any good web designer must know the basics of markup. Check out these nice and easy PSD to HTML slicing tutorials to understand how the process works and to broaden your skill-set.

From PSD to HTML, Building a Set of Website Designs Step by Step

psd xhtml 1 PSD to HTML Slicing Tutorials

This is a very lengthy but good step-by-step guide to converting PSD files into HTML/CSS code. The whole process is described in great detail with lots of screenshots and code samples. All source files are available as a free download, for your convenience.

Creating a CSS Layout from scratch

psd xhtml 2 PSD to HTML Slicing Tutorials

This is a highly recommended read for newbies. It gives a nice and simple description of how to create a fully functional CSS layout from scratch. If you think HTML is a complicated language, you will definitely change your mind after reading this tutorial.

Build a Sleek Portfolio Site from Scratch

psd xhtml 3 PSD to HTML Slicing Tutorials

This slicing tutorial is more advanced, mainly because the PSD sample contains more elements and blocks to code. The post is less detailed, but features some very clean code samples and screenshots.

Converting a Design From PSD to HTML

psd xhtml 4 PSD to HTML Slicing Tutorials

This is a detailed 54-minute long video tutorial, which shows the process of PSD to HTML conversion. There are no downloadable source codes because the template was intended to be sold on ThemeForest.

Slice and Dice that PSD

psd xhtml 5 PSD to HTML Slicing Tutorials

This is another great video tutorial by Jeffrey Way. The first 25 minutes contain a step-by-step guide on markup creation. The second part of the screencast is about CSS.

Coding Your 1st PSD Tutorial

psd xhtml 6 PSD to HTML Slicing Tutorials

This CSS tutorial will teach you how to code your PSD file into HTML and CSS. This one is not as detailed as articles above and it is designed for people who already have a basic knowledge of markup.

How to Convert a PSD to XHTML

psd xhtml 7 PSD to HTML Slicing Tutorials

This is a great playlist of detailed video tutorials, which show the process of PSD to HTML conversion. There are no downloadable source codes, but it will definitely be useful for beginners.

Tutorial:Coding a Layout

psd xhtml 8 PSD to HTML Slicing Tutorials

Here you will learn how to analyze your designs and find the best way of converting them into HTML code. This is a short guide that will be interesting for both beginners more advanced users.

Create a Simple Accordion Using HTML, CSS & jQuery

psd xhtml 9 PSD to HTML Slicing Tutorials

The problem with accordion scripts is that they are usually heavy and they don’t always work properly. This tutorial will help you learn how to create a lightweight accordion script using HTML, CSS and jQuery.

Coding a Rounded Corners Layout

psd xhtml 10 PSD to HTML Slicing Tutorials

You should always make sure your code is clean, short, and well structured. This collection of tricks and CSS tutorials will teach you how to easily create rounded corners and shapes.

Converting a Photoshop Mockup

psd xhtml 11 PSD to HTML Slicing Tutorials

Here’s an excellent video that will walk you through the process of converting an Adobe Photoshop mockup into a CSS-based website. There are three chapters; the first two describe how to code the header, main menu, and footer and the third deals with the main content area.

From PSD to CSS/HTML in Easy Steps

psd xhtml 12 PSD to HTML Slicing Tutorials

Here’s a nice series of tutorials on how to create a web page. All its source files, markup, and design templates are available for download. This guide also emphasizes the importance of preliminary analysis of your PSD files to determine possible problem areas that may arise during the markup stage.

CSS Template Tutorial

psd xhtml 13 PSD to HTML Slicing Tutorials

This is another in-depth tutorial if you want to learn markup. This article gives a lot of details and serves as a great introduction to CSS.

We hope this list of PSD to HTML tutorials comes in handy for you. If you need to get your designs hand-coded into the highest quality HTML/CSS code, TheSiteSlinger.com is always at your service!

Our experts use the most advanced CSS preprocessors and can deliver .scss or .less files. Should you need help with a PSD to WordPress theme conversion, we will be glad to do it for you.

Contact us now and get a free quote today!