NE W
Free 90 minutes of video tutorials
Web Design
Eleventh edition
Digital Edition
Design and create your own website
Master HTML & CSS Get to grips with SEO
Customise your website Make the most of WordPress
Contents Build a site 22 An introduction to HTML 28 Create a basic layout 30 Code a link 32 Create lists in your website 34 Learn to use div tags 36 Create a three-column layout 40 A n introduction to CSS 46 Centre your page 48 D efine text & heading styles 50 Style your lists to stand out 52 T urn lists into navigation bars 54 Format images using CSS 56 Create a header 60 Create a sidebar 64 Add content to your website 68 Add content to your footer
6 Web Design for Beginners
Essential guide to web design page 8 WordPress 72 WordPress: A new era 78 D ownload, install and set up a self-hosted site 82 View and organise WordPress dashboard modules 84 Create a WordPress blog 88 Edit your WordPress blog posts 92 Post images into your blog 96 Embed external media in your WordPress posts 100 Add special features to text
Understanding SEO 104 The science of SEO 112 How to strip back SEO to boost your rankings 116 Use Google Analytics to understand your audience 120 Create a Google sitemap for easier searching
116
Master your site’s audience
Glossary
“Promote your work for all to see”
Understand web designer terms page 172
Photoshop & Graphics 124 New ways to work with Photoshop 130 Create great backgrounds 134 Design header and footer graphics in Photoshop 134 Create a bright, neon text effect
124 New
Photoshop top tips
Customise your site 160
Monetise your new website
144 The perception of colour 150 Make an expanding navigation menu 154 Get background colour to match content 158 Develop a three-step animated web form 162 Create email newsletters and let people subscribe 164 Add social media buttons Add Twitter Cards to your site 166 168 Code contemporary CSS text Web Design for Beginners 7
Build a site 22 An introduction to HTML
Get to know HyperText Markup Language
22
36
Master HTML
Tweak layouts
40
54
28 Create a basic layout
Use HTML to code your very first layout
30 Code a link
Learn how to put different pages together
32 C reate lists in your website Ordered or unordered – your choice!
34 Learn about div tags One of the most important tags there is
36 Create a three-column layout Take the next step with a three-column page
Learn CSS
Add an image
40 A n introduction to CSS
Learn about how to make your site stand out
46 Centre your page
Get more control with wrappers
48 Define text & heading styles Use CSS rules to add some style
50 Style your lists to stand out Spice up boring lists with CSS
52 Turn lists into navigation bars Create your first navigation bar
54 Format images using CSS Add drop shadows and more
56 Create a header Make it clean, clear and effective
60 Create a sidebar
Produce a navigation system to be proud of
64 Add content to the main area How to add what people want to see
68 Add content to your footer Make the most of an underrated feature
20 Web Design for Beginners
“HTML is the core building block of a web page – it's the first thing you should learn” What you’ll learn
Throughout the Build a site section you’ll be learning how to code your first webpage using HTML and CSS, all in preparation to get it on the internet. The coding tutorials work with popular layouts such as two-column and three-column, while our introductory guides to HTML and CSS teach you about some of the popular tags and properties and how they are used. So, what are you waiting for? Get building your site today.
64
Add content
Effective header
Create a clean and clear header with our tutorial
great content
Add the meat to your website with our guide inside
sidebar
Learn how you can not only create but use a sidebar to its full potential
Web Design for Beginners 21
Build a site Style. CSS Android landscape 320 x 240
40 Web Design for Beginners
Android portrait 240 x 320
www.wesmokeanything.co.uk (pictured here) is an exceptionally stylish website
imac landscape 2560 x 1440
Kindle landscape 1024 x 600
iPad landscape 1024 x 768
Visit www. responsinator. com to see how websites are styled on different devices
New Andriod landscape 515 x 295 Android landscape 515 x 295
New Andriod landscape 515 x 295 Android portrait 295 x 515 iphone landscape 480 x 320
An introduction to If HTML provides the structure for a website, CSS provides the form. This is the language that will make your site stand out
C
ascading 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. This means that, for example, a mobile phone can load the same webpage as a desktop browser, but present the content within the page in a different manner. Similarly, CSS can be used to present page content one way on screen and a second when printed, or to provide direction to screen reader software over areas for emphasis. Additionally, CSS is user-configurable, so while the designer might specify that text should be shown in 18pt red Arial, the visitor to their site can load their own style sheet to show the text in 12pt blue Times instead, should they wish to. As you can see, CSS offers a great deal of flexibility
by design. To fully understand what it’s capable of, we need to look a bit more at what CSS is, why and how it came about, and examine how the implementation of the language works across different web browsers.
The cascading bit
CSS is designed to use a priority scheme that determines how styles should be applied to HTML elements. The cascading bit of the language name refers to how this scheme works. Broadly, styles are applied in chronological order, but also according to specificity. If a style property is declared more than once for a particular element, the last chronological declaration will be used, unless the earlier declaration was more specific about the elements it should apply to than the latter. This sounds really confusing, but in practice it allows you to apply a set of broad styles that provide basic properties for the font that text should be rendered in, for example, and use more specific selectors to subsequently set the size, colour or font weight. To help make sense of it all, let’s take a look at what CSS looks like in code.
CSS syntax
Just like HTML, CSS is designed to be humanreadable in its raw form. English keywords are used with a simple syntax to describe a list of rules, style properties and style values. Each rule in a style sheet is defined by means of a selector,
CSS which identifies the HTML elements the rule should apply to. Within the rule, a series of properties and values are defined so that the visual characteristics for an element are built up property by property. Let’s take a quick look at an example: 001 h1 { 002 font-family: sans-serif; 003 font-weight: 004 font-size: 18pt; 005 color: 006 margin: 10px; 007 }
arial, helvetica, bold; red;
In the code above we’ve defined the rule using the h1 { } selector. This specifies that the style properties within should apply to all <h1> tags found on the page. Within the curly brackets we define a series of properties, such as font-family, font-size etc, and the values we’d like to set for each. As a result, every heading 1 on our page
Web Design for Beginners 41
WordPress Speed up WordPress
WordPress SEO
Disabling responsive
Add Google Analytics
When a visitor lands on your website, you only have a few seconds to grab their attention. However a sluggish website can test a visitorâ&#x20AC;&#x2122;s patience There are things you can do to ensure you WordPress website loads faster. You can select a reliable and optimised-for-speed hosting provider, as well as a WordPress theme or framework that is built for speed. Then you can reduce the number of plug-ins and remove any unwanted ones. Also use a caching plug-in like W3 Total Cache and a Content Delivery Network. Finally ensure all images are optimised, this can be achieved with plug-ins such as EWWW Image Optimiser.
Having an amazing looking website is no good if you have no visitors. An essential part of building traffic is SEO. Optimising your WordPress website starts with writing quality content that people want to naturally share. Also provide social media sharing buttons so readers can help promote your content, and ensure that your WordPress theme is responsive and mobile-friendly. Speed is also crucial so make sure your website loads fast and you can use an SEO-optimised theme and SEO plugin to give you a boost. To identify which parts of the website is under performing and to keep track of visitors, use analytics such as Google Analytics.
If you would prefer not to use responsive images in WordPress 4.4 and want to use your own image solution, you can disable it globally by adding this code below your functions.php file: remove_filter( 'the_content', 'wp_ make_content_images_responsive' ); You will most likely want to disable the srcset attribute as well, so all of the images will only have a src attribute as it did previously. function disable_srcset( $sources ) { return false; } add_filter( 'wp_calculate_image_ srcset', 'disable_srcset' );
Tracking visitors and understanding how your website is performing on a regular basis is important. There are a few methods to adding Google Analytics to WordPress. You can use a Google Analytics plug-in or simply copy and paste the Google Analytics tracking code directly into the header. php right before the closing </head> tag. The best practice though is to add it into the functions.php: <?php add_action('wp_head', 'add_ google_analytics'); function add_google_analytics() { ?> // Paste your Google Analytics code here <?php } ?>
Mega: a multipurpose WordPress theme Mega is a WordPress theme from the good people at wopethemes. It can be purchased from themeforest (https://themeforest.net). It is a fully fledged multipurpose theme, jampacked with features. It includes a super page builder, over 100 options, advance theme options, multiple layouts, unlimited colours and more.
Multipurpose You can use the Mega WordPress theme for a multitude of purposes. Mega can be set up as a standard website, a creative studio, agency, startup, portfolio and even an online shop for selling goods
Super page builder Mega comes with a lightweight drag-and-drop page builder interface. This makes creating content efficient and faster. You can select from an unlimited amount of layouts and support for over 600 fonts
74 Web Design for Beginners
Myriad elements This WordPress theme comes packed with 29 elements including accordions, buttons, social media icons, gallery, contact forms, callouts and multiple columns that are fully customisable with over 100 options
Advance Theme Options Mega provides an Advance Theme Options Panel. This gives users great customisability over the theme. You can select from almost an unlimited typography, colour schemes, heading styles and much more
Retina ready There is no need to optimise images for Retina-display devices. Mega comes Retina-display ready. This means images will instantly look sharp and clear on mobile devices including on iPhone, iPad and MacBooks
Adding Google Fonts Google Fonts offer hundreds of free fonts. Head to google.com/fonts, select a font and embed it. Use a plug-in to do this or add Google Fonts to WordPress by enqueuing the font in functions.php: function wpb_add_google_fonts() { wp_enqueue_style( 'wpb-googlefonts', 'http://fonts.googleapis.com/ css?family=Open+Sans:300italic,400 italic,700italic,400,700,300', false ); } This will add Google Fonts to the front-end, editor and ensure compatibility with different languages. add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );
Bulan bit.ly/1L2Mu3T Bulan is a professional free WordPress blogging theme. It is perfect for serious bloggers. Besides being beautifully designed it also comes with features for you to easily customise.
The Voux http://bit. ly/1GqU5dK Voux is perfect for any online magazine, journalism or fashion-based website. This WordPress theme comes with Visual Composer, social media sharing and more.
Customise Post Editor Remove admin The WordPress post editor uses toolbar TinyMCE a web-based WYSIWYG editor. By default many of the TinyMCE buttons are actually hidden. Enable them by adding the code on FileSilo into functions.php: function enable_more_ buttons($buttons) { $buttons[] = 'fontselect'; $buttons[] = 'fontsizeselect'; $buttons[] = 'styleselect'; $buttons[] = 'backcolor'; $buttons[] = 'newdocument'; $buttons[] = 'cut'; $buttons[] = 'copy'; $buttons[] = 'charmap'; ...
IThe WordPress admin toolbar contains quick links and can be useful at times. But it can be distracting at times and in the way whilst viewing the front-end website. You can in fact disable this by simply going to the WordPress Dashboard, heading over to Users>Your Profile and deselecting â&#x20AC;&#x2DC;Show Toolbar when viewing siteâ&#x20AC;&#x2122;. If you want to permanently remove this globally you can add the following code snippet into the functions.php: add_filter('show_admin_bar', '__return_false'); This will completely stop the toolbar from showing. Alternatively as always there is a plug-in that accomplishes this.
Increase engagement Encouraging visitors to return and increasing readership will create a swarm of returning traffic and engagement with your visitors. There are a variety of methods to increase the engagement with your visitors. Firstly you could set up a mailing list, have visitors sign up to newsletters and regularly send them email updates. You can achieve this by using MailChimp and its plugin (en-gb. wordpress.org/plugins/mailchimpfor-wp). Followed by using the Bloom eMail Opt-In plugin (elegantthemes.com/ plugins/bloom). This plug-in will automatically open up a pop-up with an email sign up form to increase signups.
Parallax One Plus bit.ly/2gguqxr Parallax is a clean and elegant WordPress theme for multipurpose use. It comes with full-width parallax header, a onepage layout and is WooCommerce ready.
Origin elegantthemes.com/ gallery/origin The Origin is a stunning grid-based WordPress theme. This theme is ideal for photographers or any image-heavy type website. This theme has fully powered ePanel theme options.
Web Design for Beginners 75
Understanding SEO Google Panda and Penguin
Investing in high-quality content is more than worth it in the long run
Have you been hit by Panda or Penguin? Learn which update could be affecting your website
Are you sure your content is up to scratch?
Creating quality content is the cornerstone of SEO success. Get this part right, and you’re creating a solid foundation for your website 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 content, however, is still one of the most important ranking factors for Google.
Tips for producing content that Google loves:
Engage your audience: Create content that reads naturally, but don’t be too scared to mention your keywords. Engage your reader by creating original, unique content that offers real value. For content ideas, consider what the current questions, issues and debates are within your niche. Be unique: Don’t copy what other people are doing. Write about something that your audience will be genuinely interested in and that is unique to your website. This is the best way to make your website stand out. Produce high quality content: If you are outsourcing content cheaply, don’t expect it to be unique or engaging for your audience. Investing in well-written content by an expert is always a good idea, or if you know the subject well, why not write about it yourself? Content needs to be accessible: Don’t hide away key sections of your website on pages that people can’t easily navigate to. Allow people to easily navigate to your key content pages and present the content in a way that will provide real value to the user.
Write for people, not for search engines: This has been said many times by many people, and that’s because it is true. How can you engage an audience with something that Use a text browser such as Lynx to mentions your keyword see your site as a search engine every third word? Write spider would do. If features such as Javascript, frames or Flash stop you what people would want from viewing your site in a text to read rather than what browser, then the spiders you think Google wants. may have trouble
See how Google views your site
crawling it.
108 Web Design for Beginners
Google’s Panda and Penguin updates are algorithms put in place to ensure users are displayed the most relevant high quality results when they use Google. They penalise websites that operate against Google’s guidelines by reducing their rankings, thus improving the quality of search results. Depending on the level of offense committed, a site can potentially be completely removed from the SERPs (search engine results pages). The difference between the two are the areas they target. Penguin targets low quality links pointing towards a site. Historically a lot of SEO agencies have adopted quick win tactics through purchasing links, often in bulk, to boost rankings. This has resulted in a large number of sites receiving penalties since Penguin’s release in 2012. Google’s Panda algorithm targets sites that
Use keywords appropriately: Use the phrases and keywords that your audience uses. Don’t be tempted to overuse certain keywords, but at the same time, don’t be too scared to mention them at all. You will find it very hard to rank for a term or phrase if you don’t even mention these terms on your site.
provide low quality, scraped/duplicated and spun content. It aims to lower the rankings of these sites, while allowing sites with helpful, high quality content to be seen higher up in search results. If you suspect your site has been affected by Penguin or Panda, there are many timelines of Google updates online. By analysing your Google Analytics you can mirror traffic drops to Google updates to see if they’re due to Penguin or Panda.
Ten mistakes to avoid Building a technically sound website is vital for any successful SEO campaign. Here are ten of the most basic mistakes to avoid 01 No sitemap
06 Poor Metadata
A sitemap is an XML file that feeds data to search engines about a website’s most important pages such as the date of the last update and the importance of a page compared to others. All of this allows its spider to crawl the site more intelligently and economically. Although creating a sitemap can’t solely guarantee search engine success, it is certainly a quick win and relatively easy to implement.
Title tags are still regarded as one of the most significant influences for on-site SEO success. This is the first thing the user sees on search result pages, so it should be unique, succinct (70 characters max) and keyword optimised according to the content subject matter of the page. Meta descriptions are also important as they are essentially an opportunity to entice the user to click through to the page in the form of an ad copy.
02 Failed canonical domain check
07 Keyword stuffing
When a domain fails a canonical check, this implies that the home page is accessible through more than one URL. For example, webdesignermag.co.uk/ index.php, webdesignermag.co.uk/home.php and webdesignermag.co.uk all load the home page. Having multiple URLs load identical content is a problem because inbound link equity can become divided and it diminishes the overall SEO site value. Some solutions to this would be to either implement the correct canonical tags or have 301 redirects pointing the duplicate pages to only one location.
Ensuring that a fine balance of target keywords is incorporated into the body of a page is a challenging feat for any copywriter. Too much and the page appearing spammy is a risk, but too little and the search engine may have trouble understanding what to rank for. The solution is to use a good range of targeted synonyms presented in a well-written structure that will engage the reader.
03 Slow loading times
Having duplicate pages within a website is a common mistake that usually occurs on larger sites or eCommerce sites with lots of product listings, resulting in detrimental consequences if not handled properly. Common instances of duplication can occur where filters are applied to product listings or where several minor variations of a product exist. A solution to this is to use a canonical tag to point the duplicated pages to the corresponding main pages – essentially having one page gaining all the SEO value.
Although broadband speeds in the UK are improving, Google announced in 2010 that loading times are included in their algorithm, with slow loading times for desktops and mobiles still being a problem. Using Google’s PageSpeed Insights tool, any page can be analysed – identifying reasons behind and solutions for slow speeds. Common solutions include eliminating render-blocking JavaScript and CSS above-the-fold, leveraging browser caching, optimising images, enabling compression and minifying JavaScript, CSS and HTML (which means removing any unnecessary spaces).
04 No header tags Header tags such as <h1>, <h2> and <h3> give content its structure and help the search engines understand which parts are important. Search engines use header tags to prioritise a page’s content, so incorrect use can result in confusion. The solution is to ensure that the main <h1> tag is unique and accurately incorporates the topic of the page, including relevant keywords. Likewise, any following subheadings should use <h2> and <h3> tags where applicable.
08 Duplicate content
09 Links from non-credible sources Inbound links are considered the most important offsite factor in determining natural ranking success, with the quality of the link source being at the forefront. The most influential links come from authoritative websites within the same industry, with the linking page containing content relevant to the target page. Although acquiring links from quality sites is challenging, one link from an authoritative site can have a more positive effect on rankings than a few hundred links from non-credible sources.
05 Missing Alt attribute
10 Generic internal anchor text links
Search engines cannot understand images, so it is imperative to attach descriptive and relevant text in the form of an Alt attribute. This allows the search engine to fully understand the image and is an opportunity to add relevancy and keyword rich descriptions to the page. One common mistake is to be too vague with the descriptions – for example, blue trainers can be further enhanced into blue and white, limited-edition Nike running trainers.
Anchor text is the clickable text of any link on a page. When a website is crawled, the search engine uses this when ascertaining the content and relevance of any associated page. Using generic anchor text such as ‘click here’ when linking to internal pages is a missed SEO opportunity. The anchor text should include relevant keywords that the page wants to rank for but over-optimising can also have a negative effect, so keep the balance right.
Web Design for Beginners 109
Customise your site SOURCE FILES AVAILABLE
Get background colour to match content
With the adaptive-backgrounds.js library it is possible to create dynamic colour schemes based on a dominant image colour
M
aking sure that content on your webpage is fresh, is incredibly important. News, magazine sites and blogs are often popular because of their ever-changing and updated content. The designs of these sites often show the change using carefully selected images; aggregating a new picture and headline to the home page shows that the content on the site is up to date and different to the user since they last paid the webpage a visit. 154 Web Design for Beginners
Using the adaptive-backgrounds.js library, designers can now actively take the dominant colour of the image and use that to make the background of the section change and reflect the mood of the image. This is a powerful way to make sections of a site appear dynamic and to really emphasise content changes. In the tutorial, a number of techniques will be explored, from simply changing the background of the parent div that the image is in, to targeting
specific other parents and even grabbing the colour from an image added through CSS as the background of a div. These techniques can be used together, or separately, and can be used multiple times on a page to affect the design. Another feature of this is that the text can be changed to be light when there is a dark background and vice versa. As such it can be a great way to change text over a background image to be easily visible.
01 Starting the project
From the start folder, open the ‘index.html’ file in the code editor of your choice. In the body section start by adding the panel as shown below. Once this code is in, copy and paste it so there are four panels. Just change the image on display to ‘panel2.jpg’, ‘panel3.jpg’, etc.
001 <div class=”panel”> 002 <div class=”p_inside”> 003 <img class=”panel-img” src=”images/panel1.jpg” 004 data-adaptive-background> 005 <div> 006 <h2>Boat Skills</h2> 007 <p>Your text.</p> 008 </div> 009 </div> 010 </div>
02 Styling the page
Switch over to the ‘design.css’ file in the CSS folder. This file already has some CSS resets to ensure browsers treat content similarly. Add the code here to style the body with the appropriate font and line spacing required for this project. 001 body { 002 margin: 0; 003 padding: 0; 004 line-height: 1.8em; 005 font-family: ‘Raleway’, sans-serif; 006 }
03 Panel fitting
The CSS class for the panel ensures that each panel takes up a quarter of the screen, while floating next to each other, side by side. The next class adds the appropriate padding to the inside of each of the panels. 001 .panel { 002 float: left; 003 width: 25%; 004 text-align: center; 005 } 006 .p_inside { 007 padding: 100px 20px 140px 20px; 008 }
04 Scaling the image
The image for the panel is styled up here so that it is only ever 80% width of the panel. This is set to display centred on each panel. Because the images are square, adding a 50% border radius, turns the square into a circle. 001 .panel-img { 002 max-width: 80%; 003 display: block; 004 margin: 0 auto; 005 height: auto; 006 border-radius: 50%; 007 }
05 Text styles
The heading and paragraph text for each of the
panels is styled up in these CSS rules. This is mainly the font size and the typeface. Save the CSS now and then return back over to the ‘index. html’ page as the javascript will then need to be added to the webpage. 001 h2{ 002 font-family: ‘Merriweather’, serif; 003 font-size: 2em; 004 padding: 40px 0 20px 0; 005 } 006 p{ 007 padding: 0 0 20px 0; 008 }
06 Powering the backgrounds In the head section of the ‘index.html’ page add the code shown here. This will check all images with the ‘data-adaptive-background’ attribute. It will give the parent attribute the background colour and change the text colour so that it stands out from the colour. Save this and check it in your browser. 001 <script type=”text/javascript”> 002 $(document).ready(function() {
Data attributes Data attributes are specially designed to be picked up by Javascript and can apply special rules to the tag. These are used extensively with the Adaptive Backgrounds library.
Top left The tutorial uses the adaptive-backgrounds.js library to find the dominant colour in the image and change the background to match
Top right Here four panels have been set up with the same CSS classes; each is given a different background colour from the colour scheme in the image
Left The background in this image has been changed, but there is also a subtle transparent PNG texture used in the background for this section Web Design for Beginners 155
SPECIALS & GUIDES
myfavouritemagazines has over 100 one-off guides and specials which celebrate your favourite subjects. There’s something for everyone treat yourself or give gift.
DELIVERY INCLUDED
https://www.myfavouritemagazines.co.uk/guides
Or call now – UK: 0344 848 2852 Overseas: +44 344 848 2852 MyFavouriteMagazines is the official magazine subscription store of Future. You can save up to 74% on a huge range of popular magazine titles. Every magazine subscription will be delivered direct to your door, and includes free UK delivery; guaranteeing you don’t miss a copy of your favourite magazine.