For the novice web designer starting out with a niche topic, is it feasible to attain all those goodies on the first pass? The answer is a resounding no.

Assuming, you’re not designing for world-wide brands where industry terms like “pixel perfection” are accepted as the norm, is it okay to not be perfect all the time? In this scenario, the answer is a resounding yes.

The Best Way to Eat an Elephant is in Small Chunks

The thing with perfection is that it takes time, patience, skill and yet more time. If you’re working for yourself, then you’ll probably want to start seeing results far quicker than the road to perfection is able to offer. Isn’t it better to get something out there to act as a starting point?

A design that you can tweak and test can offer the novice web designer the perfect scenario from which to learn their craft. Perfection, much like eating an elephant, is best achieved in small but manageable chunks.

We’re not talking about publishing scruffy work here, but insane levels of perfection are not necessarily the way to go. To aspire to perfection is a common theme in the DNA of most designers, but in all honestly, perfection might be best achieved in a number of steps.

When just starting out, it’s surely refining the creative process that must take precedence.

Can Perfection Even Exist in a Constantly Changing Landscape?

It begs the question, does perfection even have a place when you are designing for the web. The answer is probably not. Does perfection even exist?

The first thing to consider is the environment in which web designers’ work. The landscape is constantly shifting and evolving to reflect new ideas of how things should look. In this respect, websites are never actually complete.

They have to scale and change in accordance with external factors. Take the rapidly evolving nature of the Google search algorithm. Does anybody actually know what these guys want? The so-called Internet Marketing gurus might try to convince you that they do, but they may as well be trying to pin a tail on the proverbial donkey.

For example, the process by which web designers can achieve perfect search engine optimization must be constantly tweaked in light of visible results. There are an array of analytic programs out there that can help you keep track of such nuances like

• traffic statistics
• incoming keywords
• bounce rate
• click-through rate

However, these statistical programs can only offer such insight and point out areas of improvement if your site is actually up and running.

Avoid Procrastination at all Costs

When you’re first starting to design and publish your own websites, there’s a ton of stuff to learn. You’ll be kept busy enough without wasting time becoming too precious about the tiniest of details.

If you start delaying the launch of a site until everything is perfect, you’ll slip into a state of procrastination that can be very difficult to get out of. The best advice you will ever be given is to just start and make little changes as you go. It’s infinitely easier to test that way anyway.

Striving for perfection in web design, while a worthy cause, is one that you can afford to take your time over. It’s not like designing a physical product where alteration and development cannot easily take place following production. Web design is not like that at all.

In such a fast-moving and unique industry, web designers can afford to start out with a simple approach. Iteration and polish can be applied over time. Letting go of your ego may prove difficult. Putting something out there that you’re not completely happy with can be difficult to accept.

Consider the satisfaction of knowing that your website is alive and kicking while other designers may still be agonizing over which shade of blue to use for their background, and you might just start to feel differently.

Rinse and Repeat: Subsequent Designs Will Be Easier

It’s a rinse and repeat kind of scenario.

If you’re looking to make your mark in the niche publishing market, you’ll find that the techniques you learned from tweaking your first website over time become invaluable in getting subsequent sites just the way you’d like them in half the time.

If you’re the type of person who has hundreds of ideas that are only half-finished, it’s time to get something published. You can clean them up over time while continuing to take steps down the road to a full-time income from Internet Marketing. You might find that you don’t even need to. Craigslist is a prime example of an Internet success story, and perfect web design hardly comes into the equation.

Make your new motto: publish today, perfect tomorrow.

Author Bio

Ned Jackson is a full-time web designer from Orlando, Florida. He is a resident writer for DegreeJungle.com where students can learn about college programs such as computer programming and computer security. When he’s not fine tuning his sites, he can usually be seen cruising on his Harley.

After looking through several sites and noting how each treated different aspects of typography I think I understand better when I like and don’t like indents.

I set up a simple demo to let you play around with these aspects. It’s not too hard to figure out how to use it, but it might make more sense to read through this post first.

How I Looked

My thinking was that my preference, and perhaps yours, had as much to do with other aspects of how the type is set as whether or not an indent or line space was used. I still suspect a certain amount of the preference is simply that we’re used to the line space online, but I wanted to see if there was consistency in when I found indents a good fit, and equally, a bad fit.

I started by visiting the 3 sites I linked to in the previous post from 3 designers who’s work I admire. I hadn’t listed them specifically because I liked how they used indents, but simply because they were using them.

On revisiting the pages I noticed right away that I liked one, wasn’t crazy about another, and was in the middle on the third.

Here are the sites again in order of how I liked the indents, Naturally this is a completely subjective judgement and you may or may not agree with me.

• Jessica Hische — liked
• Mark Boulton — ok
• Jason Santa Maria — not crazy about

I spent a few minutes on each page and used WebKit Inspector to record a few things.

• What typeface was used?
• What font-size was used?
• What line-height was set?
• How much indent was used?
• What was the length of the measure?

I also observed how big or small the text blocks generally were.

One point I should make is that I didn’t try to determine if any of the pages were easier to read than the others. That’s really the most important thing, but I couldn’t think of a good way to make a meaningful measurement of that judgement.

Mainly I was considering how each looked visually. Think of it as which text seemed more inviting to read.

What I Found

When I looked at the aspects above and noted the settings of each there was definitely some consistency that matched my preferences, both good and bad. I’ve taken my preferred settings to other sites and experimented with them and so far they’ve always held up as a predictor of whether or not I’ll like how the indents look.

Here’s what I’ve found to work for me. The numbers are an approximation.

• line-height > = 1.6em
• indents > = 2.0em
• larger text blocks — subjective. I didn’t specifically count the lines in each.
• less links and other markup in text — this was also subjective and i’m not sure it holds completely

The typeface used or the size of the font didn’t make much difference. The main thing was that larger line-heights and larger indents (both to a point) made indents more inviting to me.

With the text blocks when they were more consistently larger and regular in size and shape I thought the indents looked better. When lists and shorter paragraphs that employed additional spacing were mixed in a lot I didn’t care as much for the indents.

However I did like when subheadings were used well, standing out and providing ample space between sections.

The measure of the text didn’t seem to be a big factor, unless it turned what might have been a longer block of text into a shorter one or two sentence block. As long as the measure worked in general it seemed to work with either indents of extra spacing equally.

For fun I did some simple math on each of the 3 sites above. I divided the measure (px) by the font-size (px), though again as long as the measure works for spaces I think it works for indents too.

• Jessica — 660 ÷ 13 = 50.769
• Mark — 682 &divide 18 = 26.778
• Jason — 440 &divide 18 = 24.444

Once I’d observed the above I started playing a little. Through WebKit Inspector I increased the line-height and indent on Jason Santa Maria’s text and I liked it more. I played around with Mark’s site and Jessica’s site as well other random ones and the changes all correlated well with my like or dislike for the indent.

This is, of course, completely subjective, but it does suggest that indents can work well online. I think the key is ultimately to modify different settings to achieve a typographic color that works well.

You may or may not like the indents at the same settings as I did, but I suspect there will be combinations of line-height, indent, font-size, etc. where you do think they look good.

The Demo

Again I created a demo that will let you experiment with some of the settings.

I grabbed the opening paragraphs of The Old Man and the Sea and have them set by default with the following:

font-family: Georgia;
font-size: 1.0em;
line-height: 1.6em;
text-indent: 2.0em;
max-width: 30em;

There are some drop downs at the top to alter each of the above. The different fonts are limited to a few that I think should work on both Mac and Windows. I also added the generic serif and sans-serif options if you want to experiment with other fonts on your system.

The other settings are given a reasonable range, usually around 1em in the middle, though in the case of measure the values range from 17.5em to 50em in steps of 2.5em.

Summary

Again this whole topic is somewhat subjective. The conclusion I drew from my last post was that there’s no single right or best way to style paragraphs, however indents were typically advised for print and there’s a movement among designers to drop the line-space online in favor of using indents.

My casual observations showed mixed feelings in the use of indents, but now that I’ve taken a deeper look I think with the right typographic color, which for me is when greater line-height and text indent are used, especially on larger blocks of text, the indents work.

Play around with the demo and try my preferences and explore some of your own to see if you find indents appealing as well.

• Is An Online Degree In Web Design Right For You?
• SEO Education: Online Degree Or The School of Hard Knocks

Before anything else let me make it clear that I think knowledge is incredibly important to any career and life in general. In the signature to my email I add a line from a Bob Dylan song. Brownie points if you know the song.

He not busy being born is busy dying.

I use the quote as a reminder to always be learning something new and always striving to grow. The moment you stop doing either is the moment you stop being.

Theory vs. Practical

When it comes to knowledge there are different kinds of knowledge and different ways of acquiring each kind. On one side is theory and on the other side is the practical application of theory. Both types of knowledge are important and both make you better at whatever you do.

I think those who advance the furthest in life tend to be those who acquire knowledge at both ends of the spectrum and acquire it in a variety of ways.

Theoretical knowledge — teaches the why. It helps you understand why one technique works where another fails. It shows you the whole forest, builds the context, and helps you set strategy. Where self education is concerned theory prepares you to set a direction for your future education. Theory teaches you through the experience of others.

Theoretical knowledge can often lead to a deeper understand of a concept through seeing it in context of a greater whole and understanding the why behind it..

Practical knowledge — helps you acquire the specific techniques that become the tools of your trade. It sits much closer to your actual day-to-day work. There are some things you can only learn through doing and experiencing. Where theory is often taught in the ideal of a vacuum, the practical is learned through the reality of life.

Practical knowledge can often lead to a deeper understanding of a concept through the act of doing and personal experience.

Both of the above are important. You won’t survive in any career unless you can bring results and to do that you need practical knowledge. There’s no avoiding it.

At the same time learning how to solve a specific problem only teaches you how to solve that same problem again. Practice can only take you so far. Theory helps you apply what you learned solving one problem to different problems.

Formal Education vs Self Learning

Formal education tends to lean toward the theory side of the spectrum and teaching things to yourself tends to lean toward the practical. You can learn both through either method, but each tends to give you a little more of one over the other.

The key to getting all of the knowledge you need is to understand that whichever route you’ve chosen you’ve probably gained a lot more of one side of the knowledge equation and need to spend some time acquiring knowledge from the other end to balance your education.

If you go the 4 year degree route realize that many people in the work force can already perform the specifics of your job better than you can. It’s up to you to put in the time gaining the practical experience you need to complement the theory you learned. While in school don’t pass on opportunities to gain the practical. Apply for that internship. Try to get a summer job in your chosen profession no matter what the specific job.

If you skip school and go straight to the workforce, understand that you need to acquire the big picture view of what you’re doing. Grab some books on the fundamentals. Audit courses at nearby colleges. Set a more formal path for your own education beyond the day to day. Be more active in understanding why different techniques work as they do. Devote some time to studying themes in your craft.

In the middle is the online education. Its formality offers a chance to learn theory, yet many online courses aim to get you into the workforce as soon as possible. They may not excel at either end, but they do offer you the balance in the middle.

Is That Piece of Paper Worth It?

The question above really depends on your specific goals and the path you plan on taking through your career. If your plan is to go into business for yourself then no, the paper that certifies you earned a degree is meaningless. I can tell you that none of my clients have ever asked to see my degrees.

Then again if my business was in an office that clients physically visited, I bet hanging a degree from a prestigious university behind me would help close deals.

If you plan on working for someone else the degree takes on more importance and the the larger the entity you want to work for the greater the importance of that degree. When you’re beginning your career you have no experience. It doesn’t matter whether you’re 18, 22, or 50. You start without experience like everyone else.

Without experience it can be hard to find a job. That piece of paper with the degree on it, isn’t experience, but it’s a recommendation from a trusted source that says you have the framework in place to gain the practical experience. The degree tells others you have a strong foundation on which to build.

Summary

As I’ve said throughout this post and everywhere else I’ve ever talked about this topic, the education you get is more important than where you get that education. You can easily find examples of people who did and didn’t go to school who went on to great success. You can equally find examples of people who did and didn’t go to school who ended up as great failures.

There is a theoretical side and a practical side to knowledge and both are valuable. The true masters of any craft or discipline understand both ends of the spectrum. They put in the hours to acquire the practical techniques while also putting in the time to understand how those techniques fit into a larger context and tradition and why they work.

Whether or not you go to school or jump directly into the workforce is a personal decision that’s based on a variety of factors. Do you need to start earning a living right away? How do you best learn? Will you be able to pick up the theory and context on your own? Do you need more time gaining the practical experience?

Only you can answer those questions and only you can determine which is the better path to start out on. However, focusing only on one side while ignoring the other will limit you in ways you may never even realize.

Is an SEO Degree Realistic?

I have an 18 month old son, which means I am exactly 18 months behind planning for his college education. I like to think that he will want to follow in the footsteps of “dear old Dad”, but if he chooses to follow in my foot steps, does that mean he needs a four year degree in SEO? It is hard to say what the future holds, but as for right now, I believe obtaining a degree in SEO is not only a waste of money, but a waste of valuable time that one could use gaining real-life usable knowledge in this field.

Before I get lynched for not adhering to societies ever-poplar mantra “You MUST go to college”, let me explain. SEO is an entirely separate entity from most modern careers, and here is why. Clients don’t care about your education, they care about results. Plain and simple.

It is sad that most of the modern world doesn’t function this way. Imagine how different our public schools would be if the focus when hiring teachers wasn’t who was most “qualified”, but who could actually obtain results in the classroom. Perhaps SEO is just ahead of the curve.

I only wish it were so easy, that I could go into a classroom and learn the secrets of SEO from a master. But the truth is, that simply doesn’t exist. If I were to take a course in SEO, I would likely be learning tired tricks of the trade, from someone who not only does not know this industry, but couldn’t have possibly been successful in it, because if he or she had, they certainly wouldn’t be wasting their time teaching in a classroom, they would be online, making money instead.

Imagine the absurdity of a textbook geared at teaching the art of SEO to students. Before the ink had dried, Google would have changed their algorithms, and the text would be rendered useless.

Instead of college degree, an internship in a successful SEO company would be more highly valued. And isn’t that what my son is getting already? An 18 year long internship in how to run a successful SEO company?

Perhaps this is the one and only job that focuses attention where it needs to be, on success.

So should you focus your time into taking classes in SEO so you can stand in the crowd chanting societies mantra “You must go to college…you must go to…” Sure, go ahead. But I will be here, in the School of SEO hard knocks, learning from mistakes, and enjoying the success that comes from working in an industry that focuses on results over education. Come on son, “Dear old Dad” has something to teach you.

Thoughts from Steve

I’ll have more to say tomorrow about the value of getting a degree, but wanted to add some thoughts specific to Brandon’t post here.

While I agree with Brandon that it ultimately comes down to results, I think he’s shortchanging what can be taught in school. SEO is at its core marketing and marketing principles can be and are taught. I disagree that SEO is an entirely separate entity.

Off the top of my head here are some things you can learn while getting a degree that could benefit an SEO.

• Marketing
• Writing
• Statistics and Analysis
• Programming and Coding
• Business
• Creative and design

True you aren’t going to learn the latest tricks of the trade, though that’s true of every industry. There’s much more to SEO than the latest tricks of the trade though.

I don’t run an SEO company, but if I were and I was hiring I think I’d look more for the person who could write well and understand statistics, analysis, and testing, and had a strong foundation in marketing, than the person who knew some of the tricks of the trade. Those tricks are much easier taught than the the more well rounded foundation.

I’m not trying to imply you can only learn these things through a degree program. You can certainly teach yourself to write, etc. I just want to point out that a lot of what an SEO does and should know to get the results they’re after, can be taught in school.

I’ll also argue that there are plenty of teachers who teach, not because they can’t perform in their industry, but because they enjoy teaching and think it’s valuable to help educate others.

I’ll have more thoughts on the general subject tomorrow.

Author Bio

If you weren’t able to deduce, Brandon Hopkins does not have a college degree, but he does have over 8 years of link building experience and owns DiamondLinks.net a link building service with a focus on getting results.

What is the Page Layout Algorithm Change?

In a nutshell, Google receives complaints from people that click on a link in the search results and land on a page filled with ads. The pages often have little content or content that is difficult to find. I’m sure you’ve landed on a few of these pages. I know I have.

As you might expect, Matt was pretty vague when it comes to the details of this change. Here’s the meat from the post in his own words:

…sites that don’t have much content “above-the-fold” can be affected by this change. If you click on a website and the part of the website you see first either doesn’t have a lot of visible content above-the-fold or dedicates a large fraction of the site’s initial screen real estate to ads, that’s not a very good user experience. Such sites may not rank as highly going forward.

Matt does later say it’s ok to have ads above the fold. It’s a matter of excess.

Having an ad above-the-fold doesn’t imply that you’re affected by this change. It’s that excessive behavior that we’re working to avoid for our users.

Let’s momentarily ignore the fact that “the fold” isn’t really a meaningful concept anymore, given all the different devices people use to access sites and let’s also ignore the hypocrisy in this as Google’s own search results often fail the test of too many ads above the imaginary fold. And why not also ignore the irony of an email, sent out by the AdSense team on the same day as Matt’s post, suggesting site owners surround their content with more ads.

What exactly does this algorithmic change mean for web designers?

Questions Matt’s Post Raises

The usual and understandable vagueness around this change raises some questions.

• What’s considered “the fold”?
• How much content needs to be “above the fold”?
• What does Google consider an ad and how do they determine that algorithmically?
• How many ads is excessive?
• Is this based on where ads appear in the code or where they appear visually on the page?
• Can Google algorithmically determine how the page appears visually?

Our best bet for answering the first is to use Google’s browser size tool. It won’t give exact dimensions, but it attempts to show where “the fold” is for most users. I doubt Google will ever be more specific than excessive in regards to how many ads is too many.

When it comes to how they distinguish an ad from an image they likely look for the image to be wrapped in an external link and for that link to contain some kind of tracking code. I’m sure this results in some false positives and some missed ads, but I bet they do a pretty good job with this overall.

To me the most important questions are the last two when it comes to how we should design and develop pages.

My guess is Google looks algorithmically at the code to find potential offenders and set a flag or some kind of score. They’ll send some of these pages to their quality inspectors who’ll visually consider if a page’s content is buried in excessive ads, which will further suggest patterns Google can look for algorithmically.

In the end Google probably looks at both the code and the visual appearance of the page to decide.

An Extension of Panda

As my gypsy friend Dave points out this change is likely an extension of the panda update, which also puts emphasis on quality content and user experiences.

In his post, Dave shared that reports from inside his SEO Dojo indicate the page layout algorithm has probably been in effect for awhile before its announcement.

While you’re at Dave’s site search for some of his posts on page segmentation. Of course, Dave isn’t the only one writing about this so here are a few other articles I collected when the news broke.

• Google Announces Above-the-Fold Algorithm Change
• An Interview With A Google Search Quality Rater
• Google’s New Page Layout Update Targets Sites With Too Many Ads
• Pages With Too Many Ads “Above The Fold” Now Penalized By Google’s “Page Layout” Algorithm
• From AdSense to SpamSense to Spam Cents

It’s All About User Experience

Again, this algorithm change is designed to demote sites that make it difficult for a user to get to the content and offer a bad user experience.

Regardless of the details and the right or wrong of it all, this change comes from the idea that users don’t want to have to spend time searching to find your content when they first land on your site or page.

“we’ve heard complaints from users that if they click on a result and it’s difficult to find the actual content, they aren’t happy with the experience.”

In the Search Engine Journal article I linked to above (the first in the list), Alan Bleiweiss notes that “SEO is about understanding user experience as seen through search algorithms,” which is a point I’ve been trying to get across for years.

• How To Help Search Engines Find Your Content
• How To Help Search Engines Understand Your Content

User experience is the key here. What can we do as designers to help people find the content?

• Make the main page heading the dominant element
• Use more minimalist design so content stands out
• Add less superfluous elements in general
• Use grids and strong alignment for clear content placement
• Clearly separate content from ads — make it clear which is which
• Use proximity to better organize page elements
• Make better use of space
• Adjust visual weights to create a clear visual hierarchy

In other words follow basic design principles. If we think about our visitors first we should be ok and not suffer from the page layout algorithm change. Quite honestly if you’re following basic design principles and paying attention to user experience you shouldn’t need to change anything. You’re likely doing the right thing now.

The above is all well and good when it comes to the visual side of things. How about when we’re structuring our code?

You probably want to place content as close to top as possible. That doesn’t mean it needs to be the absolute first thing in the file, but you probably want to get content in there above any ads if possible.

This is how things need to be done in responsive design anyway as, outside of complex css positioning, single columns will always show elements in same order they appear in html.

This will change when the flexible box model is more widely adopted by browsers and designers, but for now the order you see things in a single column layout is pretty much the same order things appear in the code so your html structure and visuals need to be in the same order.

And you probably don’t want to follow Google’s AdSense heatmap shown below, or at least understand you aren’t meant to fill every block with an ad.

Summary

As with all Google algorithm changes this one is long on vagueness and short on detail. The overall message is that too many ads obscuring your content is bad and will be treated as bad in the search results. If you try to stuff too many ads at the top of your page, expect a drop in ranking.

While the details aren’t specific you can probably use a little common sense in regards to what’s excessive and where “the fold” is. I’m sure before too long SEOs will be figure out some of the details and share them with us.

I applaud Google’s efforts in wanting to rank pages richer in content than ads, even if they wouldn’t always pass their own tests. Even more I’m excited that how a web page is designed is continuing to show more importance in Google’s algorithms.

Design matters and if you think real people first and treat your visitors well, you’ll probably find search engines treat you well in return.

The following is a guest post from Amanda Tradwick that looks at two popular places to get online degrees. I’ll add some thoughts of my own at the end.

ITT and DeVry: A Comparison of Web Design Programs

If you are interested in completing your formal training in Web design, or if you are a professional who is looking to change careers, there are many online schools that can provide the training you need and allow you the flexibility to continue to work or tend to family responsibilities while you study.

Two popular online schools, ITT Technical Institute and DeVry University, offer programs in Web design. If you are considering pursuing your degree with either of these well-known colleges, here is more information about how the two programs compare so you can determine which is right for you:

Programs Offered

Both schools offer a program in Web design, each with different parameters.

• ITT offers an associate’s degree in Information Technology — Web Development
• DeVry offers an associate’s or a bachelor’s degree in Multimedia Design and Development

The broader degree offered by DeVry has to be narrowed by adding a specialization in Web Design and Development.

Those who are looking for a specific degree in Web design might find that the specialization option at DeVry is not comprehensive enough. However, the abbreviated associate’s degree program at ITT may not be extensive enough. Your individual professional goals will determine which program is the best option.

Program Focus

The degrees offered by each school offer a general education in Web development, though each has a different focus.

The program at ITT teaches students how to design, create, and maintain Web sites. Training includes coding with popular programming languages, use of database technology, and more. The program promises to provide students the training to become Web administrators, applications developers, software developers, and Web site developers.

The program at DeVry is a bit more theoretical in nature. The program teaches students business fundamentals, principles of Web site layout and structure, and standards of design. Practical skills focus on the use of database technology and how to develop and use animations, videos, and images.

Those who are looking to quickly enter the workforce or to change careers would likely benefit more from the program at ITT, which is more focused on teaching practical skills in a shorter period of time.

Investment

The amount of time and financial resources required to complete each program greatly varies.

The bachelor’s degree at DeVry is a typical four-year program. However, the associate’s degree is 30 months — six months longer than the typical two-year program available at ITT.

Both associate’s programs are comparable in price.

• The program at DeVry costs $37,405
• The program at ITT costs $40,896

Though the program at ITT is shorter, it includes more credit units than the program at DeVry. The associate’s degree at ITT includes 96 credit hours, and the longer program at DeVry includes 67 credit hours.

This means that the program at ITT includes more classes, but that the classes meet for a shorter duration. If you prefer a more fast-paced, skills-oriented program, then the program at ITT would better suit your needs. In contrast, the program at DeVry is more conceptual in nature, but allows greater time for learning the material.

Determining the program that is right for you will depend on the type of learner you are and the goals that you have for your professional development.

Those who are looking for a more intense, results-oriented program in a shorter time span would benefit more from ITT’s shorter, practical curriculum.

Those who want a more traditional bachelor’s degree and are interested in developing as a manager or project leader would benefit more from DeVry’s program.

Both are fully accredited and offer financial aid. Of course, both also offer the flexibility of online learning, allowing professionals to create their own schedules and to balance study with work and other responsibilities.

General Thoughts from Steve

Back to me. I think education is important, not just for web designers, but for everyone. We’re all different though and we learn in different ways and have different goals for what we’ll do with the things we learn.

I mentioned 3 places to learn from at the start of this post.

• Physically attending a 4 year college or university
• Getting an online degree
• Teaching yourself though books and online tutorials

All 3 can be great ways to learn. You’ll have to do the last at some point if you want to stay current and continue learning. The question is whether to go either of the first 2 routes.

I’m someone who did go to college. In fact I went to several in earning 2 undergraduate degrees, neither in web design or development, though. As a web designer I’m mainly self taught. The online degree is the one path I didn’t travel.

My guess is many of you reading are either self taught or starting on the self teaching journey. Ultimately I think your success as a web designer will come from the understanding and skills you acquire and not so much from where you acquire them.

At the same time I wouldn’t brush off a more formal education. Had I not spent the years in college that I did, I don’t think I would be able to teach myself the way I can now. I wouldn’t be as disciplined or organized in how I learn. Picking up tips and techniques from tutorials can be a great thing, but they don’t always show you the big picture and help you integrate what you learn into a whole you make your own.

Both the big picture and the finer details are important for success.

In the end how you learn is up to you as long as you learn. The only mistake you can make is a failure to learn.

Author Bio

Amanda Tradwick is a grant researcher and writer for CollegeGrants.org. She has a Bachelor’s degrees from the University of
Delaware, and has recently finished research on native
american grants for college and wyoming
education grants.

Soon after Tim Brown suggested using a modular scale for more meaningful typography.

These two concepts are leading and pointing the way forward for all web designers to follow. They are the new canon for web design.

Designing From the Content Out

Binding content to the book is what all good book designers do. To do this, they use Canons of Page Construction, or other principles to design grid systems that, when populated by content, create that connection.

The above is a quote from Mark’s post. Grids aren’t arbitrary structures. For them to be most effective they need to be tied to the thing they are attempting to structure. That requires a constraint to connect them.

In print that constraint is the size of the page. The page is static. It will always be the same size throughout the work. It can be divided and subdivided into geometric systems that become a grid.

Online things are different. There is no fixed canvas within which we work. For years web designers have tried to impose a fixed canvas through the use of fixed width layouts, but with the myriad of devices and device characteristics this is no longer feasible. We can no longer design for a single optimal set of conditions and assume it will work well enough under all other conditions.

We need a new canon as we can’t rely on the canvas. What we can rely on is the content. We can reverse things and instead of starting at the page edges and working in, we can start inside with content and design out.

To begin we need a constraint from within the content. This constraint shouldn’t be arbitrary as our goal is to connect the design to the thing being designed. What you choose is up to you and the specifics of your project, but there are some obvious choices.

• Type
• Images
• Ads

The last would depend of course on whether or not your site has ads, but it’s safe to say that most every project will have type and images or other media.

Write down a general description of the qualities of the message you are trying to convey, and then look for typefaces that embody those qualities.
—Jason Santa Maria

Choose a typeface for the body of your content and decide what font-size will work best. Ask yourself what images will be used and if they need to hold a consistent size in either direction. If you’re using banner advertising which of the standard sizes will your design need to accommodate?

With even just one of these constraints we can work our way out and build a typographic grid and in so doing connect the structure of our design with the content we’re designing for.

Making the Connection Through Modular Scale

A modular scale, like a musical scale is a prearranged set of harmonious proportions
—Robert Bringhurst

In choosing a constraint above we’ve decided what aspect of the content our design will connect to. How do we go about connecting it? How do we choose the widths and heights that will make up the modules of our grids? How do we relate the design to content?

Tim Brown suggests we use a modular scale to set the measurements we’ll use throughout the design. The video above describes the process and I can’t urge you enough to watch all 31 minutes of it.

Say you’ve set your body type to be 16px (or better yet, 1em). To connect the rest of your design to that type, the measurements you use should be multiples of that same 16px.

Measurements like the size of headings and subheadings, column widths, grid modules, should all be part of some meaningful scale based on that original 16px measurement. This meaningful or modular scale is what leads to unity and a harmonious design.

To create a modular scale you start with a number (in our case 16px), choose a ratio such as 1:1.618 (the golden section) and do the math.

• 16 × 1 = 16
• 16 × 1.618 = 25.888
• 16 × 1.618 × 1.618 = 41.887
• 16 × 1.618 × 1.618 × 1.618 = 67.773

and so on. In the opposite direction we get

• 16 ÷ 1.618 = 9.889
• 16 ÷ 1.618 ÷ 1.618 = 6.112
• 16 ÷ 1.618 ÷ 1.618 ÷ 1.618 = 3.778

and again so on.

Math…ughh. Don’t worry. Tim created a modular scale calculator to do the math for you. In fact he gave us the ability to add a second starting number that when used with the same ratio creates what he calls a double stranded modular scale and leads to a greater variety of measurements to choose from.

With scale in hand you use the values as measurements throughout your design. For example from the above your main headline might be 41.887px, which corresponds to 2.618em. The calculator provides the em value in addition to the px value.

What Ratio Should You Choose?

How do you choose a ratio? Does it have to be the golden section? That choice is really up to you, though ideally your design concept will indicate a ratio you might use.

You might choose a ratio from nature or mathematics. Another potential source of ratios is music.

Music is exactly where Owen Gregory suggests we look in Composing the New Canon: Music, Harmony, Proportion. Why not music? It’s based on scales we inherently find harmonious. It communicates emotion. It gets people to act and remember.

Scales of different intervals are part of the musical language. Using a major 3rd or perfect 5th as the scale upon which we base our design make sense. It might not be a bad idea to start learning a little music theory to understand something of what these scales represent and communicate.

Fortunately Tim is building these musical scales into his calculator. We won’t have to worry about the math and even more we’re being given a starting point for research into music theory.

Whether you use ratios from music or some other place, the main point is to think about what ratio you might use to compose your modular scale and to begin using values from the scale as measurements in your design.

Summary

Trying to design from the canvas in no longer makes sense for web designers. There are already far too many canvases out there that we’d need to account for and what will work well specifically for one canvas will cause problems in the next.

Responsive design shows us how to develop sites that work across multiple devices and conditions. It doesn’t tells us how to develop a grid or what hierarchy is best. It doesn’t tell us how to connect the design to the content.

Fixing something in the content and then working your way out through the use of a modular scale does show us how to make this connection. This new canon points the way toward design unity and harmony.

• choose a constraint from the content
• take a measurement from the constraint to use as a starting number
• choose a ratio to use for the scale
• do the math
• choose measurements from the scale for other parts of the design

As I’ve said before it’s an exciting time to be a web designer. The industry is changing and those of us working today have an opportunity to help shape the future.

Have you changed your own process? Are you still starting with the cancans or have you made the switch to starting from the content and designing out?

The questions come from a post by Kyle Meyer, entitled Design is a Machine that I recently read. Kyle’s post evolved from the work of Sol LeWitt, an artist I’m unfamiliar with who saw art as a machine rather than something creative. Kyle points to the following quote from Sol LeWitt at the start of his post.

In conceptual art the idea or concept is the most important aspect of the work. When an artist uses a conceptual form of art, it means that all of the planning and decisions are made beforehand and the execution is a perfunctory affair. The idea becomes a machine that makes the art. This kind of art is not theoretical or illustrative of theories; it is intuitive, it is involved with all types of mental processes and it is purposeless. It is usually free from the dependence on the skill of the artist as a craftsman.

While I think some aspects of design can and are reduced to the mechanical I don’t think it can be said to be a machine. I know I don’t want to see it that way or it would instantly lose all interest to me. But it’s not simply about what I want.

Quoting Kyle:

There are formulaic approaches to visual problems that often yield a solid result or act as a foundation for commonly-defined creativity (grids, typographic scales, everything that is The International Style).

All true, however these approaches are tools and the same tool in different hands can lead to very different results.

We all have code libraries to quickly reproduce a menu or site layout and we follow established patterns that lead to similarities in finished products, but there are still many design choices made along the way, including which tools and patterns to use.

The primary function of a web designer is to communicate. I don’t think there’s a single or inevitable way to communicate.

A simple example is the choice of wether to communicate with words or pictures. A concept doesn’t inevitably lead to one or the other.

If you give 2 designers the same problem to solve and give each the same predefined concept and insist they use the same grid system, typographic scale, color scheme, etc., I don’t think you end up with the same website.

There would naturally be a certain amount of similarity because the problem is the same and many of the constraints will be the same, but the finished product will still be different.

Each of us does put something of the machine into our creative process. You might fall back on the same half dozen typefaces or rely on one of a small handful of layouts for projects. Still I think there’s a wide variety of possibilities even with the same fallbacks.

The machine in design is the constraints we impose in order not to have to make every one of the infinite choices available to us on every project. You fall back on the same palette of typefaces in order to put more of your attention into choosing colors. You fall back on familiar color schemes in order to put more attention into a choice of grid.

However, you program the machine and there’s creativity in that programming.

When designers consistently fall back on a set of tools and use them as a constraint time and again it’s where their style emerges.

George Polti reduced all stories to something like 36 different plots used again and again. Yet there are an infinite amount of stories within those 36 plots. The same problem with the same concept and the same set of constraints, doesn’t automatically lead to the same inevitable solution.

A game a chess could theoretically be reduced to a finite number of possible moves, with each position on the board having a best move leading to an inevitable conclusion. Those finite possibilities though, are so numerous that for practical purposes they are infinite. The game does not inevitably play itself out the same way each and every time.

A designer can reduce his or her designs to a machined process, however it’s only at the discretion of that designer, which implies choice and a non-machined creativity. Design itself isn’t a machine even if we sometimes choose to feed it through machines of our creation.

Whether or not our designs become a machine is wholly up to us. And because we make that decision, design itself isn’t a machine.

I had thought of blacking out this site, but as it’s unlikely a site the internet would miss for the day, I thought I could do more by keeping the site up and pointing you to the video and accompanying description below.

You’ve may have seen it already, though please watch it you haven’t. It’s only a few minutes long it will explain better than I can the dangers in the proposed bills.

To learn more and take action please visit Stop American Censorship at americancensorship.org/.

Thanks.

Tell Congress not to censor the internet NOW! – www.fightforthefuture.org/pipa

PROTECT-IP is a bill that has been introduced in the Senate and the House and is moving quickly through Congress. It gives the government and corporations the ability to censor the net, in the name of protecting “creativity”. The law would let the government or corporations censor entire sites– they just have to convince a judge that the site is “dedicated to copyright infringement.”

The government has already wrongly shut down sites without any recourse to the site owner. Under this bill, sharing a video with anything copyrighted in it, or what sites like Youtube and Twitter do, would be considered illegal behavior according to this bill.

According to the Congressional Budget Office, this bill would cost us $47 million tax dollars a year — that’s for a fix that won’t work, disrupts the internet, stifles innovation, shuts out diverse voices, and censors the internet. This bill is bad for creativity and does not protect your rights.

Two things have me thinking about paragraphs. First is an observation that using indents has become more common with designers I follow and admire. Second is a post by Nathan Ford, Islands of Thought in Macrotypography, in which he rails against the extra line space as the wrong way to indicate new paragraphs.

In his words:

These spaces effectively chop the text into what I call “islands of thought” — disconnected paragraphs floating downstream, with only their left-right boundaries holding them together.

Nathan’s point is the extra space breaks the flow of reading. His post is a great read and I’d encourage you to take a look if you haven’t already seen it.

He provides a bookmarklet at the bottom of the post to let you see how any site would look with indents instead of spaces and I’ve been playing around with it all week.

Here are a few designer’s who know more than I do that are currently using indents to mark paragraphs.

• Jason Santa Maria
• Jessica Hische
• Mark Boulton

Take a look and see what you think and also give Nathan’s bookmarklet a try.

History of the Paragraph

Indenting the first line of a paragraph is the most common way to show a paragraph in print. It wasn’t always that way. A variety of cues have been used to mark new paragraphs.

Nathan’s post links to a post by Jon Tan, The Paragraph in Web Typography & Design, which provides some history and it’s another I’d encourage you to read.

Jon also created a page with examples of paragraph typography.

For a long time in history, paragraphs weren’t there at all. Text displayed in one long block. Later, special charters like the pilcrow ( ¶ ) were added inline to mark a new paragraph. Whitespace was then introduced, first replacing the special characters inline, and then as the familiar indent.

Eventually the use of the line space boundary became more common and today it’s the standard on the web.

Jon speculates that the reason the line space is less preferred in print might have to do with cost. More space means more materials are needed. Online the cost of materials isn’t a factor. We should be more concerned with usability.

Advice from My Bookshelf

I have quite a few books about typography sitting on my shelves and it seemed like a good idea to consult some of the masters.

My first stop was Robert Bringhurst and The Elements of Typographic Style. He mentions several ways to indicate a paragraph, but only mentions a line space following a block of quoted text. I kept looking.

A half dozen or so books later I mainly found typographers recommending an indent as the primary means to show the start of a new paragraph, however they do mention several other ways, including the use of a line-space as a boundary.

In her book Thinking with Type, Ellen Lupton tells us paragraphs don’t exist in nature, unlike sentences which are a part of spoken grammar. Paragraphs are purely a literary device and numerous alternatives can be used to indicate them, including some extra space. She does recommend using ½ line space instead of a full space.

Here’s are the alternatives she mentions

• indent with line break
• outdent with line break
• line break only
• line break and ½ line of space between
• extra space inside line, without line break
• symbol inside line, without line break or extra space

She even suggests that inventing news ways to mark a paragraph is an intriguing typographic exercise. In other words no one way is etched in stone.

Most of the ways I saw suggested to mark paragraphs were plays on the above. There was also the use of a drop line, in which the first line of the new paragraph is indented up to the end of the last line of the previous paragraph.

Additionally there were mentions of how to treat specific paragraphs.

• versals such as elevated caps, drop caps, or outdented caps in first paragraph
• running indent (both left and right margins) usually reserved for quotes
• on a point indent as you’d find in bulleted lists
• outdented block on the whole first paragraph
• nested indents to show typographic hierarchy

Still the most mentioned and preferred way to indicate paragraphs was the use of an indent on the first line of all paragraphs other than the first or those that follow things like blockquotes and lists.

Ideally this indent should be related to the type size and/or leading or it could be based on some unit of the typographic grid. 1–2 ‘em’s was the most common recommendation

Timothy Samara cautioned that an indent works best with fully justified text. The amount of indent is subjective, but needs to be noticeable.

However he suggests that indents don’t work as well with ragged right text as the rag already varies the line length reducing the visual power of the indent.

What I came away with was there is no absolute rule to indicate a new paragraph though clearly print tradition advises the simple indent as the most common and perhaps most useful way.

Is the Web Different?

Most, if not all, of the books I looked through were focused on print. Does moving type to the web change things?

The common way to show paragraphs on the web is the line space boundary. Perhaps it has something to do with the cost issue, though more likely it’s due to the space being the default of all browsers.

In print the thought is that people read linearly and sequentially so it makes sense for one paragraph to flow smoothly from one line to the next, whereas online reading might not be so linear as people navigate through in-content and navigational links.

We’ve all heard for years that people on the web don’t read, but rather scan. I think the truth is more that people scan first to decide whether to read or not, but once they’ve decided to read they do read just like they do with printed text.

Does an extra space making scanning easier? I don’t know. In some ways I can see that they would. I also see Nathan’s point that they only force an unnecessry pause on the reader.

Having played with Nathan’s bookmarklet all week, the indents are growing on me. I’ve also come across pages where I don’t like how they look. I suspect that has to do with how well size, leading, and measure were used, but I haven’t checked on those details enough to say for certain.

What I will be doing is paying a lot more attention to paragraphs and experimenting. I have a feeling indents will grow on me the more I see them and any resistance I feel is more to do with being used to seeing line spaces than anything else.

Summary

I think it’s a good idea for all of us to take a deeper look at how we might style and indicate new paragraphs.

In print there’s a preference for using a 1–2 em indent with exceptions for first paragraph after headings and subheadings and those that follow things like blockquotes and lists when a line space boundary is already present.

While the web has generally not used indents and favored line space boundaries, there is movement to change this and bring us all back to indents. I can’t say I’m fully sold yet, but I don’t think it’ll take much more selling to get me there.

There are a variety of other ways that can be used to mark paragraphs and even suggestions that creating an entirely new way would make for a good exercise. The one certainty is there’s no absolute right way show the start of a paragraph. There are preferences and guidelines, but no absolute rules.

What do you use? Do you have a preference or feel there is a right and wrong way to mark new paragraphs? Have you given it much thought before now and will you give it more though after reading this post?