10 Essential Web Skills

9/19/2012 1:09:50 AM

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.

Description: Description: MySQL

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.

Description: Description: JavaScript

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.

Description: Description: php

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.

Description: FireFox

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.

Description: SEO and SEM

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.

Description: Opera software

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. 

Top 10
3 Tips for Maintaining Your Cell Phone Battery (part 2) - Discharge Smart, Use Smart
3 Tips for Maintaining Your Cell Phone Battery (part 1) - Charge Smart
OPEL MERIVA : Making a grand entrance
FORD MONDEO 2.0 ECOBOOST : Modern Mondeo
BMW 650i COUPE : Sexy retooling of BMW's 6-series
BMW 120d; M135i - Finely tuned
PHP Tutorials : Storing Images in MySQL with PHP (part 2) - Creating the HTML, Inserting the Image into MySQL
PHP Tutorials : Storing Images in MySQL with PHP (part 1) - Why store binary files in MySQL using PHP?
Java Tutorials : Nested For Loop (part 2) - Program to create a Two-Dimensional Array
Java Tutorials : Nested For Loop (part 1)
- First look: Apple Watch

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 1)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 2)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 3)
Popular Tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS