Imagination is our power

Archive for March, 2012

How Much Code Should Web Designers Need to Know?

This is an interesting topic which isn’t often discussed between web designers. Getting started in Adobe Photoshop is difficult, and you feel an exhilarating rush when you complete your first web project. But what good is a website mockup if you can’t build it?

Arguably designers by definition do not need to understand any programming. Design is just that – pretty pixels in an image. However many talented individuals are coming forward who take the time to study both fields. You can market yourself at prospective jobs as being proficient in both design and markup. I’m going to discuss a few points on this topic and maybe we can figure out a balance on how much code is required for web designers to understand.

The Problems

In an ideal world we would be able to build graphics and easily import them into a program for compiling into a website, desktop app, whatever. Sadly this is not the case and doesn’t appear to be anywhere on the horizon. For now web designers & developers must work together to build projects which are stunning visually and function appropriately.

This partnership is important because when you have a skilled duo working together you’ll notice much higher quality from both individuals. However where should the line be drawn? This is entirely up to your team and your individual circumstances.

I would argue that anybody skilled enough in creating stunning web graphics should be able to understand even minuscule HTML/CSS. If you’ve never in your life learned a development language then this will be an uphill battle at first. But given a few weeks of study practically anybody can understand the basics of HTML/CSS markup. And it’s certainly not something you’ll regret learning down the road.

What are your Responsibilities?

If you can get away with only landing design work then you’d be in a very lucky position. Most project managers consider any “web designer” to also understand frontend development languages enough to build their ideas into a browser. As mentioned above you can have zero knowledge of HTML and pick up the basics in just a few weeks(maybe 1-2 months).

CSS is a bit trickier where you need to understand positioning elements on the page. This may take more time to really nail down the concepts, but both these languages are required for building semantic web layouts. I’m sure most designers who already understand these frontend languages will vouch in saying it’s a major improvement over solely performing graphics work.

Webpage Scripting

The fuzzy grey area to consider is frontend web development for dynamic content. JavaScript is easily the most popular language and supported in all modern web browsers. Web designers shouldn’t feel required to learn any JavaScript – but it is an immensely powerful language which you can use to add flair into your designs.

And to boot the popularity of library frameworks such as jQuery makes learning JavaScript hundreds of times easier. In fact most web developers do not write code in straight JavaScript anymore. jQuery is just easier and can perform all the same tasks with fewer lines of code. But I have to admit that the syntax looks much more like a programming language than HTML or CSS.

If you truly have an interest in pushing the envelope with frontend coding then take some time to study the basics of jQuery. You’ll really be an asset to any creative team! A web designer who can put together brilliant mockups and also code them into a dynamic page is the rarest exception. These tasks are often split between the designer and a frontend web developer.

But you can market yourself as both a designer & developer using these web languages.

Taking it Slow

If you are coming into this with absolutely no knowledge of web coding then it can appear very overwhelming. Do not expect to be building your portfolio site in HTML on the first day! It will take some time and dedicated studying before you memorize the common page elements and CSS properties. But within a week or two you should be feeling very comfortable reading HTML.

Just remember that you want to build websites properly and follow semantic rules. If there’s anything worse than a web designer who doesn’t know how to code, it’s a web designer who codes poorly!

Freelance Stability

One of the best arguments to put out is the stability web designers can earn with freelancing. If you can only build PSD mockups then there’s no way you could take on client work without also paying a frontend web developer to code the site. This would cut heavily into your profits on any projects you land.

Having done plenty of freelance work myself I can say the projects I most enjoyed were with clients who only needed a basic website design, yet with more complex JavaScript-based animations or dropdowns. I mastered a large portion of my current skillset by practicing on these freelance projects and learning as I went along. The countless resources in Google make this possible now more than any other time in history.

But even disregarding freelance work you could still be interested in working for another design agency. Problems can then arise when you’re creating a PSD mockup which doesn’t accurately reflect possible web UI elements. Then the developer on your team needs to request changes and the project is drawn out even longer.

The flow of any workspace can be disturbed by small yet annoying oddities like this. Building in Photoshop and HTML/CSS gives you a lot more control over the final product and offloads work from your design team. This opens opportunities to work with experienced PHP and JavaScript developers who then use your semantic HTML as a template for more customized scripts.

Your Future Goals

Ultimately this question of “designers who code” cannot be answered the same for everybody – and that’s why it makes such an interesting discussion topic. You need to consider what your goals are in the future and if they require an understanding of properly building websites.

There are plenty of design jobs where you can work strictly on branding elements. This includes logos, vector illustrations, icons, mascots, and other goodies. But even digital illustrators may wish to put up their own portfolio website one day, and this is when a brief understanding of HTML comes in handy.

If you wish to read a bit more on this topic check out our post should designers know how to code? There are solid arguments for both learning frontend coding and strictly sticking to design only. And again it all comes back to your own personal preference and requirements for creating digital products.

Conclusion

It is your decision for which skills you decide to learn and how you further your own knowledge. Modern web designers are almost assumed to have some knowledge of HTML and CSS code. When first getting started in design it’s difficult to multitask in both areas. But after just a few months it shouldn’t take long for your curiosity to peak.

What suggestions do you have for web designers looking to understand frontend coding? How do you feel this can affect performance both as a freelancer and working with a design team? Let us know your thoughts in the discussion area below.

How To Do Keyword Research (What You Need to Know?)

Search-engine optimization (SEO) is a main ingredient in website upkeep and an inescapable part of online marketing. The process of keyword research is vital to good SEO. Keyword-stuffing used to be the master card in terms of SEO, but those days are gone. Keyword research still carries weight, and website owners need to maintain keywords properly; they can’t be chosen arbitrarily. Choosing the most suitable and relevant keywords takes research.

Before getting into the details of keyword research, let’s be sure we understand “keywords” and how they’re important to search engines.

In the context of search engines, keywords are the words or phrases that a person types into the search box of a search engine (like Google) in order to find the information they’re looking for. The search engine identifies relevant websites on the basis of keywords, so the keywords identified by the website’s developer become the indicators of a website’s relevancy against users’ queries. Search engines have begun to pay attention to pages and keyword relationships, so choosing the right keywords is becoming increasingly important. From the perspective of a website’s back end, keywords are what a website talks about, and they are carried in its pages, meta tags, URLs and so on.

 

Now that it’s clear why keywords are so important, let’s dig into the field of keyword research.

Where to Begin?

instantShift - Where to Begin?

Tools

Targeting just one or two keywords might not be enough; there can be a lot of competition. To broaden your website’s search relevancy, make a list of keywords and related keywords that are relevant to your website and its content. Put them in order from most to least important so you can see what the search engine ought to look for and rank. Many keyword research tools can be found online. Some are paid tools, but a few are available free of cost, and these tools can serve an important role. A few popular tools are Yahoo! Search Marketing, Microsoft adCenter Labs and the Google AdWords keyword tool. None are perfect, so try each and compare two or three such tools before choosing the one that suits your task best. Being familiar with these and similar tools will help you broaden your understanding of keywords.

The Google AdWords keyword tool has become very popular. It’s a free tool, provided by Google, that assesses the details of a given keyword: its search volume, its approximate value according to local monthly search and global monthly search. It also provides variants of keywords to help you assess the weight and worth of each.

Keyword research is not a one-step process, so prioritize well. Prioritizing the search volume of a keyword is essential, but don’t depend on that alone. Another important factor is the keyword’s level of competition. A general or basic search term might have a great search volume but will have major competition as well. In that case, your website probably won’t rank high.

Volume vs. Competition

Let’s pick a keyword and, with the help of the Google AdWords keyword tool, analyze the relationship between search volume and competition.

Suppose you are launching a website about mobile phones, and your goal is to provide users with “stylish mobile phones with updated features at the lowest rate.”The main keyword phrase, of course, will be “mobile phones”—but it gets about 278million search results within 0.16 seconds on Google. That’s huge competition. But a Google search doesn’t tell us the volume, so let’s check the Google AdWords keyword tool. With a broad search, “mobile phone” has a search volume of 16.6 million globally and five million locally. This keyword phrase has a high search volume and medium-level competition. It’s a general term, and mobile-phone companies will have ranked it high. It won’t serve you well to target that keyword phrase and nothing else, so move on to its variants. It’s clear that search volume cannot be the sole criterion when deciding whether to use a keyword.

Check the dialogue box that says” only show ideas closely related to my search terms” to see variants. Then choose keyword phrases like” best mobile phones,””mobile phones at lowest rate,””mobile phone features” and so on. Targeting these will draw the search engine to your website. The volume of keywords and phrases fluctuates, so conduct regular research. Don’t create Web pages or titles with untargeted keywords.

Using high-volume keywords is OK if you can beat the competition. You need to be a little strategic at times. Find less competitive keywords that have sufficient volume and target them to increase your chances of success.

When choosing keywords, learn to understand the two types: short keywords are the main search terms, but there are also “long-tailkeywords. These are multi-word keywords that can be more specific in meaning and have a narrow focus. But long-tail keywords shouldn’t be too long. Examples include “mobile phone at lowest rate,””stylish watches for women” and so on. Although long-tail keywords do not have high search volumes, they provide other benefits for your website; there is less competition for them, they address niche audiences, and they produce higher conversion rates. Higher conversion is a natural byproduct because focused keywords provide users with highly relevant information. And your conversion rate signifies the quality of your landing page. Over time, search engines will respond to that.

Also: make sure the keywords on your Web pages and in your meta descriptions are identical.

Decide whether to target the long-tail market, use broad keywords or both.

Word Stemming

Now that we understand search volume and competition, let’s see to the other aspects of keyword research. A keyword can be any word or phrase that tells about a website and its content; it can be a noun, an adjective, a verb, etc. Word stemming is the process of using derivatives of root keywords.

Search engines use the concept of stemming to index pages; they understand the relationship between keywords and their derivatives. For example, if we search Google for “water-resistant watches,” the search results will show websites that offer waterproof watches as well because Google understands the similarity between the two terms. This is how word stemming works. Exact-match keywords definitely rank high, but Google also looks for stems and derivatives.

Long-tail keywords and phrases can also be created by using keyword modifiers. These are not word stems or derivatives; rather, they are words that modify keywords. There are different types of modifiers, such as general modifiers and money modifiers. General modifiers can be used for all kinds of websites, whereas money modifiers can be used for e-commerce websites. Adding modifiers to keywords gives them tints and shades of meaning. Modifiers can narrow the focus without removing the broad meaning of the keyword. They’re quite efficient.

General modifiers can be nouns, adjectives and verbs, but adjectives are most common—”basic,””best,””outstanding,””amazing,””fabulous,””pure” and so on. Here are a few examples of search terms that show the usage of these modifiers: “basic Photoshop tutorials,””best mobile-phone plans,” and “amazing WordPress themes.”

Examples of money modifiers include: “free,””discount,””quote,””cheap,””price,””lowest” and so on. The use of money modifiers can be seen in examples like: “free home tutoring,””cheap mobile phones,” and “men’s watch price.”

There is yet another kind of modifier, called a niche modifier. Niche modifiers, as their name indicates, have to do with the niche of a website; that is, they are purposefully specific. Searching for “tutoring,” for example, will bring certain types of results. These modifiers can sometimes be blended to create strong long-tail keywords, like “free home tutoring,””cheap car dealership” and so on. Such modifiers assist the page ranking and attract users. Terms like “amazing,””best,””free” and “discount” always attract users, and niche modifiers help users reach exact destinations.

Use root keywords to create keyword variants that are strengthened by synonyms and modifiers, and consider volume and competition. Search engines are getting smarter. Keyword stuffing doesn’t work; Web pages must make sense and serve quality content.

Related Keywords

instantShift - Related Keywords

Using related keywords is another essential part of the process. They’re valuable because search engines understand the relationships between search terms and related keywords. Following are a few ways of figuring out what terms might be related to the keywords you’ve chosen.

The first one is to analyze the search-engine results page (SERP) for a given keyword. For example, search for “shoe,” and have a look at what the search engine provides. You’ll notice that certain words pop up:”footwear,””fashion,””sport shoes,””kids’ shoes,””apparel” and the like. These are the related keywords for “shoes.”

Another way to find related keywords is to look through the search engine’s suggestions and related searches. Begin to type “Jane Austen” and Google will suggest “Jane Austen Pride and Prejudice,””Jane Austen biography,””Jane Austen Emma” and so on. These are related keywords for “Jane Austen.”Take these suggestions further by adding letters and words to the main keyword in the search box. Also look for related keywords in the “related searches” area in the bottom section of the search engine’s page. One search leads to another; follow one search term and it will lead to related ones. This is possible on all the major search engines (Google, Bing, Yahoo!).

You can also use online tools to get keyword suggestions. Here’s a list of tools provided free of cost by Google for keyword search:

  • Google AdWords keyword tool (which we’ve discussed);
  • Google Sets, which provides sets of related searches;
  • Google Trends, which lists the 100 most-used search queries of the day;
  • Google Insights for Search, which provides geographical data (as does Google Trends).

AdWords is the most popular because of its filtering options. Enter either a main keyword or a URL from which you can take ideas about related keywords. The search-volume and competition results are additional benefits of this tool.

Microsoft offers the adCenter Labs Platform, which will help you find related keywords. One of its features, Keyword Group Detection, suggests related keywords in groups. Another, Keyword Mutation Detection, reminds you of misspellings and alternative spellings.

Know the Competition

After you make a list of targeted keywords, a question will arise in your mind: will they work? To answer that, think about your users’ needs. What are they looking for? Incorporate that into your website, and it will serve as a valuable online presence.

Research your competitors’ keywords as well as your own: which keywords are they targeting? How have they ranked their keywords? How do you compare? What are you lacking? Competitor analysis tells you about the quality of product you’re competing with and helps you understand the business around you. Tools like Google Analytics and Webmaster Tools will be helpful if your website has been around for a while, but the tough work of keyword research is necessary if you’re just starting out.

Speak to Your Audience

instantShift - Speak to Your Audience

Beginners should target long-tail keywords, with which they’re most likely to find their niche. Everyone should understand their target audiences and use keywords that speak to them. For example, if you’re building a website for UK users, use British English instead of American English (“colour” instead of “color”, etc). If your website provides help with studies, then your target audience is definitely students. Use keywords like “chem help” along with “chemistry help” and “socio help” along with “sociology help” because these are the terms students use.

Conclusion

In addition to the tools I’ve mentioned, many companies provide specially designed keyword-research tools that are available online.

After you collect all keywords, related keywords, keywords variants, and broad and long-tail keywords, finalize your list (keeping in mind the search volume and the competition level). Use a search command to find pages and URLs that use these keywords. Now the first steps of keyword research are complete, and you can get on to the other SEO work. Come back to keyword research at regular intervals because the keywords of today might not be in use tomorrow. It’s an ongoing process. But you’ve taken the first steps!

How to optimize your CSS

Keeping your CSS files small and organized is very important, especially if you’re going to spend any time editing your site in the future, (or if others are gonna be using the code i.e. clients).

Helpfully, there are a number of different techniques which can be utilized to aid organization and size of your CSS files in order to make them more streamline.

Having more streamlined CSS will save you time and stress in the long run so it’s important to get it right.

Firstly, keeping a single stylesheet, normally named style.css, is a good place to start in the organization of your CSS. Having a single stylesheet for the majority (if not all) of your website keeps everything together in one place which makes the editing process more streamlined.

Code in Style

Code in Style

In order to keep your CSS files more streamline it is important to start by using a good code editor. This has a number of key benefits. As well as being easy to use, a program such as TextWrangler also color-codes different parts of code which helps in the coding progress. This is very useful for making sure that every style you have defined is spelled correctly as the style won’t change color unless it is recognized by TextWrangler as a CSS style. Tabs is another good feature of TextWrangler allowing you to keep open more than one file at a time which makes cross-checking easier.

To further streamline your CSS files it is a good idea to establish a set layout that is used throughout all your CSS stylesheets. Perhaps the most commonly used technique is to define the ID or class (using # or . respectively) then an open bracket { followed by an indented new line to begin styling, as so:

#header {
 width:500px;
 height:250px;
 }

By following this commonly used technique your stylesheet will be more organized and easier to code. The following techniques will all be aided by making sure that your layout is consistent throughout your CSS files.

Organize by Location

Organize by Location

With any site the number of CSS IDs and classes used can easily reach a large number, so it is vital that your CSS stylesheet is well organized. One of the techniques that is extremely useful is to order your IDs and Classes by where they appear on the website itself. For example; placing the CSS styling for the header towards the top of the stylesheet and the Styling for the footer towards the bottom. By keeping this consistent across all the websites you code whenever you open a stylesheet you have created you will know exactly where to look to find the style you wish to edit.

Also, to further aid organization of styles it is wise to name your elements with obvious names such as Header, Footer, Sidebar, Main Content etc., which allows you to work out what each piece of styling refers, further aiding organization. If elements change purpose, though, make sure that their names reflect the changes; having an element named Header that is at the bottom of the page can become very confusing and makes ordering by location a more daunting task.

 

CSS Comments

CSS Comments

This leads onto using CSS comments within your stylesheets. Although not always used, CSS comments to be very helpful to distinguish different parts of the stylesheet. If you have structured your stylesheets with styles relating to the header towards the top and vice versa, then you can utilise CSS comments to mark the start and end of differing sections such as the header and footer or the main content elements.

Using CSS comments is simple. Anywhere within the stylesheet start the comment with /* and then be sure to end the comment with */ . Crucially, anything within the comment, be it code or text, will not be parsed by the browser, which makes CSS comments very useful for leaving notes and descriptions relating to various parts of the stylesheet.

Perhaps a further two uses for CSS comments could be to leave comments for your clients, so should they wish to make further edits to their site in future they have a guide in place to help. Also, there may be differing styles for the same ID or class that you wish to preserve for potential use or for testing. Instead of labeling IDs and classes with a 2 at the end, e.g. header2, stopping that styling from being parsed simply wrap what would be header2 in /* and */.

As well as keeping your stylesheet more organized, as using the ‘2 technique’ can easily become messy, this technique also aids in the creation of different versions of styling within the stylesheet in an unobstructive way with ease of redeployment (copy and paste rather than changing numbers and deleting old styling).

However, whilst CSS comments are very useful it is also important to bear in mind the size and length of the stylesheet and to balance accordingly. Comments should not take up more space than the actual CSS; they should be short and to the point. It is also important to bear this in mind in relation to different versions. Do you really need all the versions you have saved within your stylesheet? Could you save a duplicate stylesheet elsewhere? Having multiple versions of styles within your stylesheet can become confusing so consideration of alternatives is crucial, such as saving duplicate files.

 

Avoid Duplication

Once the stylesheet is structured in an accessible way it can be easy to pick out unnecessary duplications within styling. Due to the nature of CSS, IDs and classes automatically inherit styling from their parent which removes the need to double up on styling. Perhaps the easiest technique is to define a number of key styles at the start of the stylesheet. Defining universal styles for links and text is helpful and removes the need to constantly define styling for every ID and class. Notably, this is also an effective way to maintain a consistent style across a website and has a positive impact on reducing the size of the stylesheet as well.

Using a tool such as Google Chrome’s Inspector, it is possible to see which styles are being inherited and from where, which further helps in the elimination of unwanted duplications within your stylesheet.

 

Use What You Need

Following on, to further streamline your CSS consider what CSS classes you are implementing. Do you need to use them all? It is easy to get carried away and define classes that you to not directly need but think you may do in future; in order to keep your CSS stylesheet streamline, small and organized only use CSS classes that are integral to your website’s functioning. Only code what is needed. In order to achieve this avoid duplicating styles, as stated, and remember to delete unused styles and those that are no longer relevant.

 

Conclusion

By following these simple techniques it is possible to create better organized and smaller CSS files that are easy to navigate and edit, both now, and in the future for yourself and your clients.