Web Design For Beginnersの Web Design For Beginners 7th Edition の目次

The Internet is ubiquitous across so many aspects of our lives that it’s difficult to imagine living without it. As a platform for consuming media, connecting with others and discovering new ideas and information, the web is unparalleled, and as such web design is a more prevalent and more important skill than ever. While some may be deterred by the seeming complexity of the web design process, first timers will find this newly revised edition of Web Design for Beginners to be an essential handbook. Spelling out all the basics, it will teach you how to use HTML and CSS to create and style your website, before honing the user experience with more advanced techniques. You will also discover how to use Photoshop to produce graphics, SEO to get your…

Blogs and social media websites are now an integral part of the online experience for many people. WordPress and Twitter are synonymous with web publishing and micro-blogging. WordPress has become the most popular web publishing platform because it is freely available, websites using it can be either self-hosted or hosted on wordpress.com, and it has a whole selection of supporting tools and themes. WordPress is the power behind millions of websites, it is easy to install, even for newcomers, and easy to customise and navigate around. There are thousands of themes on the market, which can instantly give a website a completely new appearance with a single click. There is also a vast array of plug-ins that allow users to add special widgets that perform specific tasks, for example adding…

Smartphones and tablets are now as much part of the web browsing experience as the desktop. With the adoption of mobile devices comes a new set of resolutions and rules for web designers. Smartphones typically have a screen width of 320 pixels in portrait mode and 480 pixels in landscape mode. Tablets are a more diverse bunch, but as a typical example, the iPad has a width of 768 pixels in portrait and 1024 pixels in landscape. Desktops vary from 1024 pixels up to around 1900 pixels. The variation in sizes demonstrates the issue of designing for mobile and desktop. One option is to build a mobile-specific version of a desktop website, but this not only adds to the workflow of a designer but also adds to the development cost…

In this tutorial we’ll make an HTML5 layout for a simple webpage. While initially HTML may look confusing, there’s a relatively small amount of code that you'll need to remember. There are a few basic building blocks such as <div> which you will find yourself using regularly, then others such as <caption> which you will use much less often. If you have made pages before in the past using HTML4 then you should feel at home, just be aware of the new tags. If you've not written any HTML before then good news, as it’s now easier to understand! HTML5 has added in a lot of new elements which help the browser interpret the layout of the page easier. <header> and <footer> are two examples, and describe common top and…

A n HTML page is made up of a series of tags that tell the web browser what to display and where. The main building block of a page is a div tag, short for division. If you look at a newspaper page, you will see that text is grouped together in columns. Images with captions are also together with a margin around them. A div in HTML is similar to this, and it’s usual to group together content in a similar way. While HTML5 has added a few new tags with more semantic names such as ‘header’ and ‘footer’, the main body of most pages is still constructed using divs. There is no limit on how many divs you have within a page and most webpages you visit online…

One of the biggest headaches over the past decade, at least for web designers, has been the differences in the way browsers render CSS. The original idea was that CSS would be rendered in a standard way, regardless of what software a user had. Browsers that didn’t support CSS would simply ignore it, but those that understood style sheets would display content in a predictable, consistent manner. The issues started almost as soon as CSS was introduced, however, with different browser vendors implementing their own understanding of the standards, leading to wildly different representations of a design according to which browser a visitor to a website used. The most well-known example of this was the box-model problem where two browser vendors disagreed over whether padding should be applied to an…

When you’re designing a webpage, you have to remember that a browser window can be almost any shape and size. Desktop computers have a wide range of screen sizes, and mobile phone and tablets are used to browse the web too. Your nicely designed page could be ruined if you simply allow it to flow into the browser window, regardless of the latter’s size or shape. By creating a wrapper you can specify the width of the webpage content and its position in the browser window. It is an essential part of the design process. A ’wrapper’ is a commonly used name for a piece of CSS code that is used with a div tag to size and position the content of a webpage. A div tag is placed at…

Website navigation is an important topic and it is something that you need to put some thought into as you are designing your website. At one time we would have used button images created in a paint or photo program and then used JavaScript to create a rollover effect when the mouse hovered over one. But that’s yesterday’s technology and modern sites use CSS instead. A CSS navigation bar looks like a regular unordered list in the HTML of the page, but using CSS we can manipulate the list elements and turn them into the website’s navigation. Instead of the list running down the page, the list elements can be displayed across it instead. We can style the links just like any other text and create a custom look for…

Having clean and clear header for your website can be the difference between a successful and user-friendly experience and a cluttered and disorganised website that no one will want to visit again. You don’t want a firsttime user coming to your site and not know how your navigation works, or your company branding and logo hidden under a load of useless graphics or text – it doesn’t even really matter how effective the rest of your layout is. Yes, this sort of thing has been known to happen (more often that web designers would like to admit), that is why so many designers are turning to a relatively new role called user experience or ‘UX’. In this tutorial we will take a look at how we can create a simple,…

In the past, the humble footer was not much more than a slim strip of colour with nothing more interesting than the copyright text written within. But in many modern websites, we have seen a huge improvement in footer designs and the content held within them. These days, they are a lot higher and contain all sorts of content, which can include contact forms, newsletter sign-up fields, social media integration and much more. Ours for instance, in addition to a newsletter sign-up field and generic About Us text, features another set of links for navigation, so our readers don’t have to scroll back to the top or to the sidebar if they want visit another page. As crazy as it sounds (and this would have sounded incredibly crazy no more…

If you’re blog is already running WordPress, ensure your database is backed up before you do anything else. Then sign into the Dashboard, find the notification informing you that WordPress 4.0 is available, this will be displayed across the top of the page. Click the link to begin the upgrade process. This will be the same whenever there is any new update available for you to install. After the update completes, you’ll be presented with the new Dashboard page. Before proceeding make sure you check your plugins and themes for any available updates to ensure full compatibility with the new version of the blog software. It might be that some plugins may need to be disabled until the developers release compatible updates. Similarly, there is a chance that you will…

One key addition to WordPress 4.0 is an improvement to the Media Library. It is now possible to view a larger-resolution version of an uploaded image and make the necessary changes with ease. Improvements in how your images are handled in the Edit screen, Media>Library>{Select your image}>Edit Image, meanwhile allow you to make and save edits without worrying whether or not the changes you make will be applied. Although it isn’t advisable to edit images on the server of a busy website, sometimes it cannot be avoided, if so, we would advise that your image editing takes place on your computer or tablet. You can also add a new title for the image, set a caption to be displayed when it is embedded in a post as well as display…

If you run a blog that is targeted at a foreign country, and have a team of bloggers who speak the language of that region, then it might be a wise strategy to ensure that they can use WordPress effectively. The best way to do this is to set up the blog software using their preferred language, which is now an option when you install WordPress 4.0 onto a new server. You may already be familiar with the WordPress installation screen, which you are presented with as you open your domain name in your browser after uploading the latest unzipped version of the blog software, we will explain how to do so over the next few pages. Setting your preferred language is the first option here. If you’re used to…

How do you use WordPress? For most, it is a case of sign in, scramble around looking for the link or feature you’re looking for on the Dashboard or New Post page, write your post, and then logout. With the addition of more and more plugins over time, this process can become increasingly slow. The reason for this is simple: you’re not using WordPress right. Using the Screen Options button, available at the top of almost every admin screen in the Dashboard, you can customise the blogging software’s back-end to see only what you need. For instance, you’ve installed several plugins to your WordPress 4.0 blog, and the Dashboard is beginning to look a bit cluttered. All you need to do in this situation is open the Screen Options box…

In this tutorial we are going make some small changes to the settings of our theme. So from a fresh install, log in to the admin panel and within the dashboard you will see the Settings Panel on the bottom left. The Settings panel should be the first place we come to once our initial installation has been done because there are certain things that need to be set up from the very start. In here we have seven options that we can make changes to: General, Writing, Reading, Discussion, Media, Privacy and Permalink. However, we only really need to make small adjustments to a few of these settings and some are more important than others, like the Permalink settings. So, let’s take it from the top and make the…

It almost goes without saying that good images are a crucial part of any blog – yours or anyone else’s. Even if your site is not particularly visually oriented, you’re not running a photography business for example, a well-chosen image displayed on the front page of the blog is second only to post titles in encouraging visitors to click through to read your content. Images can also be used to help pace the reader by breaking up longer posts, transforming large swathes of text into more digestible chunks. If you want to drive traffic onto your blog and keep it there, then you need to make it look good – textonly pages will drive people away, and that’s the last thing that you want to happen. Adding images to posts…

Creating posts in WordPress entails writing content that is interesting and engaging. This may be a daunting prospect but you’re not just limited to text. WordPress includes the facility to embed media within posts. This means you can place images, music, videos and more in a post to help bring your blog to life. Don’t worry if you don’t have any content of your own to begin with. You can embed content from other online sources. Think of it as creating a web link to something on another website. This linked content will then play from within your WordPress blog. You can embed content from services such as Vine, Tumblr and SoundCloud to name but a few. In earlier versions of WordPress embedding content was a more technical task. It…

A Google Sitemap is important for a variety of reasons. Firstly, it tells Google how your site is structured and ensures that the search provider is aware of every page present on your site. This provides for new sites with lots of varied content, making sure they are properly structured in the Google mechanism, not to mention the site itself. As a result, the chances of search results coming your way are much more favourable. In fact, a sitemap is more important for new sites because Google is less likely to be aware of the extent of your website's content if you are yet to establish external links from other sites; this can spell a long road ahead towards gaining recognition from the biggest search provider of all. A sitemap…

What are they? Style Tiles are the invention of Samantha Warren, who compared them to “the paint chips and fabric swatches an interior designer gets approval on before designing a room”. They consist of styles for specific design elements, including fonts, colours and UI elements that together portray a brand’s visual language for the web. They are great for starting and progressing discussion between designers and clients about the visual direction they want and can be extremely useful in establishing the basic aesthetics for a site design. Creating Style Tiles helps to avoid the ‘do four Photoshop mockups of different webpages’ stage of the design process, which often just ends up wasting time and provides very little of any use. Using Style Tiles, the designer and the client can nail…

Typography has always been something of a problem for Photoshop. Font rendering has never been the software’s strong suit and this can become a problem when you’re designing for the web. There’s more and more emphasis, these days, on typography for the web. With print designers moving into the digital world en masse, a new importance has been placed on type and fonts in web design. Photoshop has always struggled with rendering fonts and its Type tool is clunky and leaves much to be desired. The biggest problem is that, with new webfont-only subscriptions, you can’t see what the fonts will look like when you’re mocking up designs in Photoshop. There’s nothing worse than getting a design to the web and realising your chosen font clashes horribly with the design.…

Background images are an essential part of designing a website, so being able to create a tiled image – one that repeats without seams – is especially important. After all you don’t know how long your pages will be. We can find inspiration all around us for repeat patterns, whether it’s a bee’s honeycomb, parquet flooring or some vintage wallpaper. While it’s true to say that styles and fashions come and go, often at an alarming rate, there are those that are always fashionable – timeless designs that work whatever the era. ‘Vintage’ suggests age, refinement, sophistication and experience. In this tutorial we’re going to create a classic fleur-de-lys in Photoshop. We’ll start from a sketch and work this up into a fantastic vintage wallpaper tile, which will repeat…

RED OR DEAD Red is one of the hardest colours to work with, but can also be one of the most memorable when done correctly. Coca-Cola are a testament to that. Think carefully before selecting red for your designs though, and consider specifically what type of red. Try it out on several types of screen. It’s not the easiest colour to work with in print, nor read from, but if done well it can create a look of high energy and excitement. PRIMARY’S COOL... When handled with care and consideration, the vibrancy of the primary colours – red, blue and yellow – can create an impactful and powerful look. Think Google and ebay for great examples of where this has worked well. The bright, contrasting colours mean everything else has…

Navigation menus are vital to the success of any website. The navigation menu on a website is like a road sign on a street or a level directory in a shopping centre. You can’t decide on your destination without knowing all of the options available to you, and reaching that destination would be impossible without first knowing where you are. Just like in real life, navigation in web design is very important and plays a major role in a website’s usability, as well as in the user experience. Nowadays you can see plenty of different types of navigation menus with interesting, creative and unusual designs. In this tutorial, we will look at how we can develop a simple and clean navigation menu. The menu will expand horizontally and, when closed,…

The web made its debut back in 1991, adding a graphical user interface to the internet. As such, web design was born. In its infancy, web design was heavily restricted by technology and hardware, with a web presence being little more than black text on a white background. Thankfully, technology and web design have reached a far more creative and imaginative stage in their evolutions. Skipping past frames, tables and animated GIFs, web design has become far more sophisticated and will continue to grow and develop. Look back a couple of years and take note of what was ‘on trend’ and how the underlying infrastructure helped shape a website. The progression of web design has always gone hand-in-hand with technology, and technology never takes a backward step, which in turn…

Websites by their very nature are made up of a few constituent parts that are arranged in a manner to suit the content. Typical websites are either two- or three-column layouts with a header and footer. What sets sites apart is the imagination and variations used in the construction of the constituent parts. Characteristically, the header of a website appears at the top of the page, the footer at the bottom of a page and the main content in between. Background images or colour will be used to create a canvas for the page. This applies to the best and worst of websites found on the web. Take a look at your favourite site and it is almost guaranteed to fit into the standard type of template. The key to…

Writing code, typically HTML and CSS, is nothing more than a collection of alphanumeric characters, so nothing more complicated than a text editor is enough for creating code. Notepad (PC) and TextEdit (Mac) are free text editors that are perfectly capable of producing code, but they offer no assistance in the way you write it. So, a plain text editor is really for the more experienced coder. However, while beginners and newcomers may struggle with the language to begin with, this approach will reap rich rewards down the line. Mastering HTML and CSS via handcoding will mean that clean, semantic and lightweight code will be the eventual outcome. Beyond the plain text editor, the next steps you’ll need to conquer are the HTML editors. These are more specific text editors…

While links may seem like a simple element to add to a webpage, they are the key building blocks of the entire internet. Imagine having to type a different address into the browser for every single page you wanted to visit on the web! Similar to pages within a book, separate webpages within a website help to break up content by topic or purpose. Then, by adding in a navigation bar or something similar to your site, it means that visitors will be able to quickly move to the content that they are interested in. Links are also one of the most important elements that Google and other search engines use to find and index your site. The kind of content that you link out to, and the kind of…

HTML and CSS essentially allow for a huge range of freedom when designing your pages, but there are a few layout principles that have developed over the years which it’s a good idea to follow. If you have a quick look at some of your favourite sites on the internet it’s quite likely that they will use a column layout, akin to a newspaper. A common layout for a site is to have the site or company logo at the top of the page, then have a column down the left for navigation or links, a main content section in the centre, and then a sidebar on the right with supplementary information or Facebook and Twitter feeds. This is then commonly rounded off with a site-wide footer containing copyright information,…

Every webpage contains text and it is frequently the main content. You should therefore ensure that it looks good by choosing the fonts and styles to fit your design and the image you want to portray. There might only be a small amount of text if the main content focuses on images, but even so, there will be titles, links and captions. There's no getting away from text on webpages. You can add CSS code to a webpage to define how the text is displayed, but placing it in a separate .css file and linking to it in the page's head section means that the same text styles are applied everywhere in your site. HTML font tags have been replaced by CSS font-family definitions, old-fashioned <i> and <b> tags are…

A webpage would be pretty dull without any images on it. Some images may appear on every page, such as a graphical website logo or heading, while others may be specific to each page. You will need to create the images for your site before you start. Remember to use them sparingly and keep the file size as small as possible to ensure that your webpages load quickly. If you’re having trouble, we will go into further detail later in the book. Images are inserted into webpages using the HTML <img> tag, and there are attributes to position it left and right, set the size and so on, but those are dated. If you use CSS to format images instead, there are many more options available to you. For example,…

A sidebar is without doubt the area that is most often created by web designers because it’s the most needed. It can hold all sorts of content: things such as extra navigation links, a search field and perhaps some small thumbnail images that relate to your website – it can be anything. So in this tutorial we’re going to create a simple page layout that has a functional navigation and a nice and simple sidebar that includes some content within. We’re going to include within the sidebar a list of links for that extra navigation we mentioned and a search bar above and also some thumbnail images at the bottom to act as though we have a Flickr section – very useful for any photographybased sites. So open up your…

WordPress 4.0 includes a selection of new features and security fixes to help bring your blog or website right up to date. Not only have improvements been made to the theme customiser view and media library interface to enhanced media handling in the visual posting view and a brand new interface for installing plugins, you’ll also find changes to the TinyMCE UI when creating a new post. It is now even possible to select a language when you install WordPress 4.0 for the first time. Enhancements to managing images and videos helps to save time with previews, while browsing for new plugins has become a far better experience, allowing you to see small previews of the plugins. In the background, various security fixes have been made, ensuring that your blog,…

Improvements to the way in which you compose posts in WordPress 4.0 can be a benefit to new bloggers and those using WordPress as the publishing system for their top-rated, busy website. At a glance, there are very few differences with the previous version of WordPress, but these improvements have been gradual over the past couple of years, and as such are more secure and stable here. In the Add New Post screen you’ll still find the title box, the option to edit the Permalink, which is a vital tool in your SEO strategy, and an option to add images using the Add Media button. You may also prefer to view all of the available buttons in the TinyMCE text editor, which is possible by simply using Toolbar Toggle. A…

Top tip Intelligent resizing rearranges the left and right menus to fit above and below the editing box, enabling you to edit your blog on smaller devices. One great way to attract readers and ensure they hang around is to embed clips from video sharing services into your posts. A new feature in WordPress 4.0 offers a refined method of viewing these video clips. In the previous versions of WordPress an embedded video was represented by a big grey block, which provided a useful guide to the size and positioning of the clip. After updating to WordPress 4.0 the software will display the video preview in your draft post just as you would see it on the site it originates from, YouTube or WordPress.tv for example. You will no longer…

WordPress 4.0 features a few improvements to the Theme Customizer, which can be accessed in Appearance>Customize. Previously this was limited to simply changing colours and the site title, now it is a far more powerful tool that can demonstrate the impact of any installed widgets on your chosen blog theme, as long as it is compatible with live widget previews, before you have installed it. The advantage of this is clear. Where once you would have added a widget, saved it and then quickly refreshed your blog – probably in a new browser tab – to see how it looked and whether or not it had altered your blog layout now you can get a full preview in the Theme Customizer before rolling out the changes to your readers. We…

WordPress has become synonymous with the term blog, and with good reason. The web publishing platform is free to download, easy to install and simple to use. Add into this already appealing mix the fact that there are continual updates and development, swathes of themes and literally thousands and thousands of add-ons and it’s hard to see what’s not to like. WordPress itself comes in two distinct flavours: either hosted via www.wordpress.com or selfhosted via www.wordpress.org, as we explained earlier. In this tutorial we are focusing on the selfhosting option, which relates to users who already own a domain name and web space. The WordPress site extols the virtues of its famous 'five-minute installation’ and undoubtedly WordPress can be installed in five minutes, when you know what you are doing.…

One of WordPress’s many strengths is its simplicity, and the Dashboard is an area where this simplicity truly shines. Offering everything you need right from the get-go, you can quickly get on with the actual work of editing and posting to your site without distraction. As well as a side panel that offers navigation, the Dashboard is made up of modules. These are small widgets that provide you with information from various portions of your site, such as comments and links. As with most elements of WordPress, the Dashboard is customisable so you can set it up exactly as you wish and position the most important elements within easy reach. Over the following nine steps we will show you how to determine which modules are shown on your Dashboard, where…

WordPress is designed in such a way that creating a new post for your blog is as simple as typing it in. You won’t, however, always get your blog appearance or text just how you want it on your first try. What's more, if you’ve got a news-based site or content that's timesensitive, you might need to update a post with new information as it becomes available. You may even find you simply need to go back and correct a typo. Thankfully, this is not a challenging task. A WordPress blog is a dynamic site where nothing is ever fixed and final, and every word and image can be tweaked and adjusted until you are 100 per cent happy. In this tutorial we will guide you through the various ways…

When Google crawls your site it will use a number of indicators to assess its relevance and then index it according to its perceived value. The content of your website is one of the clearest signposts for Google to work out what keywords and phrases your website should be ranking for, so it is crucial to get this section of your SEO strategy right. What does Google consider to be good content? Recent Google updates have indicated that thin content pages with little or no relevant content are not likely to be ranked as highly as websites with more substantial, well-written content. Blog posts, interactive animations, videos and infographics are just some of the many ways in which you can engage your audience and drive traffic to your website. Written…

Understanding the metrics behind your website is fundamental to being able to affect how the search engines rank your site. You can use Google Analytics to help inform you on how your current website content is performing and where your website’s traffic is coming from. It can also be used to help you define the next thing you should be improving or adding to your site. A page with a high bounce rate equates to low interest from a user perspective and is going to harm your rankings in the long term. Now this could be down to poor content on your page, but equally it could be down to the low relevance of a site linking to your content. If they came looking for skateboards and all you have…

SEO (search engine optimisation) is not a feature that you may be aware of when first setting up a new website, but understanding how it works can make the biggest difference of all to ensuring that you drive as much traffic to your site as possible. The quality of your website’s content must always be paramount, of course; but no matter how good the quality, you still need to make sure that your website stands out and competes against the millions of other sites that are also trying to attract the same visitors. There is no guaranteed way to ensure lots of traffic, but to not make use of SEO techniques is probably to ensure that your new site takes a long time to get off the ground, with the…

With the development of HTML5 and CSS3, ‘designing in the browser’ has become common practice. Photoshop has taken a back seat for most web designers, as better standards and new technologies have allowed for more creative freedom when working with code. With the ability to create gradients, round corners, drop shadows and more with ease in CSS, it sometimes feels like Photoshop’s bloated feature set is steadily becoming obsolete. However, a new movement has started, bringing Photoshop back into the web design fold and repurposing its powerful tools for brainstorming sketching and wireframing. Many designers have criticised designing in the browser for what Andy Budd (CEO at Clearleft) described as, a lack of “even the most rudimentary tools, like the ability to draw lines or irregular objects through direct manipulation”.…

Once you’ve finished with all of the prototyping stages, it’s time to take your designs to the browser. But what’s the best way to go about translating from Photoshop to CSS? Once you’ve done your sketches, created your Style Tiles and developed your element collages, it’s time to take the visual elements you have established and translate them to web. In the past this was a difficult enough operation. You would create a huge bitmap in Photoshop, slice it up and reassemble it online. It could be painstaking and things often didn’t turn out as planned. Then came CSS3 and implementing Photoshop style effects in the browser, without the use of images, became a reality. That being said, it can still be difficult to get the exact look you had…

Let’s not forget that Photoshop will always be essential for some tasks, like creating icons, banners and images. But when the code can’t cut it, what are the best ways for you to get your assets online? Even with all these tools and tips for effectively combining Photoshop and code, there will always be jobs that CSS and HTML can’t handle. If you need to create any kind of bitmap image or element, Photoshop will always be the fallback. You can continue creating designs in Photoshop as usual but remember that, although you’ll be exporting assets in bitmap format, you should utilise the vector tools as much as possible so that revising designs isn’t a hassle. Slicing up designs with Adobe’s ‘Save for Web’ option has always been long-winded. These…

Have you ever browsed the web and come across a website that has a really beautiful header? Do you wish you had something equally stunning sitting at the top of your website? Having a unique, memorable identity on the web can be the difference between a user remembering your site and the same user instantly forgetting it. The most important rule on the web is to ensure your site has great content that compels return visits, but, given the choice, most people would also like their site to look nice. Of course this can present a challenge, especially if you feel you’re lacking inspiration, artistic ability, or both. Fortunately, you don’t really need either! Some basic Photoshop techniques can be used to take a very simple concept and make it…

In the golden age of the web that we’re experiencing now, we’re spoiled for choice when it comes to colour. There are more options available to us than we can physically determine (16,777,216 to be precise) and it’s all too easy to forget that, once upon a time, a mere 216 colours had to suffice. This is owing to the fact that computers themselves only supported 256 colours, and in order to create a standardised method for displaying colour, this handful of just 216 were selected. But despite today’s increase to over 16 million, the principle for creating and displaying colours on the web remains the same as it has always been – through a mix of just three basic colours: red, green and blue. Each has 256 shades that…

Who owns red? Who owns orange? Who owns purple? Reaching a stage where your brand is recognised through colour alone is a testament to how effective a marketing tool it is. But there’s more to colour selection than something that looks nice on packaging, TV adverts and magazines. Finding the right colour is not an easy task and is something of an art form for many brands – not to mention a major commitment. Let’s look at easyJet, which is a great example thanks to its easily recognisable branding. They arrived and turned the air travel industry upside down with their no-frills cheaper way to fly. It was a simplistic, bold move, and they needed a bold colour to convey their message of value and efficiency – who else could…

ADOBE KULER Over the years, the designer’s sidekick, Kuler (pronounced ‘colour’), has gone from behemoth flash website to nimble HTML5 application, plugging directly into various Adobe desktop apps. A crowd-sourced platform for thousands of colour palettes searchable by phrase, it also provides a wide variety of options (or “Color Rule”) for creating your own unique palette. There may only be five colours to choose from at any one time, but you can explore the most popular palettes and find inspiration. The beauty of using the Kuler app is the variety and intensity of colour that it can provide. If you are on the lookout for a palette that will provide a winning collection of colours, this is undoubtedly a tool you need in your creative arsenal. What’s more, it gets…

HTML and CSS are the key components for building web pages and sites – without them the web as we know it simply would not exist. In a nutshell, HTML provides the building blocks and structure while CSS provides the styling. HTML is made up of a whole host of tags which all have their own identity. These consist of an opening and closing tag with all the relevant content in between. For example, ‘<header>web page content goes here</header>’. HTML defines a whole series of tags, for example header, nav, footer, video, etc, which all have a semantic title making them easy to identify. Custom tags, or div tags as they are known, are created when a standard HTML tag cannot be used. Again these have their own individual identities.…

There are effectively three tools needed for the construction of a website. A knowledge of HTML and CSS, an HTML editor and a graphics editor. Sounds simple and in essence it is, but finding the right tool that suits requirements and personality is important. The first, most important tool is a HTML editor, and there are hundreds of choices available, free and paid for (see What’s the best software on page 19). CSS is another text-based language and a text editor would suffice, but again a good knowledge of the language is needed. A good alternative is a CSS editor such as Rapid CSS (www. blumentals.net/rapidcss) or TopStyle (www.svanas.dynip.com/topstyle/index.html). A graphics editor is crucial for any web designer and the popular choice is Photoshop. This is a great package but…

The majority of web pages are made up of one or more files that are downloaded to a computer, which in turn are interpreted by a web browser and finally rendered out to screen. At its simplest, a web page is a plain text file that contains special instructions about what kind of content is contained within. These instructions are written in HTML – the language used on the world wide web. HTML, or HyperText Markup Language to give it the full name, is the core building block of a web page. HTML is a markup-based, human-readable language that’s designed to be simple to write, and easy to understand. A markup language is one where bits of data are literally marked as being of a particular type. So, for example,…

The <h1> tag is one of six different heading tags (ranging from <h1> to <h6>). This signifies the most important piece of information on your page, or in the section, and is akin to a chapter name or book title. The <p> tag has to be the most common in use on the web. It marks up a piece of text as being a paragraph. Individual paragraphs can also be grouped into articles with another tag as you will soon see… The <article> tag is brand new to HTML5. This handy tag enables you to mark a set of content as being part of one story. An article can contain many heading, paragraphs, images and other assets. The <section> tag is also new to HTML5 and allows you to mark…

Lists are an effective way of presenting important information in a way that’s quick and easy for your audience to read and digest. They are also a good method for giving a brief overview or introduction of the content to follow, helping your users find what it is they are looking for. Coding up a list in HTML is quick and very straightforward, and once you’ve got the hang of the basics you can start to apply your own styles using CSS to make them really stand out from the crowd, which we’ll come to later. There are two main types of lists in HTML: ordered and unordered. An ordered list starts at one and then increases. This is useful when you need to prioritise certain entries and give…

Cascading Style Sheets, commonly abbreviated to CSS, is a language used for describing how HTML should be presented. CSS documents provide all the format, colour, positioning and other characteristics of a design that you will see on virtually any webpage. Originally introduced alongside HTML4, the language was designed to separate the structure of a document from the presentation, improving the control of a design for web designers. CSS also helped to improve accessibility of web pages, reduce HTML code complexity and crucially the amount of repetition of markup that had to be created to describe how a page should look. As well as these benefits, the separation of form and function allows different designs to be displayed to users according to their device, simply by providing a different style sheet.…

background The background property allows designers to assign a colour and background image to an element. As well as the image itself, the position of the image in the element and how the image repeats are configurable. font-family The font-family property is the method through which all the different fonts used on a web page are designated. In the past web designers were forced to stick to a small set of ‘web safe’ fonts, but in recent years great advances have been made in providing webenabled fonts on demand through a style sheet. colour The colour property sets the foreground colour of any element which has a foreground. Most commonly this is text, although certain other elements also support colour. If colour doesn’t work, most probably you actually should be…

Although some web pages may require a lot of text, it is generally best to keep it brief and to the point. People scan a page for interesting content and then move on if they don’t spot anything straight away. Lists are therefore very useful for drawing the visitor’s attention to some content and for presenting it in a way that can be digested quickly. The HTML <ol>and tags are used to create ordered (numbered) and unordered (bullet) lists. They are useful if unexciting, but with CSS list-styletype you can change the bullet to different shapes like a circle or square. It is even possible to replace it with an image that's specially created to fit in with your site’s design and colour scheme using list-style-image. You can change the…

Using HTML and CSS to create and style a two-column website layout – one of the most common layouts – is surprisingly straightforward and very flexible. Almost all websites today use some kind of column layout with at least a sidebar and main content areas. So it’s one of the basic skills to have when designing websites, and once you understand these fundamentals you can move on to bigger and more elaborate designs. In this tutorial, we are going to open up our favourite text editor (we will be using Adobe Dreamweaver, but the humble NotePad or TextEdit is fine) and learn how we can shorten, lengthen and swap any column we need just by using CSS. Then we will discuss CSS floats, why we use percentages and a few…

Adding content to your website is either done dynamically using a content management system (CMS) or by hand. Either way, you are going to have to learn how it’s styled and what options you have. For instance, will you have just text or text with images? How about a video that’s either embedded using YouTube’s, or your own flash or HTML5 player? Of course your choices should be dependent on what niche your website caters for and thus knowing who will be visiting your website. So in this tutorial, we will add a few elements of content where one will include a video (which you can grab whatever video you want, you don’t have to use our one) and also some text and an image. So open up the index.html…

At first glance the Dashboard may not seem all that different in WordPress 4.0, but on closer inspection you should spot the Welcome panel, where a collection of shortcuts can be found. This panel is ideal for newcomers to WordPress because it provides shortcuts for adding widgets, installing a new theme, writing a new post and adding an about page, as well as managing widgets and menus, turning comments on and off and more. If you’re a more experienced user then the panel can be dismissed. Also available to you on the Dashboard is the At a Glance panel, your blog’s comments Activity, the Quick Draft box and the WordPress News, which is useful for spotting when new updates are imminent. These are all customisable as they were before, you…

Top tip When checking new plugins, always view the screenshots. If the developer believes in the plugin, they will take time to upload screenshots. Installing plugins can be a stressful experience. After backing-up your database and files, you then need to ensure the plugin you’re about to install is the best option for your blog. You may run it on a test blog first to make sure that there are no inadvertent side-effects. With WordPress 4.0, the developers Automattic have introduced a new user interface that will alleviate some of the stress by presenting available plugins with a use preview that gives more information than was previously available to you. Now when you open the Plugins>Add New screen, you will be presented with a selection of Featured plugins, while a…

Getting a WordPress blog up and running is much simpler than you might think. Once you've completed the initial installation process, getting a post online takes a matter of minutes. The foundation of any blog is its posts, and getting these right is paramount to a successful, informative and compelling blog. So ensure you have carefully considered every detail before you get going. It is worth noting that the styling of a blog post is predetermined to a certain extent by the current theme. Nevertheless, the Posts window provides enough ammunition to ensure your posts are well presented and neatly styled. First things first: the title is perhaps the most important element of any blog post, so make sure it's relevant and appealing. Next is the text; again make this…

One of the greatest things about WordPress is the way it takes care of things quickly and easily that would take an experienced designer/developer a while to achieve otherwise. It just makes things easy, and the Featured Image option is no exception. The basic idea behind the Featured Image function is that many bloggers, on their homepages, want to display an image that is associated with a post. However, implementing this has always been a bit tricky. Previously, users had to take advantage of custom fields, which would allow users to specify additional information relating to a post. In this case, that additional information is the location of a thumbnail image. So since the introduction of version 3.0, the user simply uploads a single image, designates it as a featured…

It is easy to type in a block of text, but it won’t look very exciting to your visitors and it will be hard to read. We have looked at breaking text up into paragraphs, alignment and so on, so now let’s move on to more exciting things like bullet points and numbered lists. A series of bullet points is a great way to emphasise features, functions, items and important things. Make them short and snappy and readers can quickly scan them to get the information they need. Numbered lists are useful too and you don’t even need to type in the numbers because WordPress does it for you. All you need to do is type the first one and click the toolbar button. You can then add as many…

Sessions The best way to improve organic sessions is via rankings. If your site appears first in the SERPs, there is a likely CTR (click through rate) of around 33%. The importance of rankings is shown by analysing the CTR of a result in tenth position, which averages about 2%. There are many ways to increase a website’s ranking for any individual term. The most common – and arguably most effective – method is creating content and getting links with that search term in mind. Page load speed Page load times are now a significant factor in Google’s ranking algorithm. Use free tools like Google PageSpeed to identify where you need to spend the time. Once you have identified the pages with the problems and which elements need attention, you…

No matter how much effort you put in to a website or how great your content is, you need to understand what your audience is looking at and what they are interested in to keep growing your site. You can use web services that claim to understand your traffic, but by far the most recognised service is Google Analytics. It can show you, in great detail, which parts of your site are successful and which parts require extra effort to receive attention from the masses. You can monitor all aspects of your site, from social networking impact to the number of people visiting on mobile devices, and more general statistics including visitor numbers and when they visit. The basic Google Analytics service is free and includes all of the features…

Page Layers www.pagelayers.com Page Layers is a nifty little app that converts webpages into layered Photoshop files. You can open and edit entire webpages as PSDs, perfect for late stage editing. 960 grid 960.gs The 960 grid is a simple but effective grid system that comes with PSD and CSS templates to translate your perfectly proportioned site to the web with ease. Web Font plug-in bit.ly/1qen6lt Web Font Plug-in is a handy tool that lets you use Google Fonts in Photoshop, meaning you won’t have any nasty surprises when you move from PSD to CSS. Pixel Dropr pixeldropr.com Pixel Dropr lets you create libraries of various UI elements and images and instantly drop them into Photoshop as you’re working. It’s a great tool for prototyping. Cut&Slice me www.cutandslice.me Cut&Slice allows…

CSS3Ps css3ps.com CSS3Ps is a totally free Photoshop plugin that’s been around since long before the built-in PS to CSS3 functionality. With the extension installed, the functionality all sits inside a neat little window. All you have to do is select a layer group and then click the CSS3Ps logo to start the process. Due to the nature of the software being free, you’re forced to wait 20 seconds and look at an ad, but that’s a small price to pay for such great functionality. CSS3Ps takes you to a page with your code, ready to copy and paste. Something to note is that this plugin ignores positioning, so you’ll need to fix that later. CSS HAT csshat.com Unlike CSS3Ps, CSS Hat will set you back $30. Still, for the…

Over the last few years a ‘less is more’ aesthetic has taken root in web design practice and presentation. At present, the use of text rather than images to create initial impact on a website is becoming more and more widespread. The old slide shows are being replaced with bold, stark fonts and plenty of white space. There has also been, however, the re-emergence of the font as an image in its own right. This technique is predominantly being used as an artistic element rather than a simple means to deliver language and communicate a specific textual message. For this reason, typography has become a far more creative endeavour in web design than it has been in many years. Here we will explore just one way of turning text into…

In addition to the recent trends in web design towards typo graphics, there has also been a shift in the use of images. As broadband speeds increase and web delivery methods refine, it’s no longer detrimental to the load-time of a website if it‘s heavy with large images. This enables imagery to be used as part of more interactive elements, such as navigation links. CSS now provides a wealth of possibilities to animate, embellish and enhance online imagery, and turn your images into interactive elements. In this tutorial, we will look at the process behind creating an image grid, complete with CSS hover effects and animated captions. It’ll be easy for you to animate your webpage, making it more beautiful and interactive. “There has also been a shift in the…

The problem with descriptive language is that the addition or omission of a single word, or even a comma, can give a completely different meaning to the message being communicated. Creative design can use this flaw in language to emphasise the difference between one meaning and another. In our example, we use the text ‘I am not invincible’ with animation to emphasise the omission of ‘not’, thereby changing the meaning of the sentence. This effect has been used to good advantage on the McClaren agency website to emphasise the agency’s excellence. This tutorial shows how standard CSS without support from JavaScript can be used to redefine the standard <strike> tag to present an animated strikethrough effect. The advantage of this approach is how it can be applied to websites containing…