Support Contact:
Phone: +40 (21) 310.63.42; Forums: extendstudio.com/support


Should designers learn coding?

Update:

Here is an interesting article from Sandra Niehaus that talks about the same subject.

In the past couple of weeks I’ve been writing why it’s important for a Web Designer to know a bit of SEO , a bit of increasing the conversion rates via usability and if it makes sense to learn CSS if you only do small websites. I’ve got partialy inspired by this article from Web Designer Depot that gives 6 Reasons Why Designers Should Code. So ok, nowadays being a Web Designer it’s more than creating PSD, but should a Web Designer learn coding? But first, let’s recap the previous articles and say that I do agree with WebDesigner Depot that every Web Designer should know:

Increased usability for your visitors

Understanding the expected functionality of the website will improve your perspective on how to design it and create user friendly interfaces. Make things as easy as possible, to the point you’re building the site for “dummy” visitors. If you are into building the “perfect” user interfaces but that’s adding complexity to the site usage, you’ve already created a failure path for the website.

Easier SEO

Everybody now wants “SEO Compliant sites” so what does this actually mean for a Web Designer? Basically, every web designer should create the layouts in a way basic seo is implemented from the beginning. Not only that SEO is very important for a website as it can mean the success or failure of performing the desired function (selling, presenting portfolio, other marketing functions) but it’s an added value to the web design services and you can set a price tag for this and charge more.

So now what, you should also code??

Wouldn’t that be destroying the creative side? Last time I’ve talked with a designer about code, he told me that he uses the right side of the brain for creation and doing anything else will kill the creative flow. Besides, coding is not that easy, there are a lot of technologies to learn and no matter how hard you try, a developer than only codes will always be better at coding than you. However, when you begin to code your designs just a bit, you can create your own style. And the more you practice in writing code, the better you get in delivering a better overall work. If you want to become more than a simple “PSD creator” you have to start from simple things like coding a template in HTML and CSS.

On the other hand, there will always be a little war between coders and designers. Coders seem to ignore any design element that is smaller than 5 pixels, only see about 6 colors, and don’t mind if proportions are not kept, if it works. And I bet you’re tired explaining how this should be placed there and this should be resized and this and that. My experience also tells me that you are getting a lot of “this can’t be done this way” from the coders.

So, you shouldn’t be coding because it kills the creative side, but you should code to implement your design exactly like your creative right side of the brains tells you. That’s a bit of a non-sense, so what would be the workaround? Nobody was born being a great designer or coder, everybody started from scratch and from simple lines of codes, so why shouldn’t you? So what if understanding coding techniques and actually do light coding it’s really beneficial? Sounds strange, but really, there are some principles, techniques and technologies that every web designer should have a clue about:

Knowing the limits and possibilities of JavaScript

Every new great website that you see nowadays is probably using JavaScript or some JavaScript library. And the most popular right now is JQuery. There are a lot of tutorials and examples on how to create navigation and slide down menus or effects with JavaScript based on JQuery. You also get nice design effects, usable forms and cool functionality features. But the most important part you should understand when designing web site is to know how the implementation of these “JavaScript thingies” will affect the coding time and even more importantly the speed and reliability of the website. Because if it doesn’t work, visitors will not get to see how nice it is.

CSS : A killer for some images in your design ?

use css gradients

You’ve probably heard by now about cascading style sheet and how to write CSS. There are a lot of tutorials about CSS on the internet which you can learn from. And you’ve probably heard also about color gradients in CSS. Just to give you an example, using color gradients in CSS is an easier way and smarter because you don’t use any images. The gradients are generated by a few lines of code. And the best part is that you can apply gradients to any elements that you want, even text and still no images are required. There are a lot more ways in which CSS could help the site, and as probably the coders will want to make a CSS site, you should at least know what’s best to do with CSS and create a design suitable for it.

Use styles and fonts that can be applied to any visitor’s settings

use google fonts

Being a designer it’s all about using the right fonts and the right design to create a perfect masterpiece. But by doing so, using specific fonts you’ve created yourself a problem: not every user has your collection of fonts. So this could be a problem if you don’t want to use flash to save your fonts.

Luckily there is another way by using Google Font Directory. This could be a good thing if your fonts are found on the Google fonts collection, but you will have to load that font for your website from the Google servers. This could result in more waiting time for the visitors and you know nobody likes to wait. So why would you spend this amount of time and energy when using a general font could do the same job. You can take a look here for the standard fonts between Windows and Mac.

Frameworks, useful or not?

using frameworks

Should every site be created from scratch or should you use a framework? That’s usually a coder decision but there are a lot of useful frameworks that you should know about, especialy because frameworks should actually involve less coding. I know every design should be unique, but there are some web standards that you have to comply to, like the standard wide for a layout is 960px. Using a framework can help you with placing parts inside the layout, or with keeping the same white space on all elements from the design.

And maybe you shouldn’t code that much to make a site?

You’ve got some clients, you agree on a design and start working with them. The client entrusted you to create the great design so why leaving money on the table? Maybe you don’t know how to code that much, but a little bit. Is there a way to do more than just designing?

Because nobody understands your design better than you, the best idea would be to use a tool that writes the CSS and DIVs for you, without actually requiring any coding. Flexi CSS Layouts is a Dreamweaver extension that helps you create the CSS layout for a site without coding, so you might give it a try and implement the design using DIVs and CSS on your own. You need to slice the design elements then use Flexi CSS Layouts to create the CSS layout. Here are some video tutorials.

The old way to get around this dilemma was and you’ve definitely heard (and the WebDesigner Depot article also talks) about programs that can generate HTML pages directly from their interface from a psd file. One way to generate a HTML page was to use fireworks and slice your design into HTML slices and then generate the HTML page with the images. The downside was that it was limited to table design. You could not generate divs directly from Fireworks using HTML slices and when generating a HTML page using a program this way, is that you don’t have control over your HTML tags and content. You don’t know what class or id goes where. And if you used special fonts and styles, or even better you want to use javascript inside your HTML page than it’s like “finding a needle in a haystack”. You need extra time to understand what the program generated and which part goes where.

Why don’t the website visitors convert into customers?

Last week we’ve discussed about the basics of getting more visitors when building and launching a new website. Let’s go one step further and assume that you built a cool website and got a lot of visitors, but only a few become clients and you’re wondering why is that. First, let’s define “a few”: depending on what the website is about, or the type of services or products it’s selling, a typical website has a conversion rate between 0.5% and 8%, where 2% is the average.

Usually when looking for clues on why just a few visitors are buying, most un-experienced web developers think that it only comes to how the site looks and probably are able to point other sites with cooler designs that convert better. But actually studies say that just having a beautiful site doesn’t guarantee the success: the website success is not measured by the unique content or the cool graphics, but by the conversion rate. And there are some important aspects that influence the conversion rate which we’ll try to explain in this article.

Would you refer the site to your family and friends?

If it’s not (only) about how good looking the site is, then improving the conversion rate is definitively about how easy the site is performing its expected function: if it’s a shop, how easy is to find products, read, understand and compare features and make the purchase? If it’s a portfolio site, how easy is to find what type of services have been performed, customer feedback and so on?

Usually what a lot of web developers are failing at, is understanding how visitors are different from themselves:

Web Developer (you)

  • you already know what the site is about
  • you know what the products do
  • you trust the products
  • you know how things work in the site

Site visitor

  • follows a link that might be more or less accurate
  • has a need and doesn’t know what product can solve it
  • need to be convinced the product works
  • might not understand how to use complex user interfaces

So to make first things first, you need to realize what is the expected site function and if it works: presenting the products, portfolio, selling, anything else that can be defined as a desirable action.

  • Are you using a shopping cart? Does it work?
  • If the site sells something online, then a shopping cart that works is paramount. The design and usability of the shopping cart is important but even if you designed a cool shopping cart, if it doesn’t work with a potential client, doesn’t accept credit cards or doesn’t offer other possibilities for payment, then you are going to lose that client. You can learn more about how to design a shopping cart here

    shopping cart

  • Are you giving enough details or maybe you use too many details
  • Sometimes offering too few details about your services or products could make you lose clients even if you have the greatest product ever. Simply the visitor will not know it’s the greatest product. Not very often, but it might happen, offering too much technical details instead of talking about the needs it’s going to cover could confuse a potential client.

The second thing that counts is the website usability

One of the most important aspects in acquiring clients is the quality of the products and services it sells. You can’t do much about these, but if the same product or service would be listed on 2 sites would you recommend yours to the family and friends?

With this thought in mind, make things as easy as possible, to the point you’re building the site for “dummy” visitors. If you are into building the “perfect” user interfaces but that’s adding complexity to the site usage, you’ve already created a failure path for the website.

usability tips

Below are some usability tips you should look for:

  • Add a tagline
  • A tagline is very important for clarifying immediately what the site is about, because it’s the first thing a visitor will see, it’s like a motto that represents you. Accordingly to online statistics you’ve got 8 seconds to capture the attention of the visitor and a well defined tagline should do the trick.

    Hi. I’m a freelance web designer

    Good day, visitor! Welcome to the portfolio of web developer John Doe

  • Add a search option for the website
  • A site search might be a secondary path to resolve any usability issues the visitors might have: if it’s too complicated to navigate or to find what they are looking for, at least visitors get the chance to use the search option. A search option should be easy to use and should be placed on the top of your page especially to the top right corner.

    search option

  • Create a sitemap
  • Sitemaps are very important because of at least two reasons: one, sitemaps improve the user’s navigation inside the website. A sitemap can be a useful tool for a visitor that doesn’t like to browse to find the information he is looking for, especially in sites that from their nature or purpose have a complex structure. And second, a sitemap is very important for SEO. Creating a sitemap is highly indicated by Google Webmaster Tools because it helps the crawler to map the structure of the website.

    sitemap

  • Create readable pages
  • Accordingly to usability tests, the majority of the website visitors “scan” a page before actually reading it. What that means is that if you don’t structure the content inside the pages and make it easier to read you’re going to lose visitors before they even begin to read the content.

    hard to read content

  • Avoid complex elements and widgets
  • Don’t design elements that have a complex functionally even if they seem to solve issues: they might confuse the user before helping him out. As a result you might lose users because they do not understand how to use the widget or how to interact with the website where a feature list might be easier to follow. At least, try to give tips if you want to use complex site functionalities.

  • Are you writing in simple English to your audience?
  • Have you thought that the expressions and the terms inside the content might influence the conversion rate? Maybe the site language is too geeky for some of the users, or maybe you made a bad choice of words. You have to think about the impact of the content and how the readers perceive what you’re trying to say. Do you use a comfortable way of expressing your ideas or do the words give the readers a level of stress? You have to think about a friendly and relaxed way of telling ideas – that’s part of the usability too.

    casual

You can read more about usability features here

Try to understand your visitors

Getting visitors is an important factor for the website’s existence. But understanding what they do and what stops of helps them to become buyers, makes the difference between a successful website and a website that just has a lot of hits. So the next step is to figure out the audience and its behavior.

Here are some tips (we covered analytics in the previous article):

  • Implement a heat map
  • Heat maps display the areas of a web page that are most frequently scanned by users. Using a heat map can help you determine which parts of the website are most used by the visitors.

    heat map

  • Interact with the visitors
  • Feedback forms and even small surveys can help you find out the needs and wishes of the visitors and clients. More advanced techniques are to provide content based on the visitor profile and actions – the so called behavioral targeting: (having different content depending on the language or based on the point of entry, most visited pages and so on). You can read more tips about your audience here

    survey

  • Do you have a clear way of contact? Direct physical address, e-mail, phone.
  • You made a visitor interested into the products or services and he is ready to buy. Do you have a clear way of communication? A contact page, with physical address, a phone number or an e-mail placed in the right spot? As an usability thought try to avoid using capcha inside a contact form.

Sometimes they do not convert at the first visit, but:

  • Do you have a newsletter, facebook page, twitter or other ways to stay in touch with the potential customers?
  • Newsletters are very important to keep in touch with your readers and also are a great way to promote your products. If you think that’s old school, then go the social way with additional things attached to your site: facebook pages, are so easy to do!

  • Did you gave reasons to your visitors to come back?
  • Having a good site is not enough. Users want more from their online experiences: special deals and coupons are old school but they work well; and there are some other ways to give them reasons to come back: tutorials, articles, guides.

  • Have you tested your website for loading time, visibility on different browsers? What about mobile usage?
  • Nobody likes to wait for a website to load. And having big size images or scripts that take a long time to load make a visitor unhappy so he will probably leave before he will even see your work. There are programs like Yslow to help you optimize your files. I have written also an article about optimization tips.

Later edit:

- here is an interesting article from Smashing magazine about understanding the site audience.

Dreamweaver CSS Pack Launched

Dreamweaver CSS Pack is an excellent priced bundle between Flexi CSS Layouts and Flexi Panels CSS. Not only that you get Flexi CSS Layouts with 20% discount (discounted price $99.99) but you also get Flexi Panels CSS at $25 (from the regular price $39.98).

Flexi CSS Layouts is a Dreamweaver Extension that helps you create browser compliant table-less web pages with ease.

  • Create custom CSS layouts in Dreamweaver with ease
  • 55 editable CSS templates included
  • Edit CSS settings for layout elements
  • Create DIVs and CSS for existing pages

Flexi Panels CSS for Dreamweaver helps you create rounded corner table-less code for nuggets, side panels, menu containers.

  • Rounded corners CSS boxes, containers and nuggets
  • 30 built in panels, 5 schema colors each
  • Adobe Air based FlexiSlicer to create your own panels

Enjoy!

Page 7 of 30« First...56789102030...Last »