We
reveal the skills required to create outstanding websites
Today the
web abounds with attractive, high-quality, professional-looking websites. Yet
creating such sites requires a surprising number of skills - skills that aren't
limited to technical knowledge and prowess, but extend into many other areas
including user-focused design, self-organization, and business acumen and
market awareness.
In this
article, I'll describe the top ten web skills needed to create great-looking,
content-rich, audience-centric websites that top the search engine ranking
charts.
1. HTML
And CSS
Hyper-Text
Markup Language (HTML) is the language of the web. At its heart, every web page
has an HTML core, regardless of how many other languages and elements are also
involved. Fortunately, it's easy to get started and the basics can be learned
over a weekend. Even with just a handful of HTML tags (<h1>, <b>,
<div>, <a> and <img>, for example), you can start to create
web pages.
The latest
HTML incarnation, version 5, is supported by every popular browser, regardless
of whether it's hosted on a PC, tablet or smartphone. Version 5 has built-in
multimedia support with <video> and <audio> tags. HTML5 also introduces
the powerful <canvas> element, which can render graphical shapes and
bitmaps, a catalyst for the ever-growing collection of sophisticated
browser-based games.
The
Cascading Style Sheet (CSS) language is an ideal companion to HTML. While HTML
is primarily concerned with basic page structure and content, CSS is all about
presentation. Analyze the code behind any modern web page and you'll see it has
a heavy reliance on styles.
The
fine-grained levels of control over page layout, element appearance and subtle
effects found in the latest CSS3 empowers your creative side. Using CSS results
in simpler, tidier and easier-to-manage HTML pages. In fact, it's not unusual
for websites to have far more CSS code than HTML. And, as CSS is another
tag-based markup language, once again it's easy to learn.
Many visual
editors and tools shield you from viewing the raw HTML and CSS code behind
every web page. This is a shame, because acquiring even a moderate amount of
knowledge and expertise in these languages ensures you can take full control of
your website. In addition, with HT and CSS skills, you'll be able to take full
advantage of the huge collection of web-hosted and book-based code samples,
tricks and tips.
2. JavaScript
And Ajax
JavaScript
has been synonymous with browser-based development since the late 1990s. Unlike
HTML or CSS, it's a complete programming language, able to tackle virtually any
coding challenge. An interpreted scripting language with a Java-like syntax,
JavaScript was specifically designed to add web page features that cannot be
done using HTML and CSS alone.
Whether
it's interactive pop-ups, smoothly scrolling slideshows, animated cartoons,
data field validations or cookie creation and management, JavaScript code
provides the solution. Modern web browsers use advanced just-in-time (JIT)
compilation to deliver extremely fast execution speeds. This speed, combined
with HTML5's <canvas> tag, enables JavaScript developers to create
sophisticated 2D and 3D web-hosted games.
A key
element in modern web page technology is a feature that enables the content to
be updated without reloading the whole web page. This tactic banishes the
rather annoying flashing effect you get on older-style pages. Using a technique
called Ajax, JavaScript code is able to obtain data from the server, then use
this information to dynamically populate certain HTML elements - elements that
might, for example, display the latest news headlines, a series of adverts or
notifications of new tweets and emails.
Becoming a
proficient JavaScript coder will take a little longer than with HTML and CSS. However,
once acquired, it's a skill that opens up many opportunities, and not just
web-oriented ones. Various development frameworks enable JavaScript developer
code to generate Microsoft Windows, Apple Mac OS X and Linux applications, plus
Apple iOS and Google Android apps.
3. PHP
And SQL
PHP code
executes on a web server, rather than in a browser. Designed specifically for
website development, PHP is much easier to learn than alternative server-based
languages such as Perl or Java.
With a rich
library of web-friendly functionality and built-in support for databases, it's
an ideal choice for many data-centric operations, including handling logins,
storing user preferences and all manner of e-commerce functionality. PHP
statements can generate complete web pages or update specific sections of a
page. The source code can either be embedded inside the HTML files or located
in a collection of separate '.php' files.
It's
possible to lever the power of PHP by using one of the many template-oriented
PHP frameworks. Using a template-based approach simplifies the creation of web
pages by lowering the learning curve and allows the developer to focus on
design and content. Drupal is one widely used and highly popular example of a
template-based product. Nevertheless, I'd still recommend acquiring some basic
PHP skills so you can tweak the design and page layouts to suit your particular
needs.
Websites
typically need to store data in some sort of persistent repository. This data
is retrieved at a future time - for example, when a customer returns to your
site. While it's possible to store simple items in a text file, most websites
use a database.
An SQL
database will store data in tables, each one designed for a specific purpose.
For example, a customer address table would hold each line of the address, plus
the postcode and country. A customer may have multiple address entries; say for
home, work and package deliveries, each being stored in a separate table row.
SQL uses English-like statements to create tables, add or modify data and
perform queries - for example 'create', 'insert', 'update' and 'select'.
The
open-source MySQL database has become the de facto standard for web hosting
packages, but there are plenty of alternatives including the free,
small-footprint and platform-independent SQLite product.
4. Web
Server Administration
Server
administration is a large and potentially daunting area. Luckily you'll only
need to know a few basic skills to get started. These include an ability to
transfer pages, images and code files to and from the hosting server, change
some configuration settings and take backups.
It's not as
difficult as it might sound. The vast majority of web hosting packages provide
a browser-based administration tool. These tools typically cover the most
common activities, and some support user-friendly drag-and-drop interfaces.
Many website owners find there's no need to go any further.
Nevertheless,
the ability to gain command-level access to your site's server and its
collection of files and folders is a useful skill to acquire. For example, the
file transfer (FTP) application is simple to learn and runs on all platforms.
It can transfer files between individual machines and across the internet. The
more administration skills you have at your fingertips, the greater control you
can exert.
5. Image Management
Images are a critical ingredient to
great-looking websites. A typical site will use numerous images in a wide range
of sizes and styles. Not all image files are the same; there are many different
formats, each with their own virtues and compromises.
Today, we have access to an assortment of
professional-grade image manipulation products and tools, both free and
commercial. The ever popular Adobe Photoshop product range has many fans: fans
who have generated a wealth of web-located tutorials, in both written and video
formats. However, there are many free alternatives, including the equally
powerful GIMP editing tool (the latest 2.8 version is rated extremely highly).
At the very least, your chosen software should
be able to crop, scale, rotate, resize and adjust the color balance of an
image, then save it to a variety of image formats. Applying advanced techniques
such as color fades and tints, rounded edges and shadows, blurs and soften
effects, masks and layers will add a touch of class and individuality to your
page banners and inline images.
6. Audience Empathy
You might consider empathy to be a rather
peculiar skill for website creation, but that's not the case at all.
Establishing an empathy with your prospective audience is at least as important
as any technical prowess.
Any successful website will have a target
audience in mind. It could be aimed at business people, sports-minded
individuals, technology experts, bookworms or those with a social media addiction.
Delivering a website with plenty of frequently updated, audience-specific
content will give them reason to return to your site time and time again.
An empathic perspective enables you to
determine who these people are and what makes them tick. The trick is to
understand what's likely to grab their attention and, just as importantly, what
will turn them off. In effect you're attempting to detach yourself from the
website technicalities and try to think like a visitor who's assessing the site
for the first time.
There are many questions to ask. As a
visitor, can you rapidly determine what the site is about? Which elements
immediately grab your attention? Is the content relevant, fresh and topical?
Does the flow and navigation appear intuitive and consistent? The more
questions you ask, the better your assessment will be, and the more appropriate
changes you can deliver.
7. Page Design
A good eye for design is another important
skill. Regardless of the content, no web surfer will stay long on a website
with messy layouts, clashing colors, difficult to read fonts and inappropriate
images.
As you'd expect, audience empathy is key. A
bright, bold design that works for one audience might be an instant turnoff for
another. Equally, delivering a straight-to-the-point, business-like format
might not be lively enough for some.
Visualizing the complete site experience is
essential. Once a reasonably complete design is in your head or sketched out,
it's easier to harness the tools and languages at your disposal and bring it to
life. Many designers prefer to work with advanced, graphical interface tools.
Such tools allow them to concentrate on the visual, layout and flow aspects of
the design, without getting bogged down in HTML or CSS specifics.
Adobe's range of tools is a firm favorite
with many designers, even though the price may be prohibitive to some. However,
there are plenty of free and open source alternatives, and while it may take a
little time to build a collection that suits your needs, you'll learn a great
deal about the mechanics and nuances of website design in the process.
Design is an ongoing process. Whether it's
through your own new ideas, audience feedback or access to the latest
techniques and technologies, there's always room for improvement, innovation
and subtle refinement.
8. SEO and SEM
Achieving a high search engine ranking
doesn't happen by accident. It requires an in-depth knowledge of your chosen
domain or marketplace and its customers. The more research you perform, the
better you'll be able to target your site's content, links and advertisements.
Search engine optimization (SEO) and
marketing (SEM) expertise takes competitive advantage of this research to boost
the website's search ranking and connect with your chosen audience. By taking a
user's perspective, you can identify the search keywords and phrases they're
likely to enter and the content they'll want to see. So, once again, audience
empathy is an essential element.
However, it's not just about your own
pages. SEO effort must also be employed to ensure the site is integrated into
the web as a whole. This 'off-site' optimization concentrates on in-bound links
from other relevant and popular sites. In the battle to raise your profile and
reach the top of search rankings, it's this off-site optimization that has the
most effect.
To assist with your SEO and SEM research,
you'll need informative analytical tools that monitor your audience figures,
show search keywords, collate page hit statistics and expose how visitors found
your site. Google provides free SEO tools, including Google Analytics and
AdWords. A quick web search will uncover scores of free and commercial
alternatives.
9. Project Management
Self-motivation and drive is all well and
good, but it's easy to become swamped by a mountain of important and urgent
tasks. With so many design, development, research and marketing activities to
coordinate, priorities and monitor, applying even a few project management
techniques can make all the difference.
It isn't necessary to own a sophisticated
tool or attend a training course. A simple prioritized list approach will work
well enough. Even better, why not record each new activity on a separate card
or Post-It note. It's a fast way to capture a fleeting thought or idea, and
offers a simple way to reorganize the task list.
The trick is to allocate a short period
each day to review and maintain this task list.
10. Patience And Perseverance
Creating a great website isn't a
five-minute activity. The best sites have pages and pages of interesting,
informative, captivating and topical content, all interlinked into a cohesive,
easy-to-navigate experience. Building such a collection takes many months of
creative effort. Even then there's no time to rest, because the appeal of a
static, unchanging website will soon dwindle.
A lively, topical, frequently refreshed
website will entice visitors to return time and time again to discover what new
content has been posted. Even spending just 15 minutes a day to update and refine
your pages will give you the edge on most of your competitors.
Of course, at times, building a great
website can seem a little daunting to even the most patient and committed
person. One way to provide encouragement is to keep reviewing search engine statistics.
Noting how the audience grows as the website content expands in quantity and
quality is a sure-fire way to increase motivation.
