Tag Archive: css


Waves of change are currently rippling through every aspect of the Web. The iPad and other mobile devices are changing the way we access the Internet, while HTML5 and CSS3 promise to change the way we develop it. However, another storm is brewing that threatens Photoshop’s throne as the application of choice for Web design. The battle suggests a fundamental shift in the design process from Photoshop to mark-up.

A militia of designers have assembled to launch this coup. Their propaganda is convincing, and their proposed successor is worthy, capable and sexy. Their cause is important, but their manifesto is flawed.

Title-image in In Defense Of Photoshop

The Argument

The argument against Photoshop focuses on the effect of the final product. Photoshop can be used to create impeccable designs, but after hours of hard work, you end up with a static mock-up that is incapable of emulating the experience one gets when the design is converted to mark-up and viewed in the browser. HTML and CSS mock-ups require no explanation. They present the final product in the final environment. They also take full advantage of browser capabilities, such as fluid layouts, progressive enhancement and animation. These are things that Photoshop simply can’t do.

If we compare the two methodologies even closer, we find a number of other disadvantages to the Photoshop approach. For example, Photoshop’s text rendering is nothing compared that of modern Web browsers. CSS classes also make the process of updating similar elements easier than hunting down all instances within a Photoshop document. Even making certain structural changes to a website can be done more easily with CSS. Finally, I can’t overlook Photoshop’s propensity to crash, especially when opening the “Save for Web” dialog.

I admit: the benefits of mark-up are undeniable, and Photoshop doesn’t offer any of them. In fact, the mark-up generated across the entire Creative Suite is rather atrocious and unusable. Why then do I think Photoshop is still the most important Web design tool available today? The answer lies in the creative process.

Process Makes Perfect

The creative process is exactly that: a process. Clients may think we simply snap our fingers to make creative goodness flows directly from our brains to the screen, but we know better. We know that it takes hours or days of deep thought to devise the perfect solution. And if you’re anything like me, you often don’t find the perfect solution until you’ve explored a number of dead ends. Essentially, we need time and experimentation to work towards the goals of a project and determine the best way to communicate what needs to be said.

Experimentation is the key to creativity. Without it, the brain simply follows what it regards as the safest route, and the result is as mundane as the thought behind it. Most of the designers I know start all of their designs on paper: creating thumbnail sketches in order to quickly experiment with possible solutions. However, these sketches serve as jumping-off points; the design process is by no means over once the pencil is traded for mouse and keyboard.

Photoshop is vital to good Web design because it extends the process that was started on paper. It gives stakeholders a direct connection to the visuals without regard for the technical execution of the product. In other words, it accommodates visual processing. The designer is given a blank canvas—a playground for experimentation—on which anything is possible.

As designers, our medium is in a visual language. It’s a language of the subconscious, and it allows us to connect to other people through our work in ways that the spoken word cannot. Great design relies on anopen dialogue between the artist and the medium. Interfering with that dialogue only impedes the process and distorts the message.

Designing with mark-up, however, creates a disconnect with the medium. Ideas no longer flow fluidly onto the screen. They must first be translated into a language that the computer understands. Like a game of telephone, this methodology requires a great deal of interpretation, which inevitably dilutes the idea and its potency. This chain of translation introduces a latency that kills experimentation and compromises the design.

The Foreman Or The Architect

Truth is often seen clearer in extremes. So, let’s try a little thought experiment. Imagine yourself as an architect tasked with designing a large corporate skyscraper. How would you proceed? If you’re like most architects, you would start by sketching, and then work your way into AutoCAD. Eventually, you’d end up with a computer-generated 3-D model. You’d probably take it even further by constructing a small-scale model. All of this processing gives you a better feel for the project without actually building it. It’d be preposterous for the architect to go out and start welding I-beams together as part of his design process; that is the foreman’s responsibility, and construction begins only once everything has been designed.

Designing with mark-up is like welding I-beams without a blueprint. The client understands—or should understand with your help—that the mock-ups are not the final product and that this actually benefits them. They want to get an idea of what the website will look like without having the entire thing built first. It allows them to change the direction of the project before investing too much. Our responsibility is to explain the differences between the mock-up and the final product. Moral of the story: don’t play foreman when you’re the architect.

I have to agree. Any tool that is meant to translate visual elements from canvas to code will inevitably fail in the semantic realm. Computers are monolingual: they need us to make that translation. However, do we need perfectly semantic code if we’re only creating a mock-up? Why can’t we accept the reality that we’re not crafting the final product and simply spit out HTML and CSS that’s “good enough” for mock-up purposes. Once the design is approved, we’ll put on our foreman hat and begin the real construction.

Until our paradigm is rocked by some killer new app, Photoshop will reign as the best tool for designing websites. Although it doesn’t currently speak to our medium the way we wish it did, it proves itself priceless when it comes to the process of designing. Photoshop is a virtual playground of experimentation; dropping it from the process only prevents your design from being fully developed. So, before you switch to the mark-up methodology, understand that you’re sacrificing creativity for a few browser capabilities, which could be explained to clients anyway. For the sake of your client, creativity and work, stick with Photoshop.

When you’re designing websites for a global audience, you need to be aware of cultural differences that will affect the way they are viewed in different parts of the world. You cannot expect the exact same website to be well-received around the globe. You need to adapt your websites to allow for cultural differences and make sure they are equally effective in whichever region you are targeting.

Take your web content global

Content is the most important part of any website. The old saying ‘content is king’ still rings true. There are three main factors you need to consider with regards to your content:

It must be relevant and useful to your target audience. By ensuring that your content is well-written and relevant, you will not only be maintaining quality, but you will also ensure that it can be more effectively translated into other languages.

You need to make sure it is as universally understandable as possible. With 79% of web users not speaking English as their native language, at some point you are going to have to get your content translated if you want your websites to be truly accessible across different cultures. The best way of achieving this is to use a professional translator, but if your budget is tight, you may also consider an online machine translation tool, like Google Translate.

It should be appropriate across many cultures. This applies especially to visual content – you should be aware that some images may be perfectly acceptable in western cultures, but could be offensive in other parts of the world. For example, pictures of scantily-clad models may cause offence in some countries. Even a simple image of someone relaxing with their feet up, which is perfectly OK in most parts of the world, may cause offence in Thailand, where it is unacceptable to show the soles of the feet.

Keywords in a Foreign Language

Even if you decide to use an online translation service to translate the bulk of your website’s content, you should not rely on this method of translation for your keywords. Nor should you use direct dictionary translations. Your keywords are too important to entrust them to these methods of translation – they are just not accurate enough.

To ensure your search engine optimisation (SEO) and pay-per-click (PPC) campaigns are successful in other languages, you need to work with a professional translator to develop a good list of foreign-language keywords. This will save you a great deal of time and money in the long run, because you can be sure that you are targeting the keywords that people are using to search for your product in any market – there’s no point in building a great website if no one can find it.

CSS spans language barriers

Make sure to use CSS as your design tool when building your website, because by doing so, you are keeping the content separate from the design. This makes it far easier to develop versions of your website in different languages – it’s a simple matter of substituting the different translated text into your pre-existing CSS templates. You should also use Unicode UTF-8 character encoding because it is compatible with the widest range of language scripts.

Planning the layout for a global design

You can improve the cross-cultural accessibility of your website by carefully considering its design and layout. One of the main issues here is the fact that not all languages are read from left-to-right. This can impact on the usability of side navigation and sidebar content. For example, a left-hand navigation structure may not be very convenient for someone who reads from right-to-left.

The same principle applies to the theory that the eye is naturally drawn to the top-left area of a web page. For an Arabic reader, it may be the top-right. You can avoid usability issues with your navigation structure by employing a horizontal top navigation, which will be more universally usable.

Choosing colours for a cross-cultural audience

Colour is a very important part of web design, as it can affect the way your websites are perceived by different cultures. Most designers are aware of colour theory, which tells us that different colours can have different psychological effects on the people viewing them, and that the psychological impact of colour is strongly influenced by cultural factors. Put simply, colours mean different things to different people depending on their cultural viewpoint.

For example, in Islamic countries green usually has an important religious significance, whereas in Western cultures it may be more suggestive of environmental issues. In Korea, a name written in red indicates that the person is dead. You should examine your use of colour carefully to ensure you don’t make any cultural faux pas.

Put simply, cross-cultural web design is about being aware of the possible pitfalls highlighted here, and ensuring your websites are accessible to as many cultures as possible, a sensible move to take considering the increased internationalisation of the internet.

With more than 120 million blogs in existence, how do people find YOUR content on the Internet? The key starts with great search engine optimization (SEO), which is an art and a science that helps search engines discover your content and understand how relevant it is to specific search queries.

You can blog your heart out, but if you don’t have good SEO, then odds are you won’t have many readers.  Luckily, the WordPress (WordPress) plugin community values SEO and has developed a number of plugins to help. Here are 20 of the best SEO plugins to help you choose the right tags, tell search robots what to work on, optimize your post titles and more.

20 Best WordPress addons

20 Best WordPress addons

All in One SEO Pack – One of the most popular plugins ever for WordPress, this plugin does a bit of everything for you from helping choose the best post title and keywords, to helping you avoid duplicate content and more.

Automatic SEO Links – Automatic SEO Links allows you to choose a word or phrase for automatic linking, both internal and external, set anchor text, choose if it should be “nofollow” or not, and more.  One of the best features of this plugin is that it will only do this for the first occurrence of a word in a post so you don’t have to worry about spamming your post with numerous links to the same thing.

Google XML Sitemaps – An essential tool in any blogger’s armory of SEO tools.  While the name only mentions “Google (Google),” this plugin creates an XML-sitemap that can be read by Ask, MSN and Yahoo also.

HeadSpace2 – This plugin allows you to install all sorts of meta-data, add specific JavaScript and CSS to pages, suggests tags for your posts and a whole lot more.

Meta Robots WordPress plugin – An easy solution for adding robot metadata to any page you choose on your blog.  You can use it to make your front page links into “nofollows,” prevent indexing of search pages, disable author and date-based archives, prevent indexing of your login page and numerous other features.

Nofollow Case by Case – This plugin allows you to strip the “nofollow” command from your comments, and then you can apply it to only the comments you don’t wish to support.

Platinum SEO Plugin – The Platinum SEO Plugin offers you such features as automatic 301 redirects for permalink changes, auto-generation of META tags, post slug optimization, help in avoiding duplicate content and a host of other features.

Redirection – For any number of reasons you sometimes need to move a page from one spot on your blog to another, but then you risk losing that page’s status in search results.  Redirection helps you with your 301 redirects, captures a log of 404s so you can work on correcting them, sets up an RSS feed for errors and more.

SEO Blogroll – Do you worry that the people you link to in your blogroll are feeding off of your PageRank?  With SEO Blogroll you can make separate sections for various groupings of links, with an unlimited number in each, and all of them will receive the “nofollow” attribute.

SEO for Paged Comments – With the introduction of paged comments in WordPress 2.7, there was a potential problem with search engines thinking you had duplicate content as the post would appear on each page.  This plugin aims to take care of this issue for you until the folks at WordPress change things up.

SEO friendly and HTML valid subheadings – Some themes for WordPress will confuse your sub-header tags based on the page they are to be displayed on, but this plugin will automatically reset them to make them more SEO friendly by moving them down one spot in the hierarchical tree.  In other words, h2 becomes h3, h3 becomes h4 and so on.

SEO Friendly Images – Images can be a great source of traffic as people search for images of various subjects, and this plugin helps you with making sure that you have “alt” and “title” tags on all of your images so that the search engines can properly index them.

SEO No Duplicate WordPress Plugin – If you must have duplicate content on your site for whatever reason, SEO No Duplicate will allow you to state which version of the post search engines should index while ignoring the others.

SEO Post Link – The post slug is the blog title you see in a browser’s URL bar, and if it’s too long, search engines won’t take a liking to it.  SEO Post Link comes with an already populated list of words to cut from a title when it turns into a URL to make your post addresses that much friendlier.  You can set it so that it’s limited to a certain number of characters, cut short words, cut unnecessary words and more.

SEO Smart Links – Interlinking your blog can be the key to getting more people to read more of your posts, but it is time consuming and tedious to do it by hand.  SEO Smart Links does this for you automatically when you tell it what words to link to what URLs, and it also allows you to set “nofollow” and “open in window” comands for the links.

SEO Tag Cloud Widget – Love ‘em or hate ‘em, a lot of people use tag clouds on their blogs.  Since their inception they have been fairly unreadable by search engines, but with this plugin they will be converted to an SEO-friendly HTML markup that can be indexed.

SEO Title Tag – Your tags are an important part of your site for making sure that search engines know where to place your posts, and SEO Title Tag focuses exclusively on this.  Unlike some other plugins, and WordPress itself, this extension will allow you to add tags to your pages, your main page and even any URL anywhere on your site.

SEO Title Tags

SEO Title Tags

Simple Tags – An extremely popular plugin that focuses on helping you choose the best tags for your posts by offering suggestions, auto-completion of tags as you type, an AJAX admin interface, mass tag editing and a whole lot more.

Sitemap Generator – This is a more customizable sitemap generator than most with options to support multi-level categories and pages, category/page exclusion, permalink support, choices on what to display, options to show number of comments and more.

TGFI.net SEO WordPress Plugin – This particular plugin will do most of the usual SEO work of optimizing titles and keywords, but it adds a unique twist as it is mainly directed at people who use WordPress as a CMS.