Tuesday, September 21, 2010

10 Questions From Modern Web Designers: Answered

No matter what level we're at, we all have questions. We search every day for the answers to these questions, and only sometimes do we get a decent answer. As web designers, we wonder about everything from our skill sets to our businesses, who we should look up to in the industry, and all-together secrets-of-the-trade.

10 Questions From Modern Web Designers
Image credit: DoBeRaGi

In this post, we've compiled a list of the top ten questions modern web designers ask, and we try to answer them from our expertise. If you have anything to add at the end, whether it be another question, or your own answer, please feel free to chime in and give us your own insight.

1. What New Technologies Should I Focus on Most?

Between HTML5, CSS3, iPad development, new development frameworks, and more, it can be difficult to know what's important to focus on. We all know that it is essential to keep up to date with the latest technologies, but how can one focus on every new little thing? The answer is, of course, we can't. Therefore, we must be decisive.

iPad
Image credit: Yutaka Tsutano

So what new technology should any web designer focus on right now, today? Focus on the technologies of your specific niche. If you're a new web designer and haven't determined what that specific niche is, then determine what you want it to be in the future, and go from there. For example, if you are a developer who already does Blackberry/iPhone apps or has a focus on mobile websites, then learning to create an iPad app/design would be most beneficial for you. If you do a lot of CSS, then learn a framework to speed up your development.

Just focus around your specialty, and learn what clients expect you to learn. Also learn what you expect yourself to learn. Above all, though, know that new technologies will always come and go, so don't fret over learning about it all today. Feel free to be choosey about the new things you learn.

2. What Types of Things Should I Invest Money In?

An important business lesson is that only the businesses that invest in themselves really grow. This is true for web design businesses as well. A percentage of income one makes as a designer should be reinvested in order to grow the business and the individual. When working for an industry that functions primarily online, though, finding items to invest in can waste more money than desired.

So arises the question: What kinds of items are smart investments for web designers? Short answer: knowledge. The single most important thing any web designer can invest in is anything that improves their knowledge of design, business, best practices, a new trend/technology, etc. In a technology-based field, growth and knowledge are your best assets.

Stuff
Image credit: Aaron Bassett

However, other smart things to invest in are:

  • A good, comfortable desk set and chair (given you work in a home office). Productivity is only at its best when one is comfortable, and when one has plenty of workable space and organization.
  • A good computer and software. Keep in mind that this should be relative software — stuff you'll actually use. Keep the Adobe Suite updated as best as possible, but don't waste money on 'cool' software that you think will make you more productive. Also, a fast, smart computer is a must.
  • Quality resources when you need them and can afford them: stock photography, icon sets, fonts, theme frameworks, etc.

3. The Big One: Should I Go Freelance / Stick With A Firm?

Freelancing in the web design career seems to be a choice that is growing in popularity. Today, many web designers just starting out never even try out a company, and just jump into freelancing right after school. (Or even while still in school.) Sometimes it seems that many new web designers are going freelance because it's just the thing to do these days. Yet, we find many freelancers that are miserable doing it. The truth is: it's not for everyone.

Office
Image credit: Robert Scoble

Understand the pros and cons of working solo. Also understand the pros and cons of working for a company. Know what you're willing to sacrifice based on your own beliefs and future goals, and know what you want to gain professionally. Beyond knowing what your goals are, feel free to try them both out. If you haven't worked for an agency yet, get a part-time job, or try it out for a few years full time. If you already work for a company, take a break or ask to go part-time to try out the freelance lifestyle. Check out Jacob Cass's post on Design Agency VS Freelance Life.

4. As a Web Designer, Do I Need to Code If I Don't Want To?

This is a tricky question to answer, because it's another one of those questions that is best answered with - "Well, it depends...".

Quite honestly, though, all web designers need to learn how to code. At the very least, they should know how to code XHTML/CSS and JavaScript. All web designers should also know at least a tiny bit of PHP/MySQL to get by. This is because many platforms (including the ever-so-popular WordPress) are coded in PHP, and a web designer should know enough to get around the backend of the many popular PHP-based platforms.

Code
Image credit: Huasonic

So the short answer is yes - know how to code basically because you will likely have to deal with it someday. However, many web designers do end up outsourcing much of the coding work to web developers who prefer coding over design. That is fine of course, if your budget allows. So by all means, if you don't like to code and can outsource it, go for it. It's one of the many choices we're blessed with as web designers!

Learning to code, though, can help any web designer better discuss project requirements with clients and coders, and can even help to design better-quality websites according to usability. On another note, if you ever choose to go back to a company, almost all companies will require this basic knowledge and experience. (Or if they don't require it, it would definitely help regardless!)

5. With All The Hype, Should I Learn How to Make WordPress Themes?

WordPress is definitely not a passing trend, that's for sure. In the web design and development fields, it's easy to say that WordPress development can be a very profitable niche to get into. With all of its popularity, though, is it now becoming an essential thing to learn as a web designer? Are static pages officially out of style?

WordPress
Image credit: Huasonic

There are plenty of niches a web designer can get into, but nearly every client will ask for a blog. Most clients know now that blogging is a great way to increase web traffic, the thing they're most interested in after spending hundreds to thousands on a website. Furthermore, many know that WordPress specifically is as versatile as it is.

So is it now essential to know how to make WordPress themes? Not really, but it can definitely help. In the very least, focus some of your efforts on learning how to design blogs effectively, and outsource the code to WordPress if necessary. It may not be the thing all web designers like to focus on, but too many web design jobs today require a blog, and specifically a WordPress implementation of some sort. You can even sell your own custom WordPress themes.

6. What is the Most Effective Way to Market Myself in This Industry?

There is no one most effective way to market yourself as a web designer. However, it is true that there are some more effective ways than others. Some marketing methods take more time, and others are quick and to the point. Any marketing method can be a waste of time, though, if it doesn't do much. From experience, here are some favorite marketing methods among successful freelance web designers (in order) :

  • Referral Business - Once you do land those first few clients, always ask for a testimonial or referral, and follow up with them from time to time via promotional letters or emails. If you can master this, it is the single most effective marketing technique.
  • Direct and Local Mail - Local business is easier to win over, and direct mail marketing is an effective tactic. Combine them, and a web designer can get a pretty good response. With a well-crafted sales letter, it can be easy to get a 1/100 chance of response. If that doesn't seem like a lot to you, consider this: If it takes $200 to create and mail 100 sales letters, and you gain 1 paying client from it with a $1000 project, that's a return of your investment x5. You'll likely also create plenty of leads that could turn into clients in the future.
  • Building a Reputation - Build a long-term reputation through social media, blogging, and successful client projects. It takes a while, but the process is exponential. With hard work, the clients will eventually be coming to you. When promoting yourself, don't always worry about winning clients over directly.

Marketing
Image credit: dmhoro

Overall, unless you're really bored or desperate, avoid ineffective forms of marketing such as cold-calling, cold-emailing, and job boards. They're usually just a waste of time and energy if you don't have time for them.

7. What's a Good Balance Between Spending Time on My Own Stuff vs. Client Projects?

Clients pay the bills, clients bring in new business, and clients keep your web design business going: so always put clients first. When you're more interested in focusing on a new side project, it can be easy to get side-tracked, and then get behind. Put your clients as priority #1, and always make deadlines and provide great service. After all, clients are what your business is all about. Don't take them for granted!

Creative Office
Image credit: liquidskyarts

Yet, it is important to focus on your own personal projects, your portfolio, and your blog when given the time. It's alright, and even smart to create a set amount of time each day to work on your own things. Write a blog post a day, then use the rest of the day for client work. Or, work for an hour on a side-project at the end of the day, after you have all of your client projects taken care of.

Make client projects priority #1, personal projects priority #2, but definitely keep them both as priorities as a web designer.

8. What Are The Best Places to Find Web Design Resources?

Web design resources are everywhere on the Internet, for free and for a fee. Some designers spend far too much on premium resources, while other don't spend nearly enough. Paid resources are definitely a good investment, as we stated above, but it isn't necessary to pay for every little thing.

Flickr

Some great places to find quality free resources are below:

  • Flickr — Do a creative-commons search for textures and more on Flickr to find some pretty cool stuff around the community.
  • Blogs — blogs are giving out quality freebies everyday. Use them to your advantage!
  • Stock.Xchng — Probably the best resource for free stock photography.

Also find free fonts, open-source software and more to use to your advantage. However, for professionally designed logos, have a few premium fonts on hand, or have a subscription to a premium stock photography site for a client's web design project.

9. For Web Design Projects, Should I Use a Fixed Price or Charge Hourly?

The long debate of whether to choose fixed price or hourly rates will likely never end. Professionals of all sorts debate it every day, and it can work well either way according to different professions. What's right for a web designer, though?

Here's our own opinion: fixed price projects. Let's say you take on a new project, worth $x amount. If you charge hourly, you can get this amount by determining your hourly rate by the number of hours you think you'll be working on it. Seems fair enough — until you have your client constantly behind your back time-tracking every working moment. If you don't want to feel rushed, go by a fixed project rate. Then, all you must worry about is meeting deadlines. No time sheets, advanced time-tracking, or constant updates to reassure the client.

Money
Image credit: Materials Aart

Also, the better you get at something, the faster you can do it, right? Wireframing takes less time, the design process takes less time, and then coding and validating the final website takes less time. If you go by an hourly rate, your overall project rate goes down the faster you complete things. In other words, the better you get, the less you get paid. Put that way, hourly rates don't make a whole lot of sense at all.

Always track your own time so you can better quote future projects. Long-term fixed rate projects are the best option, after you learn to quote them correctly and after you've built a successful list of additional cost fees (such as a $50 charge per extra revisions).

10. Are Bigger Clients Necessarily Better?

Of course not. It is a quick assumption to think that a large well-paying client is better than a client with a new business and a smaller budget — not necessarily. Larger clients make for larger projects, and an entirely different sort of workflow. As creative people, we all have variations in the type of work we like to do, and variations in our own creative style. Sometimes these preferred working conditions and styles are not fit for big corporate clients and that's alright.

Big Clients
Image credit: IceNineJon

Never feel pressured to take on a big client because it feels prestigious. There are hundreds of freelance web designers everyday that turn down larger clients for more personal clients with small businesses and projects that fit the wants of the designer. This is, of course, the same vice versa. Just like there are many web designers who turn down large clients, there are plenty that will redirect smaller clients and keep the big ones for themselves.

Do you get paid more for bigger clients? Again, not really. Smaller projects take a smaller budget, but also less time. Larger projects can span several months, with a larger budget. The income a web designer makes at the end of the year, though, only depends on how hard they've worked day to day.

Conclusion

Hopefully these short answers were enough to cover what many web designers ask each day. It can be difficult to know what trends to follow and which to leave behind to do your own thing. What's most important is to have the knowledge to do a great job with every project, and use trial and error between your own experiences and the experiences of others. However, the only way to truly know the answers to some of the questions above is to test all the options out yourself.

As always, feel free to ask your own set of questions, or ask a question that you'd like an in-depth answer to. We'll definitely try to get them answered in the next set of questions from web designers. Also, share your own answers based on your experiences as a web designer thus far.

Thursday, September 16, 2010

CSS Frameworks: The Good, The Bad, and The Ugly

Just like there are frameworks for many programming languages - CakePHP, jQuery, .NET - there are frameworks for CSS. The point of frameworks is to increase productivity and efficiency with CSS code. Many common practices done when using CSS are pre-defined within a framework to save the developer time and effort.

CSS Frameworks: The Good, The Bad, and The Ugly

In this article we're going to take a closer look into some of the most popular CSS frameworks, and see if using one could really live up to it's reputation. Just like when working with any other framework, template, or application, there can be pros and cons. We'll look into the good, the bad, and the ugly of using a CSS framework.

Time-Saving Web Development

There is no doubt that a CSS framework can save time when used correctly. After all, a framework's purpose is to set up a base for developers to work with. Anything from typography and grids, to resets and add-ons are used in frameworks to make the developer's life easier. The point is not to open up a text editor and start coding from scratch.

The Time-Wasting Learning Curve

In contrast, there is of course a learning curve when using a new CSS framework. This can take up more time than it's worth. Beyond the learning curve though, when the code is not 100% yours, there can be confusion at some points throughout the development process. As designers and developers, we like to know the complete back-end workings of what we're dealing with. Without that, a project can actually take longer.

The Time-Wasting Learning Curve
Image credit: mayeve

Finding a Balance

So in respect to time efficiency, is using a framework worth it? For many, probably yes. It does take a good understanding of the framework that will be used before the time saving benefits truly arise, and maybe even a change in how one is used to coding. However, there are certain individuals that may work quicker with their own code completely — it can really just depend on the type of thinker you are.

Think of how well you've worked with other types of frameworks in the past. If you've ever tried to use something like a theme framework to create a WordPress theme, how did that go? Was it easier and faster, or slower and confusing? How easy was it to go from normal JavaScript to jQuery or Mootools? Also, if you've ever had to deal with anyone else's code, non-related to a framework, how easy was it to figure things out?

When using a framework of any kind, including CSS frameworks, you are essentially using someone else's well thought-out code, and trying to use it to your benefit. If you find it difficult to work with someone else's code besides your own, then using a framework may not be for you.

Better CSS Efficiency

Many CSS frameworks are also meant to get all the garbage out of the way, standardize code, and keep things short and quick. For many pre-defined features in CSS frameworks, code is condensed using short-hand and eliminating whitespace. Since each browser has to load stylesheets along with other website documents, having smaller CSS files can speed up a website's load time.

Better CSS Efficiency
Image credit: juehuayin

Are There Too Many Extras?

While a solid CSS framework can speed up a website's load time and keep things efficient, it can also do the opposite, depending on the project. How much CSS is your project going to need anyway? Does it need all the little features and details that come with some of the more complex CSS frameworks?

If coding a simple website, all the additional typography rules, layouts, and print styles may not be necessary. In that case, all these pre-defined features are just getting in the way, bloating the web space. One could choose to manually take out what is unneeded, but it almost makes more sense to code from scratch with no framework at all if one is to go through that trouble.

Deciding If It's Worth It

A simple static website with a few pages likely won't need a framework behind it, but something like a blog design or e-commerce site that will require many of the standard styled elements, multiple layouts, etc. could easily benefit from one. It's all about knowing your project well and deciding appropriately. If using a framework is just going to make things complicated and longer, then it's not worth it.

More Precise Design

Many frameworks feature a grid system, which compliments a design grid system like 960.gs. Pre-defined layouts or custom layouts can be made with CSS frameworks easily and hassle-free, and the pre-built grid keeps things in place. Even complex layouts take less thinking, and margins, padding, and the standard box model is always used correctly. Pixel-perfect conversions from Photoshop to code can be done more precisely and more quickly.

More Precise Design
Image credit: adactio

What if the Framework Can't Support Your Design?

For many standard, and not-so-standard layouts, a CSS framework can make things easier and make code stronger. However, some designs are not meant for frameworks. Many designs still do not conform to grids, or otherwise conform to a different kind of grid. This is especially true for more creative designs. Is it possible that a grid that goes along with your favorite framework would just get in the way, or otherwise be of no good use?

Knowing How Your Design Works

It's true that many designs can benefit from using a framework grid to base their design on. By following a framework, the final layout is less likely to break under varying content options and among different browsers. It's nearly foolproof.

Yet, grids and other design-related features of a framework can also just get in the way and mess with certain designs more than it can help. For non-conventional designs, try it without a framework, but always give a framework a try for grid-based designs or standard-layout designs.

Extras and Add-ons

Some frameworks include commonly used elements, like lightboxes, tabs, sprites, and more. Many of these frameworks let you download the standard version, and add these extra features as 'add-ons.' This definitely has a benefit of adding these features easily and with compatibility to the framework, but not requiring the developer to have them on the framework if they're not going to be used.

However, beware that not all frameworks are created equally. Some may pack on more extras than necessary, by choice or not. Note what you use regularly, and if the extras included in the framework will be helpful, or will just pack things on and make things more confusing.

Popular CSS Frameworks

Blueprint
Blueprint offers a lot of features that many designers and developers ask for. Pre-defined typography, buttons sets, sprites, layouts, and more. Among all these features, designers can pick and choose, which makes this framework a great choice for a variety of projects.

Blueprint

Clever CSS
Cleve CSS is a unique idea that focuses around giving the developer a different option when coding in CSS. It creates a new type of shorthand, that looks similar to the Python language. Shorter code and smaller files make this a very efficient framework. This framework focuses less on pre-built features and extras, and puts more emphasis on the developer coding everything themselves. It involves a quicker and smarter syntax, thus speeding up development time.

CleverCSS

CSS Boilerplate
This is a very simple CSS framework with less of a learning curve, and more versatility. It may not cover as much as something like Blueprint, but it can be more useful to those who want to use a CSS framework without all the initial confusion.

CSS Boilerplate

YUI 2
YUI 2 has a strong focus on working with grids, and less focus on pre-built features like typography, resets, etc. (Although these are also included). If you often work with complex layouts, YUI 2 is a great option for building robust, unbreakable designs. It works easily with all the common layout widths, but also works well with custom widths. This is also one of the best frameworks for SEO.

YUI 2

Elements
Elements is a CSS framework focused around a time and effort efficient workflow. This framework has the designer in mind. It includes preset classes, a mass reset, and some neat extra features that are nearly always usable and lightweight.

Elements

Conclusion

Using a framework or not depends on how you as a designer or developer prefer to work, and how frameworks personally affect your workflow. They can be a great tool to use when used correctly, and can make any developer's life much easier.

Besides deciding whether or not to use a CSS framework in the first place, afterward there is also the decision of which framework to use. Keep the above notes in mind when deciding: time saving, code efficiency, design factors, and the need for add-ons. The need for any of these features over the other depends on the type of projects you normally take on and how you work when coding.