Archive | Uncategorized RSS feed for this section

7 Principles Of Clean And Optimized CSS Code

15 Jul

Some of you may remember the days when 30KB was the recommended maximum size of a web page, a value which included HTML, CSS, JavaScript, Flash, and images. I find with every new project with even the slightest bit of complexity, it’s not long before that 30 KB ideal is well out of my reach. With the popularity of CSS layouts and JavaScript-enriched web page experiences, it’s not uncommon, particularly for large sites, for the CSS files alone to jump well beyond that 30KB ceiling.

But there are some principles to consider during and after you write your CSS to help keep it tight and optimized. Optimization isn’t just minimizing file size — it’s also about being organized, clutter-free, and efficient. You’ll find that the more knowledge you have about optimal CSS practices, smaller file size will inevitably come as an direct result of their implementation. You may already be familiar with some of the principles mentioned below, but they are worth a review. Being familiar with this concepts will help you write optimized CSS code and make you a better all-around web designer.

1. Use Shorthand

If you’re not already writing in shorthand, you’re late to the party. But fortunately, this party never ends. Using shorthand properties is the single easiest practice you can do to cut down your code (and coding time). There’s no better time than the present to start this efficient coding practice, or to review it.

Margin, border, padding, background, font, list-style, and even outline are all properties that allow shorthand (and that’s not even an extensive list!).

CSS Shorthand means that instead of using different declarations for related properties…

  1. p { margin-top10px;  
  2.     margin-right20px;  
  3.     margin-bottom:  30px;  
  4.     margin-left40px; }  

… you may use shorthand properties to combine those values like so:

  1. p { margin10px 20px 30px 40px; }  

By specifying a different number of values, browsers would interpret the rules in a specified manner, illustrated in the diagram below.

Illustration of how shorthand declarations are interpreted depending on how many values are specified for a property
Illustration of how shorthand declarations are interpreted depending on how many values are specified for a property. This order also applies to padding and border-width among other properties.

Font is another helpful shorthand property that helps save some room and keystrokes.

Illustration of font shorthand examples
Examples of the font shorthand property. Note: leaving some values unspecified will mean that those properties will reset to thier initial values.

Those are just two examples of shorthand, but by no means should be considered a comprehensive guide. Even if you are familiar with the rules above, be sure to look at the articles mentioned below for more helpful reminders of those powerful properties that help keep your code succinct. Because of the number of lines and characters saved, going from a previous version of a CSS file which used no shorthand properties to one that makes full use of shorthand can have dramatic effect on file size.

See CSS Shorthand Guide (dustindiaz.com) and Efficient CSS with shorthand properties (456bereastreet.com) for more information about shorthand properties.

2. Axe the Hacks

Jon Hick's blog hicksdesign.co.uk/journal makes use of conditional comments
Jon Hick’s blog hicksdesign.co.uk/journal makes use of conditional comments

Hacks against dead browsers are safe, but hacks against the living aren’t. None of them. Ever.

Keep CSS Simple – Peter-Paul Koch (digitial-web.com)

If you’re like me, those words from Peter-Paul Koch’s nearly 5-year-old article may make you feel a little embarrased. After all, who hasn’t served hacks to Internet Explorer 6 and even Internet Explorer 7? As bad as we may want IE6 to lay six pixels under, the truth is it’s far from dead.

But now we know that using conditional comments to serve hacks correctional declarations for IE6 and IE7 is an accepted practice, even recommended by the Microsoft IE development team. Using conditional comments to serve IE-specific CSS rules has the added benefit of serving a cleaner, and therefore smaller, default CSS file to more standards-compliant browsers, while only those browsers that need the hackery daiquri (i.e. IE) will download the additional page weight.

Here’s how to use conditional comments to serve styles only to Internet Explorer 6:

  1. <!–[if IE 6]>  
  2.     <link rel=“stylesheet” type=“text/css” href=“ie6.css”>  
  3. <![endif]–>  

For IE7, you can use the above and substitute “6″ for “7″.

Alternatively, if there is hack-less way of getting the desired result using CSS, with all other things being equal, go for it! The less hacks you have to write, the simpler and lighter the code.

3. Use whitespace wisely

Whitespace, including spaces, tabs, and extra line breaks, is important for readability for CSS code. However, whitespace does add, however miniscule it may be, to page weight. Every space, line-break, and tab you can eliminate is like having one less character.

But this is one area where I would not encourage you to skimp just to get a smaller file. It’s still important that you write in a way that is readable to you (and hopefully to others), and if that includes using whitespace for formatting, so be it. After all, if you can’t read it, you’re going to have a hard time applying the other principles mentioned in this article. Just be aware of the fact that whitespace is like air – you might not be able to see it, but it does weigh something.

The figure below shows two different extremes in formatting style, with much whitespace, and the other with very little. I happen to favor the single-line formatting option without tabs, as I can scan the selectors a little easier, and I develop using the full width of my wide-screen monitor. But that’s just me. You may like your selectors to appear nested, and your declarations on each line.

Illustration of two extremes in CSS formatting, one with lots of whitespace, one with little whitespace
Illustration of two extremes in CSS formatting: lots of whitespace vs. very little whitespace

Using whitespace effectively is great, and a recommended practice for easy-to-manage code, but be aware that the less whitespace you have, the smaller the file. Even if you choose work with whitespace with your working file, you can choose to remove it for the production version of your CSS file, so your files stay skinny where it really counts.

4. Prune frameworks and resets

Nathan Smith's 960 Grid System uses a reset
Nathan Smith’s 960 Grid System CSS framework uses a reset rule.

If you’ve chosen to use a CSS framework (including ones you’ve written yourself), take the time to review the documentation as well as every line of the CSS file. You may find that the framework includes some rules that you don’t care to use for your current project, and they can be weeded out. Also, you may find that the framework includes a more elegant and concise way of achieving a presentational detail than what you normally use, and knowing about them can help prevent you duplicating rule sets unintentionally.

This goes for resets as well. YUI Grid CSS uses a reset, and Eric Meyer’s Reset is also very popular. Resets are great to use because they help to neutralize a browser’s default style. But if you know the nature of the site you are building, you may find some declarations that you know you’ll never need. <pre> and <code> will likely go unused on my Aunt Martha’s recipe blog. A design portfolio probably won’t ever use <sub>, <dfn>, <var>, etc. So ditch what you don’t need. It’s not only ok, it’s encouraged, even by Eric Meyer:

As I say on the reset page, those styles aren’t supposed to be left alone by anyone. They’re a starting point.

Crafting Ourselves – Eric Meyer (meyerweb.com)

Using a framework and/or a reset set of rules can help keep your work optimized, but they should not be accepted in their default state. Considering each declaration and cutting back on unneccessary ones can further help you keep your CSS files lean and readable.

5. Future-proof your CSS

Doug Bowman's stopdesign.com CSS reveals specially crafted selectors used for layout
Doug Bowman’s stopdesign.com CSS reveals specially crafted selectors used for layout.

Another way to optimize your code is to separate layout-specific declarations from the rest of your rules. I’ve heard options of separating typography and colors from layout-specific rules in the CSS file. I’ve never been fond of this practice, as I don’t care to repeat selectors just because I have different types of declarations to associate with them.

However, I’m warming up to the idea of separating layout styles from the rest of the styles, and giving layout it’s own file, or at least it’s own section. This is also advocated in Andy Clarke’s Transcending CSS. Within the book, Clarke reminds us of the following:

Full CSS layouts have always been a compromise. The current CSS specifications were never designed to create the visually rich and complex interface layouts that modern Web demands. The current methods — floats and positioning — were never intended as layout tools.

Transcending CSSAndy Clarke.

One way of interpreting this is that floats and positions to establish sidebars and columns are, well, layout hacks. And though we really don’t have an alternative, we hopefully will once a layout standard is agreed upon and browsers start supporting them. When that happens, it should be easy to swap out those hacked up box-model properties for ones intended for layout. Though it will be a while before new layout modules are here, using the right properties to handle layout instead of compensating for the quirks of our current limited set of properties will most certainly help condense page weight.

6. Document your work

David Shea's markup guide at mezzoblue.com
David Shea’s markup guide illustrates the proper usage for HTML tags and how those are represented on his site, mezzoblue.com. Even sites without dynamic HTML can have this simple and effective guide (using its own CSS file, of course!) as a starting point of documentation.

For a team of designers, it is extremely important to communicate regularly so that markup and style rules are created in a consistent way, and also to create site standards. For example, if someone comes up with way to markup a tab interface for the site, documentation will keep others from duplicating that effort, preventing code bloat in the HTML and CSS.

Documentation, including markup guides and style sheet guides, is not just for group efforts — they are just as important for a one-man design team. After all, a year after working on other things, revisiting one of your own projects can feel quite foreign. Your future self might appreciate reminder of how your CSS grid framework is supposed to work, or what pages already have a treatment for a secondary action form button, and it will save you or someone else from appending redundant and unnecessary rules to your CSS.

The choice to use documentation has a bonus side effect of being a great place to park explanations that otherwise must be included as CSS comments. CSS comments are great for sectioning off chunks of long CSS files, but verbose comments that are used to explain design choices can add to file size, and might be better suited to a markup and style guide. Documenting your code using CSS comments within your working file is most definitely better than nothing at all, but housing that material in separate documentation is a great way to keep the code focus and free from bloat.

7. Make use of compression

Some great applications have been created to compress and optimize CSS for you, allowing you to serve a human-unreadable but still browser-friendly files that are a fraction of the origional working copies. Applications like CSSTidy and the YUI Compressor can compress whitespace, detect and correct for CSS properties that are overwrite each other, and look for opportunites to use CSS shorthand that you may have missed. (These types of applications are excellent sources to read about, if for no other reason, to learn what things you can further do by hand).

Even popular text editors like BBEdit, TextMate, and TopStyle, can help format your CSS files to your liking. There are also options serve zip versions of your CSS files using PHP. You can find more CSS compressors and optimizers in the post List of CSS Tools.

It is important to note that these applications do their best to minimize errors, but they aren’t always perfect. Also, they work best when browser hacks are not included in the file set (which is yet another reason to keep those hacks external).

There is one last type of application that can help prune CSS file size I’d like to mention. It can crawl a web site and log which CSS rules and declarations are not being applied, then bring these to your attention. Unfortunately, this tool hasn’t been inventend yet, but I would gladly pay for such a application.

I can recall times when I’ve been afraid to delete certain rules because there is no documentation that explains to me that those selectors are leftover from previous iterations of development. If an app can bring those rules to my attention, that will help with maintenance and keeping CSS files lean.

Conclusion

Clean and optimized code is important not just for file size, but for maintenance and readability as well. The principles mentioned above are good considerations not just for CSS, but can be applied to HTML, JavaScript, and other programming languages. CSS files are not as prominent as the rendering of your web site to an end-user, but consideration of the above principles can help with both the user experience (in the form of smaller file sizes) and the developer experience (cleaner code). Apply these principles to your current and future projects, and and you will surely appreciate the efforts.

About the author

Tony White runs the one-man show Ask the CSS Guy, an after-hours blog devoted to peaking under the hood of CSS and JavaScript web-design techniques, as well as troubleshooting CSS-related problems. He resides in Memphis, Tennessee

Advertisements

Social Network Design: Examples and Best Practices

14 Jul

According to Nielsen Online, social networks and blogs are now the 4th most popular kinds of online activities. 67% of the world online population are now visiting them and the time they’re spending on them is growing by three times the overall growth rate of the internet. Social networks are now visited more often than personal email is read. Some social networks have grown to such enormous proportions that they rival entire countries in terms of population—if Facebook, for example, was a country, it would be the fifth-most-populated in the world (right between Indonesia and Brazil).

There’s a lot of variety out there in the realm of social network design. Some sites keep a very professional approach (like LinkedIn) while others have a more organic, free-form look (like MySpace). Most sites fall somewhere in between, mixing professionalism with personalization (like Facebook). But what’s the best way to design a social network? What are the elements that make a social network more user-friendly and more attractive to users? Read on to find out.

Also consider our previous articles:

1. Engage Quickly

Engagement is crucial for the success of any website. You need to make sure that visitors are immediately drawn into your site, either through great content, a compelling call to action, or some other means.

What’s It For?

Users need to know what your site is all about within seconds of reaching your home page. Most people don’t have time (or inclination) to try to figure out what a website is for if it’s not immediately apparent to them. A simple tag line, the use of graphics, your site’s title, or any number of other elements on your home page can serve to provide new visitors with some indication of what your site’s purpose is.

Screenshot-Social Network Site Purpose

Facebook does an excellent job of quickly informing new visitors of their purpose right on their home page.

Give Visitors Something To Do

Your home page should present visitors, both new and returning, with something to do. Logging in or signing up is the most obvious thing for visitors to do, but think about other options. Give them the opportunity to explore what the site is all about before they sign up. Let them search for people they already know on the site. Give them a chance to see why they should sign up before forcing them to. It builds a sense of trust between your site and its users right from the start.

Screenshot-Give Visitors Something To Do

Xing presents users with multiple actions right on their home page, including signing up, taking a tour, or exploring content.

Promote Interesting Content From Friends

Show your users what their friends are doing. From the moment someone logs in, they should be able to see what their friends have been doing, posting, and otherwise promoting. Most sites approach this with a news feed or similar listing of all the activities your friends are up to.

Screenshot-Friend Activity

Library Thing shows books recently added by friends.

Make It Easy To Find Friends

There’s nothing sadder than a social network account with few or no friends. Make it easy for your users to find friends, both new and old. Letting users search by email, school, company, name, and other identifying factors makes it more likely they’ll engage with a lot of other users, improving everyone’s user experience. The more friends a user has, the more active their profile and news feeds will be, meaning they’re more likely to come back often.

Screenshot-Invite Friends

Facebook’s “Invite Friends” page uses a format similar to sending an email.

2. Let Users Express Themselves

Self-expression is one of the hallmarks of social media. Some sites approach this by giving users almost full control over the way their profile page looks (MySpace). Others restrict the design options but let users add content to suit their own preferences (Facebook). The degree to which your social network allows users to cusotmize and personalize their profiles is up to you; just make sure there’s some functionality in that area.

Profile Pages Should Promote Personal Expression

Whether you allow full control over user profiles or only limited access to changing their appearances, users should at least have some ability to make their profile reflect their personality. This can be done through changing color schemes and backgrounds or adding content.

Screenshot-Profile Pages

DeviantART allows artists to customize their profiles by adding different kinds of content modules.

Promoting Individuality In Applications

Letting users show their individuality within applications is also a good idea in social networking design. You can do this by allowing users to comment on their activities within applications (as Facebook does) or in other ways. Some applications can be used directly to express a user’s personality. Applications like this include the various gifting, flair, and survey applications. One of the best examples of an application that lets users express who they are is the Living Social application (which is kind of a social network within itself), which allows users to create “top 5″ lists about almost anything.

3. Be Dynamic

Dynamic content is the lifeblood of Web 2.0 sites. Social networks are no different. Content should change constantly, with the newest, most popular, and most valuable information continually pushed to the forefront for users.

Have Regularly-Changing Content

Because of the nature of social networking sites, there’s new content constantly available from users. Take advantage of this by including content, both on the home page and on individual users’ profiles or main pages, comprised of these updates. Updated content keeps users coming back, as there’s more to see each time they visit.

Screenshot-Featured Content

Experience Project includes featured content on their home page.

Update Content in Real-Time

Utilizing a real-time news feed for your users is a huge convenience. At this point, very few sites are doing this. Facebook has the closest thing to a real-time news feed I’ve seen. It shows you when there are updates, but still requires a click to actually view them (and is often buggy when displaying them). The ideal would be an ajax or similar news feed that updated every minute or so without requiring any user input.

Screenshot-Real Time Updates

Living Social has a real-time news feed of activity happening across their network.

4. Allow Friends To Be Grouped

As friend numbers grow, the ability to group them becomes more important. When you only have thirty or forty friends, it’s often not a big deal to just lump them all together. But when your friend numbers grow to 100, 200, 500 or higher, being able to group them together almost becomes a necessity. After all, you might want to keep your work friends, college friends, casual acquaintances, close friends, and family all in separate groups, both to filter whose updates you see and how much others see of your updates and other information.

Let Users Define Groups

User-defined groups make the most sense when it comes to organizing friends. Some users may only want to organize their friends into a couple of different groups (such as business and personal or family and friends). Others might want to set up dozens of groups for their friends. In either case, make sure users can add their friends to more than one group at a time.

Create Automatic Groups

Automatically grouping friends makes sense, too. Grouping friends by which applications they’re using seems to be the most popular of this kind. Other options might include friends who are also members of the same groups or who share common friends.

Screenshot

The Brooklyn Art Project social network groups their members by the type of art they work with.

5. Use OpenSocial

OpenSocial, Google’s application platform for social networks, opens up a range of possibilities for your social networking site. The primary function of OpenSocial is to allow developers to create applications that can be used across a wide range of social networks. But OpenSocial has other benefits, too, like letting your users take their profile information across the range of sites using OpenSocial.

Provide More Applications To Users

Applications have become one of the most important and most-used features of social networks. Everything from productivity apps to games to gifting apps to apps for expressing yourself are available through OpenSocial. And developers are adding new applications on a daily basis. Because Google runs it, you also don’t need to worry about the program closing down anytime soon.

Screenshot-Open Social Applications

Ning is only one of a host of social networks that supports the OpenSocial API.

Let Users Take Their Profiles Anywhere

Allowing your users to take their profile information to other sites implementing OpenSocial is another big advantage. This, of course, means they can also bring their profile information over to your network, which can increase the number of new registrations you get.

Screenshot-Open Social

6. Make It Easy To Communicate

The entire point of a social network is to foster communication. If you make it difficult for users to converse with each other, your site most definitely will not last for very long. Make sure when you’re planning and developing your site that you keep communication at the forefront of every decision you make. If it does anything to hinder your users from talking to each other, drop it.

Provide Multiple Means Of Communication

Most social networks provide multiple means of communication for their users. The basics are private messages, public wall messages or comments, and live chat or instant messaging. While it’s best to include all three of these, at a bare minimum your site should provide some way to send public messages and a way to send private messages.

Screenshot-Private Messaging

Facebook’s private messaging system is only one way they foster communication among members.

Foster Conversations

Make it easy for users to have conversations with each other. Whether this is done through threaded messages, commenting, or some other method, you want your users to have effective conversations. Make it easy to pull additional people into the conversation, too, to make your site even more dynamic.

7. Show Only Relevant Information

Social networks are generally teeming with information. Between friend updates, users’ own activities, and notices from groups they’re associated with, there’s a constant stream of data coming at your users. Don’t compound the problem by sending them even more information that they dont’ necessarily need.

What Really Needs To Be Here?

When designing your user interface, ask yourself this question repeatedly. Is it really necessary for a certain bit of information or an option to be included on a given page? If the answer is no, then don’t include it there. Only give your users the minimum necessary information to perform the tasks you want them to perform. Just make sure if there’s additional information some users might want that you make it easy enough for them to find it.

Screenshot

Daily Challenge hides some information until users hover, which leaves their interface decluttered and clean-looking.

Don’t Overwhelm Your Users

The volume of information on a social network can quickly become overwhelming. Don’t contribute to this problem by then offering them a dozen different options for each action they might take on your site. Simplify the information and choices you give them to make their user experience better.

The same principal applies to the volume of information the site itself provides to users. If your site is constantly sending out updates and news announcements, it can quickly overwhelm users. Only send out notifications when absolutely necessary. Set up a blog or news page (with an RSS feed) for posting non-essential information. This way users can see what’s happening on their own terms.

Give Users The Ability To Filter

Allowing users to filter out information from some users or groups is another way to improve a user’s experience. Letting users filter out updates from certain users or applications makes it easier for them to see the information they want to see without getting overloaded.

Screenshot

Facebook allows users to filter their news feed based on content or user-defined groups.

8. Make It Easy To Take Action

Every social network has certain actions they want users to take. Whether it’s to join more groups, invite more friends, click on ads or sponsored links, or post more updates, there’s likely a laundry list of desired activities every site would like to have all of their users perform. The key to getting users to actually take these actions is to make it both easy and appealing to do so.

Emphasize The Desired Response

Make it obvious which response or action you want users to make. This can be as simple as using larger buttons for the preferred response and a small text link for the less desirable one, or using different colors or language for different options. In either case, make the desired response appear to be the more desirable one.

Screenshot

WriterFace makes it very obvious what actions they want users to take.

Make It Easy To Find Things

If you want users to perform certain actions, make it easy for them to find those actions. The most obvious example is in inviting new friends. Make it straightforward and easy for users to find the form to invite their friends who might not be members of your network. Organize available actions in a semantic manner so users can logically find the options they’re looking for.

Screenshot-Find Friends

9. Show Avatar Photos

Virtually every social network out there allows users to upload a profile photo. Display this image near any activity a user performs. This could be next to their updates in a news stream, in lists of friends, or in the general site directories.

People Like Seeing Other People

Social network users like to see other social network users. And seeing your friend’s picture next to a particular application or other element of the site makes it more likely you’ll click on whatever they’re promoting. It builds a sense of trust to see a face you recognize, even if you’ve never actually met that person in real life.

Screenshot

10. Include Ways For Members To Connect

When social networks first started, most people only friended other people they knew in real life. But as social networks have grown, they’ve become a way to meet new people. Empower your users to find each other based on common interests. Provide tools to let people who don’t know each other, and who possibly aren’t even friends on the network, to communicate and get to know each other.

Include User Groups

Many social networks now allow users to create and join groups based on common interests. Sometimes these groups are serious (such as professional groups) while other times they’re just for fun. What they all share in common, though, is that they allow users to find other users who are interested in the same things they are.

Screenshot
Eons showcases user groups right on their home page.

Provide A Member Directory

Member directories are another good way to allow your users to find each other. These are particularly useful for small, niche social networks, as they allow every member to see every other member. In a large social network they quickly become less valuable unless you also include ways for members to filter the directory (such as by age or location). In large social networks it’s also a good idea to let members opt out of being included in the directory (kind of like having an unlisted phone number).

Screenshot

Further Resources

Area for further articles and related resources.

About the author

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She also writes for a number of blogs, including her own, Cameron Chapman On Writing.

The Roadmap To Becoming A Professional Freelance Web Designer

11 Jul

Becoming a freelance web designer is a common dream among many designers, although it takes quite a bit of talent, business savvy, committment, and time. With all there is to consider when becoming self-employed, one can become overwhelmed — enough to deter themselves from trying at all.

Realizing many Smashing readers probably already have a head-start into the world of professional and freelance web design, this post is meant to act as not only a step-by-step guide, but also as a checklist for those who have already started their career. Hopefully this guide can cover all aspects of becoming a professional and freelance web designer, from business aspect and working with clients, to creating an effective portfolio and advertising one’s work.

Also consider our previous articles:

1. Do the Necessary Research

The absolute first step into any freelancing career is to do the needed research ahead of time. Freelancing is a huge life and career change, and one needs to look into exactly how it will change life before diving in.

Research the Costs

Making money on one’s own terms sounds incredibily appealing, until the realization comes that it’s a lot less money than working at a company (at first, at least). Below is just a short list of expenses to consider. Make sure they are covered when venturing into a freelancing lifestyle.

  • Domain name and hosting services
  • Stationery, Business Cards, and other marketing material
  • Needed software
  • A desk space and supplies
  • Subscriptions to stock photo sites and other forms of resources

On top of that, consider basic living expenses and additional emergency or living money. At this point, a formal budget is not needed, but it’s a very smart idea to go over the basic numbers of starting a freelancing business, and maintaining it. Most of the time, designers must save up before starting a freelancing career.

Screenshot

Taxes & Insurance

While most aspiring freelancers will slowly transition into the lifestyle, opposed to quitting their day job cold turkey, it is important to look into taxing information, insurance, and other assets that will be changed with self-employment. Because local laws and personal circumstances can vary so significantly, new designers should research this area on their own.

Research the Time

A more specific schedule can be setup later, but it’s a good idea to look into the time requirement for work each day, per week, and even per month to handle X amount of clients. For some, the time needed to be invested in this type of career path is not currently available.

Consider current social or family happenings, career responsibilities, and for some — even school. If it is not a good time in life to change focus, it may not be a good time to start freelancing full-time. Sometimes it is appropriate to put dreams on hold. With that being said, set a realistic date to begin a true freelancing lifestyle, whether that means just easing into it now, or setting a time in the future to go full-time.

If all consideration is put into place, the idea is well researched, then it can be time to start a freelance web design career! Below are the remaining steps to take.

2. Become a Brand

There are many differences between a young freelance web designer just trying to get by, and a successful freelance web designer with their business and future in mind. One of those differences is that successful freelance designers understand, and pay close attention, to branding.

Branding a business, even if only a one person operation, can do a lot of things in terms of the business’s sucess. A good brand builds credibility, client loyalty, delivers a target message to clients and other businesses, and even aids in marketing strategy.

What’s in a Name?

The name of a freelancing business can signify a lot, and most designers just choose to use their full name as the brand name. This is fine, but another option is to use a specialized brand name. Depending on the future plans of the business, it is smart to think closer about an official name.

If one plans on turning an individual freelancing business into a firm one day, a name other than the designer’s given name may be more appropriate. Also, a specialized brand name may be more memorable than the designer’s given name, and the posibilities are then endless as far as finding an SEO friendly name, or a name that gives off a portrayal of the business it represents.

On the other end of the spectrum, it’s easy to see the benefits of using a given name as a business name. Using a designer’s given name is always original, and something uniquely personal to the designer. Really, both can be successful decisions, but it is a decision that is often times taken too lightly. The way the brand is futher marketed depends largely on this decision. Below are successful examples of both instances.

Here are four great examples of using a specialized name for the brand:

Good Bytes Portfolio Ectomachine Portfolio

NOE Design Studio Base6 Design Studio

In contrast, here are four great examples of using the designer’s actual name as the brand.

Lee Munroe Freelance Designer Richard Davidson Freelance Designer

Juan Diego Velasco Freelance Designer Brian Burns Freelance Designer

All of the examples above are the portfolios of individual designers. However, one will notice that designers who chose a specialized name for their brand often call themselves a studio. This gives the impression that they are a bigger business; a more formal organization. The portfolios with given names, though, provide a more personal appeal — something many clients look for. This often gives them more of the true freelancer feel.

Depending on how a designer wants to operate their business, the clients they want to attract, and based on the future goals of the business, the final decision of the freelancing business name can have many possibilities.

Logo

After the official brand name is decided, it’s time to start creating a logo around it. Many beginner designers don’t understand the importance a logo has in a brand, or even how important a brand is in itself. Opposed to creating a quick logo in the process of designing a portfolio template, a logo should be made separately and with the utmost consideration.

Below is a small showcase of excellent logo design in a few web design portfolios.

Thomas Prior Freelance Web Designer Kuhboom Logo

Oh! Media No Sleep for Sheep

Because these designers, and so many more, took the extra time to create a well-branded and effective logo, they have the opportunity to expand the logo design to stationery, business cards, advertisements, and more. Not to mention, these logos serve the origial purpose of logo design — to create a brand, build business loyalty, and create an image that aids in recognition.

A designer will want to create a logo that represents their design style, and that will attract a client that is looking for that type of web design. To create a great logo, read up on logo design principles, tutorials, and logo design processes.

Below are just a few of these tutorials and walkthroughs.

An Elevator Pitch

There is a lot more to being a successful freelance web designer than just being good at web design. Any sort of freelancer has to be an entrepreneur as well. Rule #1 for entrepreneurship: create an elevator pitch.

For those that don’t know what an elevator pitch it, it is a premeditated, well thought-out introduction to one’s services or a person’s business as a whole. Let’s take a look at a better definition. Excuse the use of Wikipedia for a professional reference, but Wikipedia’s definition of an elevator pitch is just about perfect for the freelance web designer:

An elevator pitch (or elevator speech) is an overview of an idea for a product, service, or project. The name reflects the fact that an elevator pitch can be delivered in the time span of an elevator ride (for example, thirty seconds and 100-150 words).

A variety of other people, including entrepreneurs, project managers, salespeople, evangelists, policy-makers, job seekers (web designers and freelancers), and speed daters commonly use elevator pitches to get their point across quickly.Elevator pitch, Wikipedia

Take the time to create an elevator pitch for a freelancing business. For a freelance web designer, it can venture beyond the traditional use of a speech in an elevator, to the introduction to a portfolio, the about page, or as an introduction to an application for a freelancing position.

Many marketing gurus leave the assumption that the creation of an elevator speech for a business will increase the client list dramatically. Usually, this isn’t the case — at least not directly. What it will do though is still quite useful:

  • Save the designer countless hours in coming up with a smart introduction over and over again.
  • Create a professional atmosphere for a portfolio, or whereever it is used.
  • An elevator speech will make sure that any new introductions don’t leave out vital information about the services or freelancing business.

The following is an example of an excellent elevator pitch for a 45royale web design studio.

45royale is an enthusiastic web design studio located in the bustling metropolis of Canton, Georgia. We promote web standards and bring energy and commitment to our work every single day.45royale Inc.

The above is a strong example for a small, yet established business. Freelancing can use the same principle, but with a more personal approach:

Hi there, my name’s Brian Wilkins and I am a web designer/front-end developer living outside Boston, Massachusetts. I currently work at Reelpoint, an online design and marketing firm. I build clean and functional interfaces. With a hunger to constantly grow and evolve as a designer, I have a genuine passion for art, typography, design, technology and creative thinking.BrianWilkins.net

That detailed elevator pitch can be seen on his about page, telling potential clients exactly what he does. On the front page, as part of his portfolio design, he includes a much shorter, but equally effective pitch:

I’m a web designer that creates clean and modern content for the world wide web.

Taking the time to create an elevator pitch can help launch a freelance career through the use of business tactics. Below are some further resources for creating a great elevator pitch.

An Overall Style

The last thing to do is create an overall style for the freelancing business. Fortunately, most of this is accomplished by the above several factors. The overall style, colors, textures, and even how a designer presents one’s self should reflect the style of work a designer completes.

To promote consistency throughout the life of the freelancing business, though, designers need to look at branding in a more broad sense when first starting out. Creating a color scheme, design style, and other overall design guidelines based off of the logo design, and information presented in the elevator pitch. Then, stick to the brand as the freelancing business progresses.

3. Create a Portfolio Website

Step number three is an obvious one — create a portfolio website. However, it deserves a decent overview and closer look because we as designers are our own worst clients. Many new freelancers, or anyone just entering the web design world of business, will open Photoshop and start grinding away. Instead, think about what a portfolio can actually do.

A mediocre portfolio will have a great design, and show off a designer’s past works. However, an excellent portfolio will do the following things:

  • Reflect and grow a designer’s brand.
  • Show a client not only what a designer can do, but what the designer can do for them.
  • Show great talent, but also business savvy and professionalism.
  • Intrigue potential clients strongly enough so that they stay on the website long enough to make contact with the designer.
  • Provide a user-friendly interface for the client (who very well may not be so Internet or design savvy).

Keep all of this in mind during the design process of a web design portfolio. Make note that a designer’s portfolio has to be their best work. Furthermore, consider the following items when creating, or even modifying a design portfolio.

Consider a 1-Page Portfolio

It’s called direct response marketing, and it’s proven to be one of the most effective forms of marketing to get the most sales. It’s bascially a method that involves making a huge impact in the most direct way possible. In the world of web design, this means an incredibily effective and amazing portfolio — but in only one page.

MultiMichel.com

Of course, this isn’t a great method for everyone, especially those who offer more than just basic web design services. However, without a one-page design, a designer can still take use of this knowledge by applying more direct-response marketing to their portfolio. This may mean simplifying it, puting the contact form on the front page, and merging similar pages together.

Use a Contact Form

Provide a traditional email address and other information, but most importantly, include an email form. It makes things easier for the potential client to get ahold of th designer, even if only to ask for more information. This then provides further opportunity for the designer to sell their work.

Contact Form

The form above (Komodomedia) is a perfect example because it gives the visitor various options for the form, rather than just requesting a quote. This designer has made themselves approachable, which is an excellent way to gain more clients. Also, above the form, there are other ways to contact the designer, which may be suitable for different visitors.

Make the Most Important Things Noticeable

Make sure the most important components of a portfolio design are out in the open and easy to use and find. For most, this means the contact form and information, the portfolio pieces, and the logo.

Make the most important things noticeable.

A perfect example is Alexandru Cohaniuc’s portfolio. The biggest text on the page is “Portfolio”, “Hi, I’m Alex”, and “Contact.” Right above the word “Portfolio” is the logo, strategically placed in the top left.

4. Build Legal Documents

To make things really official, a designer has to create some legal documents. These can be reused for each client, but must be made initially to deal with potential problems later.

Contract

A contract is a necessity for a freelancer of any sort. It will help protect the designer and the client, as well as outline some rules and guidelines. For more information on how to create a freelance contract, check out the resources below.

In addition, one can hire a technical writer or other writing professional to do the job.

Terms & Conditions

Terms and conditions are a more in-depth view of the rules between the web deigner and the client. Again, one can hire someone to write a terms and agreement paper for them, otherwise here is a great template: Terms and Conditions Template.

Copyright Agreement

A third needed agreement is a separate copyright agreement. Designers are always at risk for work being stolen and miscredited. A copyright agreement is a way to protect that work, and a way to set further rules for who can use the work.

Because copyright law can vary among different countries, we won’t get much into it here. It is important, though, to research copyright law, know one’s own rights, and apply it to one’s own circumstances.

5. Find a Starting Wage & Budget

Deciding on a personal starting wage is difficult, because we never truly know how much to pay ourselves. As anyone can guess, someone just starting out in freelancing won’t be making much. A new designer just has to make sure they have basic living expenses paid, and a bit of cusion room for emergency costs or budget mishaps.

Pros and Cons of Fixed-Priced Projects

A fixed-priced project is one where the designer and client agree on an overall cost for a design project ahead of time, and the payment is completely independent of how long it takes the designer to complete. Below are some pros and cons of using this method.

Pros:

  • These types of project can be easier to apply to a monthly budget.
  • Designer’s with efficient methods to save time during a project won’t be unfairly punished with a low cost.
  • It is easy to see how many projects per month need to be completed to determine profits and budget handling.

Cons:

  • It is much more difficult to determine a fixed-price for a project before actually completing it.
  • Sometimes designers are underpaid using this method.
  • Payment doesn’t come at regular intervals, which may not be suitable for all lifestyles.

Pros and Cons of Hourly Wage Work

While hourly work may be what we’re all used to, there can be some equal pros and cons to consider when thinking about this payment system as a freelancer.

Pros:

  • Budgeting is easier for those that require a daily or weekly budget.
  • It is harder to become under or over paid for a project.
  • It is much easier to explain to the client the final cost of a project.

Cons:

  • It is hard to determine our own hourly rate based on the judgement of our own skills.
  • It is more difficult to work with a monthly budget.
  • Timesheets need to be filled out and there needs to be an effective way to transfer timesheets back and forth between the designer and client.

A closer look into these two types of payment plans can help a beginner decide. For further reading, look over Effective Strategy To Estimate Time For Your Design Projects.

Tools for Managing Money as a Freelancer

LessAccounting.com
Less Accounting is an all-in-one money managment application that will let one connect to bank accounts, and even let a freelancer invite a personal accountant login to help watch money. In addition, LessAccounting also features all the other basic money management needs for freelancers.

LessAccounting.com

Mint.com
Mint may not be made for freelancers specifically, but it is one of the best tools out there for taking control of one’s own money. This is perfect for new business owners that may be low on money, and need to pay extra attention to their cash flow.

Mint.com

Tickspot.com
Tick is a time management tool aimed at organizing time so that freelancers can hit their budgets. It’s a great tool that breaks up time so a freelancer can enter hours worked, hourly pay rate, project pay rate, and more.

Tickspot.com

SlimTimer.com
Slimtimer is similar to tick, in that it is a time and budget management tool. One can create tasks, time their own work, run reports, and manage their money overall more efficiently.

SlimTimer.com

Invoicing Tools

SimplyBill.com
SimplyBill is a very simple invoicing tool to help effectively keep track of clients, their invoices, and to send invoices out.

SimplyBill.com

FreshBooks.com
Freshbooks is a great invoicing tool for freelancers with a lot of versatility to meet anyone’s needs. Best of all, it’s free up to three clients, so this gives designers plenty of time to decide if FreshBooks is right for them.

FreshBooks.com

Intuit
By the creators of QuickBooks, Intuit is a free alternative invoicing system that is perfect for designers just starting out that need to save that extra bit of cash.

Intuit

FreeAgentCentral.com
FreeAgent allows a freelancer to manage all their invoices, and will even tell the freelancer what they owe the tax man.

Free Agent

6. Create a Résume

Without a strong portfolio just yet, new freelance web designers need to rely on a strong résume. This is a designer’s true chance to flaunt their skills in full detail. Most of us learned how to create a résume back in high school, and another good portion of us probably still hold on to our most recent one today. When venturing into a new freelance web design career, though, it’s time to tweak it to meet the needs of this new career path.

Below are some resources for creating the perfect résume for web designers and freelancers.

For a newly created web design freelance portfolio, providing a download link to a designer’s full résume may be just what the client is looking for.

7. Find “Portfolio Building” Clients

Now that just about everything is set up, it’s time to take action. Finding the first few clients is always tough, because nobody wants to hire a nobody. It may be near impossible to find good, well-paying clients yet, so sit tight and take on the first few “portfolio building” clients.

Consider Offering Free Services

Even qualified people have to work for free sometimes.
Image source: On the Block

Working for free is never fun, but it may be necessary. Do some volunteer work for a church or another non-profit/low budget organization. These services obviously aren’t hard to sell; just put an ad up for yourself up on Craigslist or in freelance and web design forums.

When creating an ad to offer free services, be sure to avoid failure. This means setting limits — no designer wants to spend a month on a complicated job making no money. Offer only PSD templates, 1-page websites, or something of the like.

Of course, this isn’t an option for everybody because we all don’t have the time, nor the patience to do a free job. If that is the case, explore some options below to get paying clients that will gladly deal with a new designer.

Advertise Locally

Advertise Locally

Put up fliers or an ad in the local newspaper to gain some local recognition. Not every potential client knows where to look online for web design services, and it may very well be that many are looking locally. Otherwise, they’re only finding top Google-ranked web design businesses that they can’t afford.

If a new designer comes to them offering cheaper services, whether in the form of a newspaper ad, a flier at a grocery store, or through word-of-mouth via friends and family, they’ll be very happy to hire.

Offer Freebies or Sell Templates

One more option requires no actual clients at all. Many designers choose to make free templates in their spare time, and use them to advertise their services, show off what they can do, and in some instances, sell them for some residual income.

Over at ThemeForest, Collis has sold a PSD template at $10 — 168 times. This means over a thousand dollars in his pocket, and a great portfolio piece to show off.

Manilla PSD Template

Unless one makes spewing out free or cheap templates, WordPress Themes, or scripts their full-time business, this isn’t going to be a great option for making monthly living expenses. It is however, a great alternative to 1) get a designer to create some portfolio pieces, 2) get the designer’s name out in the community, and 3) let the designer make a bit of extra cash.

However, it is important to try a few real clients as well, for the business experience.

Then what?

After finding a few clients, keep these few things in mind.

  • Create a personal (yet professional) connection between the first few clients. This may welcome great testimonials and word-of-mouth clients.
  • Offer variety in your services when starting out. For example, one may want to try logo design, web design, and basic coding. Later on, when trying to add a new service to the freelancing business, this will make for a much easier transition.
  • Just because new designers have to deal with low (or no) wages, doesn’t mean they should offer low-quality work. Put in the hours and create something great. Keep in mind that there is more to the first few projects than just the money.

Tools for Client Management

BaseCamp
BaseCamp is a very popular project managment tool for freelancers. With BaseCamp, a freelancer can share files, set deadlines, assign tasks, organize feedback, and more.

BaseCamp

Zoho Writer
Essentially, Zoho Writer is an online word processer. In addition to being that though, it is aimed at freelancers, with the ability to share documents and collaborate with clients in various ways.

ZohoWriter

Big Contacts
Big contacts is an online contacts solution to help share files, email, have meetings, send notes, and more between the freelancer and client.

Business Contacts

8. Create (and Stick to) a Schedule

A huge part of freelancing is finding a schedule that fits the designer’s needs, and allows the designer to get the necssary work done on time. It is a step in itself to becoming a professional freelance web designer.

Find the Hours Necessary

To find a schedule, a designer needs to find how much time it actually takes them to do the tasks at hand. A freelancer has to ask themselves, “How much time does it take to create a simple PSD template, and then how long does it take to code it?” Depending on the skill sets of individual designers, this length of time can greatly change. However, work from previous clients or the creation of sample templates can give a rough estimate.

After determing how long the workflow takes, decide on a daily hourly input for work — and work only.

A Daily Schedule

A general daily schedule depends greatly on each designer’s personal lifestyle, and is something that needs to be predetermined in order to be successful. After a designer realizes how much time it takes daily to get the required amount of work done, he or she should create a daily schedule for themsleves.

A daily schedule will help aid the designer to stay on track, instead of constantly checking email, jumping back and forth between projects, or ignoring client work altogether.

Google Calendar

A Weekly & Monthly Schedule

On top of a daily schedule, freelance professionals should also make a weekly and monthly calendar. A broader calendar can be used to keep track of deadlines and plan out longer projects.

Google Calendar

Whether it be a calendar hanging on the wall or a web-based calendar like below, make sure to keep track of deadlines, payment schedules, and other checkmarks along the way of a project.

Find the Motivation

Anyone can see the benefits of a steady schedule, but the hardest part for most may be staying motivated to keep to it. Below are some things to keep in mind if the urge to break a preset schedule creeps up.

  • Do the same specific thing during work at the same time every day. For example, check email first thing in the morning, then start directly on client work.
  • For those who have already quit their day jobs to pursue this career: Wake up at the same time everyday. If it means sleeping in a few extra hours than the traditional worker, that’s fine. However, having a constantly altering start to the day can mess up a schedule, even if things are done in the same order during wake time.
  • Write a to-do list in the morning of items that need to be addressed that day.
  • Use a calendar and daily planner to keep track of daily, weekly, and monthly tasks.

A Few Time Management Tools

Dejal Timeout
Quite the opposite of most time managment software, this application actually tells you when to stop working. With timed breaks, this tool can help a freelancer have an overall more relaxing career.

Dejal Timeout

Google Calendar
Google Calendar is a great option for those that use Google’s other tools a lot, in that it will be all in the same place. Like many of Google’s other tools, it is free, versatile, and very useful.

Google Calendar

Ta-da List
Ta-da List is an easy to-do list tool hosted online for convenience. It is easy to create lists for one’s own use, or for others.

Ta-da List

9. Create a Business Plan

One of the most boring and tedious tasks one can do is create a business plan. Most might feel free to skip this step, but wait a moment and consider the benefits (and assurances) of taking the time to create one.

Benefits of a Professional Business Plan:

  • Creates a real business in the designer’s eyes, and in the client’s eye.
  • A business plan can be used in tricky legal situations, to differ the business from just a hobby.
  • Identifies future plans, direction, and goals for the business.
  • Keeps the designer, as a business owner, on track with the development of the business.
  • Upgrades the simple monthly budget to a long-term financial structure.

Anyone can see the benefits range from business growth, to financial growth, and credibility. To learn more about creating a business plan, view the helpful article on About.com, Back to Business Planning: Developing a 4-Part Business Plan for Freelance Designers.

10. Know How to Gain Recognition

Not all designers are marketing experts, but a bit of knowledge about how to gain recognition in the freelance web design world is necessary to be successful. Designers should do research on marketing, and create a long-term plan for the growth of their portfolio and their reputation as a freelance designer.

Expand with Social Networking Sites

Use social networking sites to not only promote a portfolio, but also to promote new designs and projects. In addition, one can use Twitter, or something similar to get valuable feedback on current projects. For more ideas on how to get the most out of Twitter as a web designer, take a look at Ramsay’s post: 5 Simple Ways Twitter Can Make You a Better Web Designer.

Also, those who are active within social media communities benefit far more than those who use them for only self-promotion. Create a community, find other designers, and even discover some interesting finds along the way. Take the time to enjoy social media websites, while gaining recognition as a web designer.

Get Recognized in a Crowd of Applicants

Knowing where to look for more work is necessary when depending on that work for a decent income. However, with thousands of freelancers floating around in forums, job boards, and other sources of possible clients, getting noticed can be some hard work — especially when others (who may be doing it for just a hobby) are willing to offer their services extremely cheap.

Talk Freelance Forum

To get noticed by clients and win a job, follow a few of these simple rules.

  • Don’t apply to jobs that are more than a few days old — chances are they’ve been filled, and it’s really a waste of time.
  • Use multiple job board websites and forums to have a wider range of possibilites.
  • Be a good designer. This sounds like a dumb tip, but often times clients get application for web designers that either 1) aren’t good at design or 2) have designs that show no unique abililty and are very ordinary.
  • Don’t apply for jobs that you don’t qualify. Client’s can’t stand hearing, “I haven’t done a design for the style you’re looking for, but I’ve been creating websites for X years and could probably do it.” The next designer that comes to them with a decent portfolio proving they can meet the client’s needs is going to get the job instead.
  • This shouldn’t even have to be said, but sadly, it does: Capitalize your sentences, use correct grammar, and don’t make spelling mistakes when applying for a freelance job.

As for the best tip of all — don’t sell work cheaper than it needs to be just to gain a client. If a client can’t see why a logo design costs $200 when the kid that applied the day before is offering the same service for $20, then it’s really their own loss. Somtimes it’s worth losing jobs, and that’s a part of the difficulty when just starting out.

11. Blog often, but pay attention to the quality of your posts

Blogs are great for improving search engine rank and gaining popularity in the web design community. Whether designers have a lot of time or barely enough, a blog showcasing interesting finds or discussing anything related to the web design or the freelancing profession can gain an audience fast.

Below are just a few websites that use blogs to promote their general careers as freelance web designers.

WellMedicated.com

WellMedicated.com really doesn’t update that often — only about once every two months — but it’s still a well respected design blog in the community. Andrew Lindstrom is a freelance web designer, and spends most of his focus on that. However, with a great following on his blog, he can easily gain traffic to his web design portfolio through his sidebar and about page.

VandelayDesign.com/Blog

In a recent interview of Steven Snell of Vandelay Design, Steven discussed how the popular Vandelay Design Blog was indeed intended to bring more traffic and clients to the Vandelay Design portfolio. Well, that mission was very successful, and the blog changed direction to fulfill the wants of a different audience, as a full-time design blog.

Now, it is updated every few days and it’s goal is no longer to bring portfolio traffic. However, with a link to the portfolio and further information about the web design business, there is no doubt it still does.

Blog.SpoonGraphics.co.uk

Chris Spooner’s blogging experience started with just some simple experimentation, and as a place for him to simply explore and share. However, the blog soon gained a lot of popularity, and now does great work in promoting his portfolio as well.

So the lesson to be learned is, no matter what reason a designer has to start a blog, it can be a great source for traffic and a way to gain recognition in the community. Not to mention, the additional income from selling advertising spaces.

12. Get into the Community of Freelance Web Designers

Don’t be a freelancing loner. Getting involved in the community and meet other web designers and freelancing professionals to grow as a designer.

Make contacts within the community by blogging, joining a design network like Envato, and using forums. One could also donate freebies to larger communities, or try to do guest posts.

Below are just a few ways gaining a strong social network in the community can help a freelance web designer.

  • It creates a support group. Guessing that many freelance web designers don’t have many offline friends or family that do the same thing for a living, having an online support group for your field of interest can be very beneficial. Get into the web design community to share, rant, rave, and get feedback as a designer.
  • Learn new things. Following a blog regularly, being active in social networking sites, and participating in forums is a great way to improve your current abilities, and expand horizons. Instead of grinding away at what needs to get done or what needs to be learned for a current project, being a part of a community will help you to explore new things and find inspiration.
  • Become an authority and let the clients come. Being the best designer in the world doesn’t make that designer an authority figure. As skills and wisdom improve, others in the web design community will reference a designer’s work, portfoio, and services for them.

Attend Conferences and Other Face-to-Face Events

Attending various web design and other conferences for webmasters is not only a great way to network with other designers, but also a great way to learn new things and keep up with the latest trends. Get to some conferences, and become a real person, rather than just an online presence.

Below are just a few popular conferences within the community.

AnEventApart.com
An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.

AnEventApart.com

Carsonified
For Web Designers, Creatives and anyone who cares about web design.

Carsonified

Web Design World
Since 1997, we’ve helped thousands of Web designers learn what they need to know to make better web sites, manage web projects, and get home at a decent hour.

Web Design World

As a freelancer, we have the ultimate schedule for attending these events, and it can be easier than for others to gather the funds. In order to truly succeed, freelance web designers should attend these events to socialize, learn, and grow their freelancing web design career.

13. Reinvest the Income

It takes money to make money, so when starting out, reinvest some of the income made back into the freelancing business. It’s tempting to pay off bills or buy something nice once it can be afforded, but dedicate a certain percentage to the business’s growth.

Among the many things that need to be maintained for a freelancing business are software upgrades, hosting and domain renewals, desk space upgrades, stationery, and more. In addition to maintinence items, though, some of the income may be turned into a luxury web design item — for fun and for work.

Figure how much of the income is actually needed for living expenses, and use either all of the remaining profit, or a strong percentage of the profit to go back into the business.

14. Get a Professional Space

Finding a place to do work may help new freelancers differ play time from work time. On another note, a good workspace is needed to keep organized and create an effective workflow. Below are two great workspaces that are effective and fun, both held as a home office.

Ben Mautner's Workspace

The workspace of Ben Mautner provides a lot of worspace to get things done, with plenty of inspiration handing on the walls as well.

bittbox's Workspace

Jay Hilgert’s office space is is clean, neat, and trendy — but also has all the necessary equipment.

Beyond a home office’s benefit of staying organized and aiding in getting some work done, it can make anyone finally feel like a true professional freelance web designer. You may want to take a look at the workstations of other designers as well.

15. Keep Learning New Tricks

As the final stage of the transformation comes into completion, there is only one more thing that needs to be done to create and maintain the status of a professional, freelance web design career. That final step is to keep learning. Designers should always be discovering new practices, techniques, standards for client work — and also tweaking their own business along the way.

Conclusion

Hopefully, this walkthrough can help most web designers just starting out in freelancing go down the correct path. Freelancing in the web design niche is an exciting and freedom-filled career path, although it requires a mix between design, development, and entrepreneurship. Finding a good grasp of all three can only mean success as a freelance web designer.

Because everyone’s experiences are different, for anyone who has already accomplished a freelancing career, feel free to share further tips and advice for doing so. It’s always great to hear and discuss more tips.

Further Resources

You may also be interested in these extra references:

About the author

Kayla Knight is a 20 yr. old college student, part-time web developer, freelancer, and blogger. In her spare time she maintains Webitect.net, a resource blog for webmasters. You can get ahold of her through her blog or follow her on twitter: @Webitect.

Insert Google Ads with Dreamweaver

24 Jan

Dreamweaver CS3 makes it easy to create beautiful webpages without ever having to look at the code behind your designs. But even though you don’t have to learn HTML, every once in a while knowing how to work with the code can come in handy. In this tutorial, you’ll find instructions for using Dreamweaver’s code-editing features to insert Google ads and other features.

1. Adding Google Ads

We’ll use Google AdSense as the main example in this tutorial but the process is similar for nearly all sites that offer features you can include on your pages. You generally begin by creating an account. In the case of Google AdSense, once you’re approved (most websites are), you simply log in to create the code needed to display Google ads for your pages. Once you’ve added the code, Google delivers ads to your site based on the content on your pages. If your visitors click on those ads, Google pays you a small fee.

Insert Google Ads with Dreamweaver image 1

2. Choose Ad size, colors, etc.

As you go through the Google AdSense setup process, you can select from a variety of advertising options, including the size and colors you want for your ads. You can also create Channels to better organize and track ads on different parts of your site.

Insert Google Ads with Dreamweaver image 2

3. Generate Google Adsense code

Once you’ve completed the ad setup process and specified all of the options for your ads, Google generates a unit of code in JavaScript that you can add to your webpages. You’ll need to copy all of this code, from the opening tag to the closing tag, so that you can paste the code in its entirety into the pages on your site.

Insert Google Ads with Dreamweaver image 3

4. Use code view in Dreamveawer

Now, open the page where you want to insert your ad code. Click either the Split view or Code view buttons (located in the upper-left corner of the workspace) to display the code behind the page. The advantage of using Split view (shown here) is that you can see Design and Code views at the same time.

Tip: Highlight any element in Design view, such as the headline, “Saving and Editing Family Photos,” on this page, and Dreamweaver automatically highlights the corresponding code so that you can find your place more easily.

Insert Google Ads with Dreamweaver image 4

5. Insert Google Adsense code

Find the exact place on your webpage where you want to insert the Google ads and click to place the cursor in that spot in the code. Note: If you paste the JavaScript into Design view, it won’t work. Choose Edit>Paste to insert the code from the website into your code. Again, make sure that you have all of the code including the opening and closing tags. If you ever want to move or remove this code, you’ll need to select all of this code.

Insert Google Ads with Dreamweaver image 5

6. Viewing Google Ads

One of the most confusing aspects of working with Google AdSense in Dreamweaver is that although you can see the code in Code view after you paste it into your page, you won’t see the ads in Design view. The only indicator that you’ve successfully added your Google ads will be a little blank space added to your design.

Insert Google Ads with Dreamweaver image 6

7. Previewing Ads in a browser

To view your ads in your pages, you’ll need to preview the page in a Web browser: Click the Preview button at the top of the workspace or choose File>Preview in Browser. As long as you’re connected to the Internet, the Google ads should automatically appear wherever you added the code to your page. Note: Google ads can take up to 10 minutes to become activated before they’ll display.

Insert Google Ads with Dreamweaver image 7

8. Adding more Ads

You can add the same AdSense code to as many pages in your site as you want. You can create a variety of ads to include in different places in your site by repeating the Google AdSense setup process and choosing different options before generating a new snippet of code. Tip: When you open Dreamweaver to add your code, leave your Web browser open so that you can easily return to Google to make changes or copy the code again, if necessary. You can switch between two programs on your computer by pressing Command-Tab (PC: Alt-Tab).

Insert Google Ads with Dreamweaver image 8

9. Working with code in templates

If you use Dreamweaver’s Dynamic Web Templates (a great way to save time and create more consistent designs), you can add Google AdSense code to a template and automatically insert ads into all of the pages created from the template at once. To do so, open the template file, choose Split or Code view, and paste the code into the template file just as you would into any other HTML page. When you save the template, choose the Update option to automatically insert the ads into all corresponding pages.

Insert Google Ads with Dreamweaver image 9

10. Working with Flickr and other sites

Although the first nine steps in this tutorial are specific to Google AdSense, the process of inserting code into a page in Dreamweaver works the same whether you’re using AdSense or any of the myriad other online advertising options, such as http://www.CommissionJunction.com and http://www.Linkshare.com. You can also use this process to add widgets or images from sites such as http://www.Flickr.com.

Insert Google Ads with Dreamweaver image 10

11. Adding invisible Features

Some of the code you may want to add from sites like Google won’t appear in your webpages in a browser, making it a little trickier to add. For instance, you can use Google Analytics to track your Web traffic (with better detail than you’ll get from most Web hosts). Just insert code in a way that’s similar to the way you do it with AdSense but because the code won’t be visible on the page, save it somewhere that makes it easy to find, such as just above the body tag at the bottom of your pages.

Insert Google Ads with Dreamweaver image 11

12. Changing code dispaly options

If you spend a lot of time working in Code or Split view, you may want to take a minute to adjust the code preferences in Dreamweaver. Choose Dreamweaver>Preferences (PC: Edit>Preferences) and then specify your preferred options in these Categories: Code Coloring, Code Format, and Code Hints. Also note that the Code Rewriting category provides options for how (or if) Dreamweaver will alter any code to your pages.

Insert Google Ads with Dreamweaver image 12

13. Upload your pages

Although you should be able to test most third-party code, such as Google AdSense, by previewing your pages on your local computer, remember that your new features won’t become visible on your website until you’ve uploaded the pages to your Web server.

Insert Google Ads with Dreamweaver image 13

How to Create a Good Website?

24 Jan

Designing web-sites involves numerous skilled disciplines from type to layout & color. Color is particularly prominent as it provides the first impression to the user. The correct colors can create a good user experience, while incorrect colors can have a bad impact.

To create a good website, the website designer needs to know what affect colors can have on people. People subconsciously react to colors & associate them with different emotions and feelings. Colors don’t just stir up emotions & feelings that might influence how a site is seen but they can also be cleverly used to direct users to specific sections of your site.

Every single color that you can think of can be used on the internet these days, which means that picking the right colors can be a mammoth task. Here is a swift summary of how some colors can provoke certain reactions.

Green is linked with nature, peace and jealousy. It is also a truly relaxing color and is perfect to use for a relaxing effect. The color white stirs up feelings of purity, simplicity, emptiness and innocence. If used as the main color of a site, it creates a clean and simple feel.

Blue is most commonly associated with business sites as it’s a strong color that’s associated with confidence, coldness, depression, water and peace. The color blue is linked with confidence, loyalty and coolness. It’s the best-known color in the world and it’s used by many companies to create a feeling of strength & confidence.

Black is linked to feelings of mystery and refinement. For more detail go to: http://www.instant-video-streamer.com. An extremely popular color in design and photo web sites, it can be used effectively to contrast and liven up other colors. Green is linked to organic, nature and relaxation. The paler end of the green spectrum can be used to give a site a relaxed feel.

Grey can be associated with respect, humility, decay and boredom. It’s used a lot to form shiny gradients in website design to give a professional, ordinary feel to a site. Orange is strongly associated with spirituality and healing. It’s the color that symbolizes Buddhism and it has a calming energy about it. It’s a bold color that is not as lively as yellow but not as deep as red.

Darker shades of purple can be very deep and luscious. It is linked to royalty, spirituality, arrogance and luxury. Lighter shades can represent romance and delicacy. It’s a color that’s not really used much on sites. Full of energy, vibrancy and stimulation, orange is a fantastic color to use in designing web-sites. It is used to bring youthfulness to a design.

Color’s role is not just to make a website look good; it can encourage feelings & emotions from the audience. Choosing colors that annoy the end user can have damaging effects on your website, while cleverly selecting can mean that the website meets user expectation.

May 12th/ Top reasons your CSS columns are messed up

10 Dec


I believe the recent surge in popularity of CSS frameworks comes from a lack of basic understanding of the CSS box model and how it’s implemented across browsers. I wanted to share with you some quick tips on how to avoid easy pitfalls so you can create your own CSS framework in no time flat, without all the cruft of having ten thousand column combinations available. Keeping these quick tips in mind at all times will allow you to do something I like to call defensive coding — and really that’s all CSS frameworks are: defensively coded snippets of CSS.

Your margins are doubled in IE6

Here’s a super common pitfall: IE6 will double margins facing the direction of the float. Example problematic code:

.sidebar{
  float:left;
  margin-left:20px;
}

This sidebar will have a 40px left margin in IE6 — almost certainly throwing the sidebar down below the content, and not next to the content as it should be. Easy fix: add display:inline; No side effects in any browser, and IE6 obeys margins perfectly.

.sidebar{
  float:left;
  margin-left:20px;
  display:inline
}

Why it works: By declaring float on an element, you implicitly demand that it must be rendered as a block element — thus rendering the display:inline inert. However, due to IE6’s awesome CSS engine, it fixes a bizarre bug that is the #2 reason I see CSS columns fail in IE6.

Your content is wider than your column

Let’s pretend you’ve got this simplistic setup of code:

.columns{
  width:500px;
}
.columns .main{
  float:left;
  width:400px;
}
.columns .sidebar{
  float:right;
  width:100px;
}

HTML:

<html>
...
<div class="columns">
  <div class="main">
    <img src="/images/awesome.gif" />
  </div><!-- /.main -->
  <div class="sidebar">
    <p>Sidebar rules!</p>
  </div><!-- /.sidbear -->
</div><!-- /.columns -->
...
</html>

Harmless right? You might view this in Firefox and everything will be fine. But then you look at it in IE6 and your sidebar has mysteriously dissapeared below .main. WTF? You look at the HTML, the CSS, and everything’s fine. What could possibly be wrong? A common problem here is if awesome.gif is 510px wide. What this does is push out .main to 510px, and suddenly there’s not enough room for .sidebar inside .columns any longer. Ack!

Easy fix: add overflow:hidden to your columns. This forces the width restriction to crop any extruding content. New magical CSS:

.columns{
  width:500px;
}
.columns .main{
  float:left;
  width:400px;
  overflow:hidden;
}
.columns .sidebar{
  float:right
  width:100px;
  overflow:hidden;
}

Your margins extend past your container

So you’re building out a simple product listing template out, and you throw it in an unordered list:

ul.listing{
  margin:0;
  width:400px;
}
ul.listing li{
  list-style-type:none;
  float:left;
  margin:0 20px 0 0;
  width:85px;
}

HTML:

<html>
...
<ul class="listing">
  <li>Product #1</li>
  <li>Product #2</li>
  <li>Product #3</li>
  <li>Product #4</li>
</ul>
...
</html>

This CSS will work just fine in something like Firefox, but for mysterious reasons you’ll see that Product #4 appears on it’s own line in IE6. What’s happening here? I mean 4 columns x 85px + 3 gaps x 20px = 400px, right? Except that your 4th gap is hanging over the right edge — pushing the true width of the blocks to 420px. Firefox is smart and lets that margin just hang out there — but IE6 will apply that margin within the parent wrapper — throwing the 4th item down since it takes up 20px more than it should have.

The fix? Apply a left margin to each item, with a negative margin to the wrapper. This means that every item has a visible margin, but the whole block of elements are yanked back by the negative margin:

ul.listing{
  margin:0 0 0 -20px;
  width:420px;
}
ul.listing li{
  list-style-type:none;
  float:left;
  margin:0 0 0 20px;
  width:85px;
}

This gets around the nasty solution of adding a class to the first or last item in every row — something I’ve seen with abundance around the web.

Building a CSS framework in no time

Wev’e got to start out with some basic HTML. Here’s what I’ve been using lately:

<html>
...
<div class="columns col2">
  <div class="column first">
    ...
  </div><!-- /.first -->
  <div class="column last">
    ...
  </div><!-- /.last -->
</div><!-- /.columns -->
...
</html>

For different column widths, I’ve been changing out the col2 declaration to things like col2A, col2B, col2C and so on. You could easily give them more semantic names like products-columns too.

Self clearing is the future

The first step for any column framework is self-clearing. It’s easy, practical, and reduces all those damn clearing divs.

.columns:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
* html .columns {height: 1%;}
.columns{ display:inline-block; }
.columns{ display:block; }

Float those columns

Next step is to actually float those columns. So let’s add a couple more declarations:

.columns .column{
  float:left;
  overflow:hidden;
  display:inline;
}
.columns .last{ float:right; }

.col2 .first{ width:500px; }
.col2 .last{ width:100px; }

.col2A .first{ width:400px; }
.col2B .last{ width:200px; }

.col3 .first{ width:100px; }
.col3 .second{ width:280px; margin-left:20px; }
.col3 .last{ width:200px; }

Mastering Keyboard Shortcuts

5 Dec

2008

Nothing makes you look and feel more like a pro than mastering keyboard shortcuts. While beginners are searching through menus, your fingers will be flying across the keyboard and you’ll be ten steps ahead before they can apply their first command. In all of the Adobe applications, you can view shortcuts; in most (but sadly, not After Effects or Encore), you can edit them and add new ones.

1 A HELPING HAND
To learn the shortcuts for your favorite app, select its Help file from the Help menu; for example, in Photoshop, choose Help>Photoshop Help. Keyboard Shortcuts are always listed near the bottom, so scroll down. (It’s also a good idea to print out the Help pages.) The third time you use a command from a menu, ask yourself if it’s a command that you’ll use all the time; if so, force yourself to look up the shortcut and use it from then on. It may take a few attempts, but soon you’ll have it memorized.

2 EDITING SHORTCUTS IN PHOTOSHOP
In almost all the Adobe apps, you can edit shortcuts by choosing Edit>Keyboard Shortcuts from the menu (or use the shortcut, Shift-Option-Command-K [PC: Shift-Alt-Ctrl-K]), which will open the Keyboard Shortcuts dialog. Note: If you start editing the shortcuts in Photoshop right away, you’ll be changing the default set of shortcuts and that’s a little unsafe. So, we recommend that you click the Create a New Set Based on the Current Set of Shortcuts icon (to the left of the Trash icon), which will allow you to save a copy of the shortcuts and edit that instead.

3 COPY THE DEFAULTS
Photoshop will save the new set of keyboard shortcuts as a KYS file, which you can transfer from computer to computer (it’s also a good idea to back it up). If you use Photoshop for multiple, discrete purposes, consider saving various sets of shortcuts; for example, you could save one for print work and another for video work. That way, within each set, you can assign the F5 key (for instance) to do something different. You can switch from set to set via the pop-up menu at the top of the dialog.

4 SHORTCUTS FOR WHAT?
You can add a shortcut to almost any command in Photoshop. If you want to edit a shortcut for a tool rather than a menu item, simply choose Tools from the Shortcuts For pop-up menu.

5 ADDING A NEW SHORTCUT
Adding a new shortcut is easy: Just locate the command, click on its name, and type the shortcut you’d like to use for this command in the white field. Photoshop will warn you if you’ve chosen an illegal shortcut: one that Photoshop can’t understand or one that’s already assigned. It’s okay to reassign a shortcut if you want to; just make sure it’s one you won’t be needing.

6 INSTANT ACCESS TO BLUR
Add shortcuts for those commands you use most often; for example, we gave the Gaussian Blur filter a shortcut as we use it all the time. After you’ve finished making your changes, make sure you press the Save button (circled).

7 EDITING SHORTCUTS IN ILLUSTRATOR
The Keyboard Shortcuts dialog in Illustrator works almost exactly the same way as in Photoshop, with a couple of exceptions; for example, the Save button is on the right-hand side of the dialog.

8 PRINT THE SHORTCUTS
In addition, the Keyboard Shortcuts dialog in Illustrator has an Export Text button that, when clicked, will create a text file listing all of your shortcuts. You can view it in a text editor, such as Windows Notepad or TextEdit.

9 EDITING SHORTCUTS IN PREMIERE PRO
In Premiere Pro, we like to use markers, so let’s create shortcuts for that. In the Keyboard Customization dialog (Edit>Keyboard Customization), choose Panels from the second pop-up menu, twirl open the Source Monitor Panel group, and then add shortcuts for Go to Next Marker and Go to Previous Marker.

10 SHORTCUTS FROM NON-ADOBE PROGRAMS
Premiere Pro users who are transferring over from non-Adobe editing applications may wish to select one of the built-in shortcut sets, which mimic shortcuts for Avid Xpress DV and Final Cut Pro.

11 EDITING SHORTCUTS IN SOUNDBOOTH
In Adobe Soundbooth, make sure you click the Save As button (circled) before editing or adding shortcuts in the Edit Keyboard Shortcuts dialog. Adding a shortcut in Soundbooth is a little different from doing so in other apps: First you need to select the command, type the shortcut in the Press Shortcut text field at the bottom of the dialog, and then click the Assign button.

12 EDITING SHORTCUTS IN FLASH
Flash veers the farthest away from the standard workflow: While PC users will be able to edit keyboard shortcuts by choosing Edit>Keyboard Shortcuts, Mac users must choose Flash>Keyboard Shortcuts. To edit a shortcut in the Keyboard Shortcuts dialog, first duplicate the standard set by clicking the Duplicate Set icon (circled), then choose a set of commands from the Commands pop-up menu.

13 ADDING SPEEDY FLIPS
If like me, you’re driven bonkers when you can’t flip graphics in Flash without going to the menu, then why not add shortcuts to Flip Vertical and Flip Horizontal?

In the Keyboard Shortcuts dialog, choose Drawing Menu Commands from the Commands pop-up menu. Twirl open Modify then Transform. Click on Flip Vertical to select it, click the Plus button beside Shortcuts, then inside the Press Key field, type the shortcut you want to use. To save the shortcut, click on the Change button. Then just do the same for Flip Horizontal—with a different shortcut, of course. That’s all!