Home Explore Html and CSS

Html and CSS

Published by Soumen Patra, 2022-03-26 07:24:27

Description: A book for design website by JHON DUCKETT

Keywords: Html. Css. Web developments

Read the Text Version

Pages:

Example HTML5 LAYOUT This example shows a cooking site built using new HTML5 elements to describe the structure of the page (rather than just grouping items using <div> elements). The header and footer of the page sit inside <header> and <footer> elements. The courses are grouped together inside a <section> element that has a class attribute whose value is courses (to distinguish it from other <section> elements on the page). The sidebar sits inside an <aside> element. Each of the courses lives inside an <article> element, and use the <figure> and <figcaption> elements to contain an image. The headings for the courses have subheadings, so these are grouped inside an <hgroup> element. In the sidebar, the recipes and contact details are placed inside separate <section> elements. The page is styled using CSS. The only difference is that our selectors are using the new HTML5 elements to allow us to create rules that target those elements. In order for the CSS to work in versions of IE before Internet Explorer 9, the HTML5 page contains a link to the HTML5 shiv JavaScript (hosted on Google's servers) inside a conditional comment. HTML5 LAYOUT 444

Example HTML5 LAYOUT <!DOCTYPE html> <html> <head> <title>HTML5 Layout</title> <style type=\"text/css\"> header, section, footer, aside, nav, article, figure, figcaption { display: block;} body { color: #666666; background-color: #f9f8f6; background-image: url(\"images/dark-wood.jpg\"); background-position: center; font-family: Georgia, times, serif; line-height: 1.4em; margin: 0px;} .wrapper { width: 940px; margin: 20px auto 20px auto; border: 2px solid #000000; background-color: #ffffff;} header { height: 160px; background-image: url(images/header.jpg);} h1 { text-indent: -9999px; width: 940px; height: 130px; margin: 0px;} nav, footer { clear: both; color: #ffffff; background-color: #aeaca8; height: 30px;} nav ul { margin: 0px; padding: 5px 0px 5px 30px;} nav li { display: inline; margin-right: 40px;} nav li a { 445 HTML5 LAYOUT

color: #ffffff;} Example nav li a:hover, nav li a.current { color: #000000;} HTML5 LAYOUT section.courses { float: left; HTML5 LAYOUT 446 width: 659px; border-right: 1px solid #eeeeee;} article { clear: both; overflow: auto; width: 100%;} hgroup { margin-top:40px;} figure { float: left; width: 290px; height: 220px; padding: 5px; margin: 20px; border: 1px solid #eeeeee;} figcaption { font-size: 90%; text-align: left;} aside { width: 230px; float: left; padding: 0px 0px 0px 20px;} aside section a { display: block; padding: 10px; border-bottom: 1px solid #eeeeee;} aside section a:hover { color: #985d6a; background-color: #efefef;} a { color: #de6581; text-decoration: none;} h1, h2, h3 { font-weight: normal;} h2 {

Example HTML5 LAYOUT margin: 10px 0px 5px 0px; padding: 0px;} h3 { margin: 0px 0px 10px 0px; color: #de6581;} aside h2 { padding: 30px 0px 10px 0px; color: #de6581;} footer { font-size: 80%; padding: 7px 0px 0px 20px;} </style>  </head> <body> <div class=\"wrapper\"> <header> <h1>Yoko's Kitchen</h1> <nav> <ul> <li><a href=\"\" class=\"current\">home</a></li> <li><a href=\"\">classes</a></li> <li><a href=\"\">catering</a></li> <li><a href=\"\">about</a></li> <li><a href=\"\">contact</a></li> </ul> </nav> </header> <section class=\"courses\"> <article> <figure> <img src=\"images/bok-choi.jpg\" alt=\"Bok Choi\" /> <figcaption>Bok Choi</figcaption> </figure> <hgroup> <h2>Japanese Vegetarian</h2> <h3>Five week course in London</h3> </hgroup> 447 HTML5 LAYOUT

Example HTML5 LAYOUT <p>A five week introduction to traditional Japanese vegetarian meals, teaching you a selection of rice and noodle dishes.</p> </article> <article> <figure> <img src=\"images/teriyaki.jpg\" alt=\"Teriyaki sauce\" /> <figcaption>Teriyaki Sauce</figcaption> </figure> <hgroup> <h2>Sauces Masterclass</h2> <h3>One day workshop</h3> </hgroup> <p>An intensive one-day course looking at how to create the most delicious sauces for use in a range of Japanese cookery.</p> </article> </section> <aside> <section class=\"popular-recipes\"> <h2>Popular Recipes</h2> <a href=\"\">Yakitori (grilled chicken)</a> <a href=\"\">Tsukune (minced chicken patties)</a> <a href=\"\">Okonomiyaki (savory pancakes)</a> <a href=\"\">Mizutaki (chicken stew)</a> </section> <section class=\"contact-details\"> <h2>Contact</h2> <p>Yoko's Kitchen<br /> 27 Redchurch Street<br /> Shoreditch<br /> London E2 7DP</p> </section> </aside> <footer> © 2011 Yoko's Kitchen </footer> </div> </body> </html> HTML5 LAYOUT 448

Summary HTML5 LAYOUT XX The new HTML5 elements indicate the purpose of different parts of a web page and help to describe its structure. XX The new elements provide clearer code (compared with using multiple <div> elements). XX Older browsers that do not understand HTML5 elements need to be told which elements are block-level elements. XX To make HTML5 elements work in Internet Explorer 8 (and older versions of IE), extra JavaScript is needed, which is available free from Google.

18 Process & Design XX How to approach building a site XX Understanding your audience and their needs XX How to present information visitors want to see

This section discusses a process that you can use when you are creating a new website. It looks at who might be visiting your site and how to ensure the pages feature the information those visitors need. It also covers some key aspects of design theory to help you create professional looking sites. In this chapter, we will look at: ●● How to understand the audience your site may attract and what information they will expect to find on it ●● How to organize information so that visitors can find what they are looking for ●● Design theory for presenting information in a way that helps visitors achieve their goals ●● Design tips to help you create more attractive and professional sites 453 PROCESS

PROCESS 454

Who is the Site For? Every website should be designed for the target audience—not just for yourself or the site owner. It is therefore very important to understand who your target audience is. It can be helpful to ask some Target Audience: individuals questions about the people you would expect to be interested in ●● What is the age range of your target audience? the subject of your site. ●● Will your site appeal to more women or men? What is the mix? ●● Which country do your visitors live in? If you ask a client who a site is ●● Do they live in urban or rural areas? for, it is not uncommon for them ●● What is the average income of visitors? to answer \"the entire world.\" ●● What level of education do they have? ●● What is their marital or family status? Realistically, it is unlikely to be ●● What is their occupation? relevant to everyone. If your site ●● How many hours do they work per week? sells light bulbs, even though ●● How often do they use the web? most people using a computer ●● What kind of device do they use to access the web? probably use light bulbs, they are not likely to order them from Target Audience: Companies someone in a different country. ●● What is the size of the company or relevant department? Even if the site has a wide ●● What is the position of people in the company who visit your site? appeal, you can still think about ●● Will visitors be using the site for themselves or for someone else? the demographics of a sample of ●● How large is the budget they control? the target audience. 455 PROCESS

Invent some fictional visitors from your typical target audience. They will become your friends. They can influence design decisions from color palettes to level of detail in descriptions. Name Gordon Molly Jasper Ayo Ivy Gender M F M M F Age 28 47 19 32 35 Location Occupation Chicago San Francisco New York Miami Boston Income Teacher Attorney Student Retail Journalist Web Use $180k $160k $62k Daily $24k 4-5 days/wk $75k 2-3 days/wk Daily Daily If you have a question about how will be able to think back and ask the site is going to be used, or yourself, \"What would Gordon what its priorities should be, you or Molly want in this situation?\" PROCESS 456

Why People Visit YOUR Website Now that you know who your visitors are, you need to consider why they are coming. While some people will simply chance across your website, most will visit for a specific reason. Your content and design should Key Motivations Specific Goals be influenced by the goals of your users. ●● Are they looking for general ●● Do they want general entertainment or do they information / research (such To help determine why people need to achieve a specific as background on a topic / are coming to your website, goal? company), or are they after there are two basic categories of something specific (such as a questions you can ask: ●● If there is a specific goal, is particular fact or information it a personal or professional on a product)? 1: The first attempts to discover one? the underlying motivations for ●● Are they already familiar with why visitors come to the site. ●● Do they see spending time on the service or product that this activity as essential or a you offer or do they need to 2: The second examines the luxury? be introduced to it? specific goals of the visitors. These are the triggers making ●● Are they looking for time them come to the site now. sensitive information, such as the latest news or updates on a particular topic? ●● Do they want to discover information about a specific product or service to help them decide whether to buy it or not? ●● Do they need to contact you? If so, can they visit in person (which might require opening hours and a map)? Or might they need email or telephone contact details? 457 PROCESS

What Your Visitors are Trying to Achieve First you want to create a list It is unlikely that you will be able to list every of reasons why people would reason why someone visits your site but you be coming to your site. You can are looking for key tasks and motivations. This then assign the list of tasks to information can help guide your site designs. the fictional visitors you created in the step described on the Gordon bought a tennis racquet several years ago; now he wants to previous page. purchase one from your site for his girlfriend. Molly has read about your new doggy daycare service in the press and wants to find out whether it would be suitable for her to use. Jasper had a bad experience staying in a hotel when visiting Sydney, Australia, and wants to make a complaint. Ayo hopes to study architecture and wants to learn more about a new course that is being offered. Ivy is a picture editor and wants to look at a photographer's site to see examples of his work before deciding whether to commission him. PROCESS 458

What Information Your Visitors Need You know who is coming to your site and why they are coming, so now you need to work out what information they need in order to achieve their goals quickly and effectively. You may want to offer additional Therefore, you will have more Key Information supporting information that you opportunity to tell them any think they might find helpful. extra information that you think ●● Will visitors be familiar with would be helpful to them (or to your subject area / brand Look at each of the reasons why expose them to other products or do you need to introduce people will be visiting your site and services you want to yourself? and determine what they need to promote). achieve their goals. ●● Will they be familiar with If you do not appear relevant to the product / service / You can prioritize levels of them by answering their needs, information you are covering information from key points however, they are likely to go or do they need background down to non-essential or elsewhere. information on it? background information. Here are some questions to help ●● What are the most important By ensuring that you provide the you decide what information to features of what you are information that your visitors provide for visitors to your site... offering? are looking for, they will consider your site more relevant to them. ●● What is special about what you offer that differentiates you from other sites that offer something similar? ●● Once people have achieved the goal that sent them to your site, are there common questions people ask about this subject area? 459 PROCESS

How Often People Will Visit Your Site Some sites benefit from being updated more frequently than others. Some information (such as news) may be constantly changing, while other content remains relatively static. A website about fashion trends It can often be helpful to set a Goods / Services will need to change a lot more schedule for when a site will be frequently than one that is updated (rather than doing it on ●● How often do the same promoting a service that people an ad hoc basis). people return to purchase do not buy regularly (such as from you? domestic plumbing or double You will often find that some glazing). parts of a site will benefit from ●● How often is your stock being updated more frequently updated or your service Once a site has been built, it can than others. changed? take a lot of time and resources to update it frequently. Here are some questions to help Information you decide how often to update Working out how often people your website content... ●● How often is the subject are likely to revisit your site gives updated? you an indication for how often you should update the site. ●● What percentage of your visitors would return for regular updates on the subject, compared with those who will just need the information once? PROCESS 460

Site Maps Now that you know what needs to appear on your site, you can start to organize the information into sections or pages. The aim is to create a diagram The groups of information are You may need to duplicate some of the pages that will be used then turned into the diagram information if it needs to appear to structure the site. This is that is known as the site map. on more than one page. known as a site map and it will show how those pages can be Sometimes it can be helpful to The pages (or groups of pages) grouped. ask people who are the target will inform how users navigate audience to help you group through the site. To help you decide what related information together. information should go on each Remember to focus on the page, you can use a technique A site map will usually goals that your visitors want to called card sorting. begin with the homepage. achieve. Additionally, if the site is large This involves placing each and is compartmentalized It is worth noting that the piece of information that a into sections, each section site owner might organize visitor might need to know on might require its own section information in a way that is a separate piece of paper and homepage to link to all of the different to what the public then organizing the related information within it. expects. It is important to reflect information into groups. the public's understanding of the For example, most online shops subject (rather than just the site Each group relates to a page and, have section homepages for owner's understanding of it). on larger sites the, pages can in each type of product, which then turn can be grouped together to in turn link to individual product create different sections of the pages. website. 461 PROCESS

Example Site Map Home About Articles Visit Shop Contact History News Location Books Gifts Foundation Book Reviews Opening Times Future Plans Press Tickets Interviews PROCESS 462

WireFrames A wireframe is a simple sketch of the key information that needs to go on each page of a site. It shows the hierarchy of the information and how much space it might require. A lot of designers will take the You should not include the how the the page should look. elements that need to appear on color scheme, font choices, It can be very helpful to show the each page and start by creating backgrounds or images for wireframes of a site to a client wireframes. This involves the website in the wireframe. before showing them a design. sketching or shading areas It should focus on what It enables the client to ensure where each element of the page information needs to be on the site has all the functions and will go (such as the logo, primary each page and create a visual information it needs to offer. navigation, headings and main hierarchy to indicate the most bodies of text, user logins etc). important parts of each page. If you just present a site design to a client, it is common for them By creating a wireframe you can The wireframes make design to focus on how the site looks, ensure that all of the information easier because you know what which means they may not raise that needs to be on a page is information needs to appear on issues about its function after included. which page before considering the site has been built. The example on the right was You can sketch wireframes There are also online wireframe created in Photoshop using the on paper or use a graphics tools such as those at: templates that come with the application on your computer http://gomockingbird.com 960.gs grid system. (such as Illustrator or InDesign). http://lovelycharts.com 463 PROCESS

Example Wireframe PROCESS 464

Getting your message across using design The primary aim of any kind of visual design is to communicate. Organizing and prioritizing information on a page helps users understand its importance and what order to read it in. CONTENT Prioritizing Organizing Web pages often have a lot of If everything on a page appeared Grouping together related information to communicate. in the same style, it would be content into blocks or chunks For example, the pages of much harder to understand. (Key makes the page look simpler online newspapers will have messages would not stand out.) (and easier to understand). information that does not appear on every page of the print By making parts of the page Users should be able to equivalent: look distinct from surrounding identify the purpose of each content, designers draw block without processing each ●● A masthead or logo attention to (or away from) individual item. those items. ●● Links to navigate the site By presenting certain types of Designers create something information in a similar visual ●● Links to related content and known as a visual hierarchy style (such as using the same other popular articles to help users focus on the key style for all buttons or all links), messages that will draw people's users will learn to associate that ●● Login or membership options attention, and then guide them style with a particular type of to subsequent messages. content. ●● Ability for users to comment We look at visual hierarchy on We look at grouping and ●● Copyright information pages 467-468. similarity on pages 469-470. ●● Links to privacy policies, terms and conditions, advertising information, RSS feeds, subscription options With so much on the page, the designer needs to organize and prioritize the information to communicate their message and help users find what they're looking for. 465 PROCESS

Let's look at an example of how design can be used to effectively communicate the services of a company. visual hierarchy Grouping Similarity Attention is immediately drawn There are several chunks of There are several examples of to a picture that shows the information on this page. similarity within this page. service this company offers and a headline to explain it. The At the top you can see the logo The four points (at the bottom size and colored background and navigation. Under this is the left of the screenshot) are all reinforce that this is the primary information that introduces the presented in a similar manner message on the page. company's services. with consistent headings and icons. Should this service appeal to the Further down are three distinct user, below they can see more groups showing you what the All of the links in the body text detail about what it does, how services do, the costs involved are in blue so it is clear what text much it costs, and who uses it. and some of the services' users. is clickable. PROCESS 466

Visual hierarchy Most web users do not read entire pages. Rather, they skim to find information. You can use contrast to create a visual hierarchy that gets across your key message and helps users find what they are looking for. SIZE COLOR Style Larger elements will grab users' Foreground and background An element may be the same attention first. For this reason it color can draw attention to key size and color as surrounding is a good idea to make headings messages. Brighter sections tend content but have a different style and key points relatively large. to draw users' attention first. applied to it to make it stand out. Lorem ipsum Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetur sit amet, consectetur dolor sit amet, consectetur adipiscing elit. adipiscing elit. adipiscing elit. Lorem Lorem ipsum dolor Lorem ipsum dolor ipsum dolor sit amet, sit amet, consectetur sit amet, consectetur consectetur adipscing elit. adipscing elit. adipscing elit. 467 PROCESS

Visual hierarchy refers to the order in which your eyes perceive what they see. It is created by adding visual contrast between the items being displayed. Items with higher contrast are recognized and processed first. Images Images create a high visual contrast and often attract the eye first. They can be used to draw attention to a specific message within the page. In some cases, the right image can succinctly reveal more than an entire page of text. The effect of a well-designed visual hierarchy is largely subliminal. Achieving a good hierarchy requires balance; if nothing stands out a site can be rather uninteresting, and if too many aspects are competing for your attention it can be hard to find the key messages. This example has a clear hierarchy which addresses the needs of visitors to the site. PROCESS 468

grouping and Similarity When making sense of a design, we tend to organize visual elements into groups. Grouping related pieces of information together can make a design easier to comprehend. Here are some ways this can be achieved. Proximity Closure Continuance When several items are When faced with a complicated When elements are placed in placed close together, they are arrangement of items, we a line or a curve then they are perceived as more related than will often look for a single or perceived to be more related items that are placed further recognisable pattern or form. than those that are not following apart. (You can also nest groups A real or imaginary box can be the same direction. This can be of information within larger formed around elements due to used to direct a reader from one groups of information.) their proximity and alignment. part of a page to the next. White Space color Borders Placing related items closer A background color placed A line can be drawn around the together and leaving a bigger behind related items to border of the group or between it gap between unrelated items. emphasize their connection. and its neighbors. 469 PROCESS

We naturally observe similarities in design, and things that are similar are perceived to be more related than things that are dissimilar. Repetition of similar color, size, orientation, texture, font, or shape, suggests that matching elements have similar importance or meaning. Book Reviews Fantasy Worlds Consistency Raw Creation Deidi von Schaewen, John Maizels In this example each book Presenting the world's most unusual, review has a consistent style for John Maizels colorful and poetic creations, some the book titles, author names, Raw Creation is the definitive book of which have never previously and purchasing links. Having on outsider art and provides an appeared in print. Fantasy Worlds read just one of the blocks it is indispensible guide to the self-taught includes the classics of fantasy possible to infer the meaning of art of this century and a fascinating architecture such as the Palais the other items in this box that account of human creativity. The Ideal near Lyon and, of course, Nek follow the same style. chapter entitled Wonders of the Chand's Rock Garden in Chandigarh, World is mostly dedicated to Nek India. Headings Chand's Rock Garden and includes a Buy on Amazon number of color photographs. Giving a chunk of information Buy on Amazon The Rock Garden a heading clearly tells the user whether or not the content of Nek Chand Outsider Art M.S.Aulakh the grouping is relevant to them. This small black and white book is If not, they can ignore all of the Lucienne Peiry, Philippe Lespinasse M.S. Aulakh's commentary on and elements within it. It also helps This publication tells the story of tribute to the Rock Garden and is not users of screen readers, as users Nek Chand and his life and takes the widely available, but used copies can often have the option to hear the reader on a colorful journey through be found from time to time. headings on the page. his Rock Garden, the world's most Buy on Amazon expansive work of environmental art. Buy on Amazon Each visual chunk can contain its own hierarchy as shown in this example, where the individual books have their own subsections of title, author, text and link. PROCESS 470

Designing Navigation Site navigation not only helps people find where they want to go, but also helps them understand what your site is about and how it is organized. Good navigation tends to follow these principles... Concise Clear Selective Ideally, the navigation should Users should be able to predict The primary navigation should be quick and easy to read. It is the kind of information that only reflect the sections or a good idea to try to limit the they will find on the page content of the site. Functions number of options in a menu to before clicking on the link. like logins and search, and legal no more than eight links. These Where possible, choose single information like terms and can link to section homepages descriptive words for each link conditions and so on are best which in turn link to other pages. rather than phrases. placed elsewhere on the page. Home Artist Profiles Exhibitions and Events Galleries Books and Magazines  About this Website Contact Us Login Register Terms and Conditions Privacy Policy Home Artist Profiles Exhibitions Galleries Publications About Contact ✔ 471 PROCESS

A large site may have primary, navigation or down the side of Online Extra secondary and even tertiary the page. Tertiary navigation Go to the website accompanying navigation. Primary navigation often sits in the footer of the this book for information on often appears across the top page. The menu will not be the how to implement search of the site from left to right, or only way users navigate the site. functionality for your site using down the left hand side of the They will also use links within Google Search. page. Secondary navigation each page. Some sites also offer could be under the primary a search function. Context Interactive Consistent Good navigation provides Each link should be big enough The more pages a site contains, context. It lets the user know to click on and the appearance the larger the number of where they are in the website at of the link should change when navigation items there will be. that moment. Using a different the user hovers over each item Although secondary navigation color or some kind of visual or clicks on it. It should also will change from page to page, marker to indicate the current be visually distinct from other it is best to keep the primary page is a good way to do this. content on the page. navigation exactly the same. Home Artist Profiles Exhibitions Galleries Publications About Contact  Home Artist Profiles Exhibitions Galleries Publications About Contact ✔ PROCESS 472

Summary PROCESS & Design XX It's important to understand who your target audience is, why they would come to your site, what information they want to find and when they are likely to return. XX Site maps allow you to plan the structure of a site. XX Wireframes allow you to organize the information that will need to go on each page. XX Design is about communication. Visual hierarchy helps visitors understand what you are trying to tell them. XX You can differentiate between pieces of information using size, color, and style. XX You can use grouping and similarity to help simplify the information you present.

19 Practical Information XX Search engine optimization XX Using analytics to understand visitors XX Putting your site on the web

To wrap up the book we are going to look at some practical information that will help you launch a successful site. There are entire books written about each of the topics covered in this chapter but I will introduce you to the key themes that each subject deals with and give you pointers for what you need to be considering. You will see: ●● The basics of search engine optimization ●● Using analytics to understand how people are using your site after it has launched ●● Putting your site on the web 477 PRACTICAL INFORMATION

PRACTICAL INFORMATION 478

Search Engine Optimization (SEO) SEO is a huge topic and several books have been written on the subject. The following pages will help you understand the key concepts so you can improve your website's visibility on search engines. The Basics On-Page Techniques Off-Page Techniques Search engine optimization (or On-page techniques are the Getting other sites to link to you SEO) is the practice of trying methods you can use on your is just as important as on-page to help your site appear nearer web pages to improve their techniques. Search engines help the top of search engine results rating in search engines. determine how to rank your when people look for the topics site by looking at the number of that your website covers. The main component of this is other sites that link to yours. looking at keywords that people At the heart of SEO is the idea of are likely to enter into a search They are particularly interested working out which terms people engine if they wanted to find in sites whose content is related are likely to enter into a search your site, and then including to yours. For example, if you engine to find your site and then these in the text and HTML code were running a website that using these terms in the right for your site in order to help the sold fish bait, then a link from places on your site to increase search engines know that your a hairdresser is not likely to be the chances that search engines site covers these topics. considered as relevant as one will show a link to your site in from an angling community. their results. Search engines rely very heavily on the text that is in your pages Search engines also look at the In order to determine who comes so it is important that the terms words between the opening first in the search results, search people are going to search for <a> tag and closing </a> tag engines do not only look at what are in text. There are seven in the link. If the text in the link appears on your site. They also essential places where you want contains keywords (rather than consider how many sites link your keywords to appear. just click here or your website to you (and how relevant those address) it may be considered links are). For this reason, SEO Ensuring that any images have more relevant. is often split into two areas: appropriate text in the value of on-page techniques and off-page their alt attribute also helps The words that appear in links to techniques. search engines understand the your site should also appear in content of images. the text of the page that the site links to. 479 PRACTICAL INFORMATION

On-Page SEO In every page of your website there are seven key places where keywords (the words people might search on to find your site) can appear in order to improve its findability. 1: Page Title 2 1 The page title appears at the top of the browser window or on the 3 6 tab of a browser. It is specified in the <title> element which lives 5 7: Page Descriptions inside the <head> element. The description also lives inside 4 the <head> element and is 2: URL / Web Address specified using a <meta> tag. The name of the file is part of 5: Link Text It should be a sentence that the URL. Where possible, use Use keywords in the text that describes the content of the keywords in the file name. create links between pages page. (These are not shown in (rather than using generic the browser window but they 3: Headings expressions such as \"click here\"). may be displayed in the results If the keywords are in a heading pages of search engines.) <hn> element then a search 6: Image Alt Text Never try to fool search engines! engine will know that this page is Search engines rely on you They will penalize you for it. For all about that subject and give it providing accurate descriptions example, never add text in the greater weight than other text. of images in the alt text. This same color as the background of will also help your images show the page as they can detect this. 4: Text up in the results of image-based Where possible, it helps to searches. repeat the keywords in the main body of the text at least 2-3 times. Do not, however, over-use these terms, because the text must be easy for a human to read. PRACTICAL INFORMATION 480

How to Identify Keywords and Phrases Determining which keywords to use on your site can be one of the hardest tasks when you start to think about SEO. Here are six steps that will help you identify the right keywords and phrases for your site. 1: Brainstorm 2: Organize 3: Research List down the words that Group the keywords into There are several tools that let someone might type into separate lists for the different you enter your keywords and Google to find your site. Be sure sections or categories of your then they will suggest additional to include the various topics, website. keywords you might like to products or services your site is consider, such as: about. For example, if your website adwords.google.co.uk/ was a pet shop you might have select/KeywordToolExternal It often helps to ask other people different categories for different (When using this tool, select the what words they would use to animals (such as dogs, cats and \"exact match\" option rather than find your site because people rabbits). \"broad match.\") less familiar with a topic might www.wordtracker.com use different terms than you. (In On a large site you may www.keyworddiscovery.com particular, they are less likely to break this up further into use industry-specific jargon.) sub-categories (for example, Once these tools have suggested separate groups for different pet additional keywords, add the Your list may include some food brands). relevant options to your lists. keyword phrases (not just (Keyword tools will most likely individual words) if you have suggest some terms that are topics which are described by irrelevant so do omit any that do more than one word. not seem appropriate). 481 PRACTICAL INFORMATION

4: Compare 5: Refine 6: Map It is very unlikely that your Now you need to pick which Now that you have a refined list site will appear at the top of keywords you will focus on. of keywords, you know which the search results for every These should always be the ones have the most competition, and keyword. This is especially true that are most relevant to each which ones are most relevant, for topics where there is a lot section of your site. it is time to start picking which of competition. The more sites keywords you will use for each out there that have already been If there is a phrase that is very page. optimized for a given keyword, relevant but you find there is a the harder it will be for you to lot of competition, you should Pick 3-5 keywords or phrases rise up the search results when still use it. To improve the that map to each page of your people search on that term. chances of your site being found website and use these as the you can look at whether there keywords for each page. Some of the keyword research are other words that could be sites can tell you how many incorporated into a phrase. For You should not need to repeat people have searched for a example, if the information or the same keywords on all of specific keyword to help you service you offer on your website the pages. It is also likely that, know how much competition is location specific, then you will as you move further away from those terms have. often find that incorporating the homepage into the sections your location into your keyword of the site, the keywords will You can also use Google's list will help people find you. become more specific to the advanced search feature to individual topic dealt with on just search the titles of web If your site is promoting a slate each page. pages. This will help you to roofing company in Australia determine how many sites have then it is better to get 100 that keyword in the title of their people from Australia who are pages. (The more pages with looking for a slate roof than the term in the title, the more 10,000 from the USA who are competition there is.) looking for other kinds of rooves. PRACTICAL INFORMATION 482

Analytics: Learning about your Visitors As soon as people start coming to your site, you can start analyzing how they found it, what they were looking at and at what point they are leaving. One of the best tools for doing this is a free service offered by Google called Google Analytics. Signing Up How it Works The Tracking Code The Google Analytics service Every time someone loads a A tracking code is provided relies on you signing up for an page of your site, the tracking by Google Analytics for each account at: code sends data to the Google website you are tracking. It www.google.com/analytics servers where it is stored. should appear just before the The site will give you a piece of Google then provides a web- closing </head> tag. The code tracking code which you need to based interface that allows you does not alter the appearance of put on every page of your site. to see how visitors use your site. your web pages. At the time of writing, Google was updating their Analytics interface to Version 5. If you log into your account and see a different interface, look for a link in the top right-hand corner of the page that says 'New Version.' 483 PRACTICAL INFORMATION

How Many People Are Coming to Your Site? The overview page gives you a snapshot of the key information you are likely to want to know. In particular, it tells you how many people are coming to your site. Visits Unique Visits Page Views This is the number of times This is the total number of The total number of pages all people have come to your site. If people who have visited your site visitors have viewed on your site. someone is inactive on your site over the specified period. The for 30 minutes and then looks at number of unique visits will be Pages per Visit another page on your site, it will lower than the number of visits The average number of pages be counted as a new visit. if people have been returning to each visitor has looked at on your site more than once in the your site per visit. defined period. Average Time on Site The average amount of time each user has spent on the site per visit. Date Selector Using the date selector in the top right hand corner of the site, you can change the period of time the reports display. When you log in, this is usually set to the last month, but you can change it to report on a specific time period. Export The export link just above the title that says \"visitors overview\" allows you to export the statistics on this page for other applications such as Excel. PRACTICAL INFORMATION 484

What Are Your Visitors Looking At? The content link on the left-hand side allows you to learn more about what the visitors are looking at when they come to your site. Pages Landing Pages Top Exit Pages This tells you which pages your These are the pages that people This shows which pages people visitors are looking at the most arrive on when first visiting your most commonly leave from. If and also which pages they are site. This can be particularly a lot of people are leaving from spending the most time on. helpful because you may find the same page then you might people are not always coming consider changing that page or into your site via the homepage. improving it. Bounce Rate This shows the number of people who left on the same page that they arrived on. A high bounce rate suggests that the content is not what they were looking for or that the page did not sufficiently encourage them to look around the rest of the site. What counts as a bounce: ●● Clicked a link to another site ●● Clicked on an advertisement ●● Entered a new URL ●● Used the \"back\" button ●● Closed the browser 485 PRACTICAL INFORMATION

Where Are Your Visitors Coming From? The traffic sources link on the left hand side allows you to learn where your visitors are coming from. Referrers Direct Search Terms This shows the sites that have This shows which page a user This shows the terms users linked to you and the number arrived on if they did not come entered into a search engine of people who have come via via a link on another site. They to find your site. This can help those sites. If a site sends a lot might have typed the URL into you learn how visitors describe of traffic to you, get in touch and their browser, used a browser what they're looking for (which is try to work together to ensure bookmark, or clicked a link in an often different to how someone that traffic keeps flowing. You email, PDF, or Word document. might describe their own site). could also try to find similar This can help you fine-tune your sites and ask them to link to you. content and your SEO keywords. Advanced Features We have only scratched the surface of what you can find out about your visitors from Google Analytics. Their help files tell you many more of the advanced features. If you run an online shop, it is well worth looking at their e-commerce tracking, which adds information about products sold, average basket size and much more. You can also set up goals where you specify the paths you want people to take, and then see how far they get through those paths, which is especially useful when gathering data from users. PRACTICAL INFORMATION 486

Domain Names & Hosting In order to put your site on the web you will need a domain name and web hosting. DOMAIN NAMES WEB HOSTING Disk space This refers to the total size of all Your domain name is your web So that other people can see of the files that make up your site address (e.g. google.com or bbc. your site, you will need to upload (all of the HTML and CSS files, co.uk). There are many websites it to a web server. Web servers images and scripts). that allow you to register domain are special computers that are names. Usually you will have to constantly connected to the Bandwidth pay an annual fee to keep that Internet. They are specially set This is the amount of data the domain name. up to serve web pages when hosting company will send to they are requested. your site's visitors. If you imagine These sites usually have a form 10 people looked at every page that allows you to check whether With the exception of some very on your site, then it would be your preferred domain name is large sites, most websites live on the equivalent to 10 times the available, and because millions web servers run by web hosting amount of disk space you use. of domain names have already companies. This is usually far been registered, it might take cheaper and more reliable than Backups you a while to find the one that is trying to run your own web Check whether the hosting right for your site. servers. company performs backups on your site (and how often). Some A lot of sites that offer domain There are lots of different types only create backups so that name registration also offer web of hosting on offer. We will now they can restore your website in hosting. take a look at some of the key the event of a server breaking. things that will help you choose Others allow access to backups which hosting company to use. (which can be helpful if you accidentally break the site when updating it). 487 PRACTICAL INFORMATION

Email accounts It is often worth searching for Hosted Services Most hosting companies will reviews of a hosting company provide email servers with their to see what other people's There are a number of online web hosting packages. You will experience has been with a services that allow you to point want to check the size of mailbox hosting company. Unfortunately, your domain name to their you are allowed and the number you often can only tell how good servers. Blogging platforms such of mailboxes you can use. a hosting company is when as WordPress.com, Tumblr, something goes wrong, at which and Posterous, or e-commerce Server-side point you find out how they are platforms such as Big Cartel and languages and able to help you (so you can Shopify provide the servers that databases expect to see a few negative your site is hosted on. If you are If you are using a content reviews for any company). using a platform like this you management system, it will likely will not need your own hosting use a server-side programming for the website, although you language and a database (such often still need hosting for your as PHP with a MySQL database, email. If this is the case, some or ASP.Net with a SQL Server web hosting companies offer database). Be sure to check that packages that will just offer your hosting company supports email services. the technologies your software needs to run. PRACTICAL INFORMATION 488

FTP & Third Party Tools To transfer your code and images from your computer to your hosting company, you use something known as File Transfer Protocol. As the name suggests, File Transfer Protocol (or FTP) allows you to transfer files across the Internet from your computer to the web server hosting your site. There are many FTP programs that offer a simple interface that shows you the files on your computer alongside the files that are on your web server. These allow you to drag and drop files from your computer to the server or vice versa. 489 PRACTICAL INFORMATION

There are a wide variety of sites that offer services commonly created by web developers (to save you having to build them yourself). Some hosting companies offer Here is a list of some popular Here is a list of some popular tools to upload files to their FTP applications: third party tools: servers using a web browser, but it is more common to use an FTP FileZilla Blogs program as they are faster at filezilla-project.org wordpress.com transmitting files. Windows, Mac, Linux tumblr.com posterous.com When you purchase your web FireFTP hosting, you will be given FTP fireftp.mozdev.org E-commerce details that you enter into your Windows, Mac, Linux shopify.com FTP program in order to connect bigcartel.com to the server. Usually this will CuteFTP go.magento.com be an address (such as ftp:// cuteftp.com mydomain.com), a username, Windows, Mac Email newsletters and a password. It is important campaignmonitor.com to keep this information secure SmartFTP mailchimp.com in order to prevent strangers smartftp.com from gaining access to your WIndows Social networking server. sharing buttons Transmit addthis.com panic.com/transmit addtoany.com Mac PRACTICAL INFORMATION 490

Summary PRACTICAL INFORMATION XX Search engine optimization helps visitors find your sites when using search engines. XX Analytics tools such as Google Analytics allow you to see how many people visit your site, how they find it, and what they do when they get there. XX To put your site on the web, you will need to obtain a domain name and web hosting. XX FTP programs allow you to transfer files from your local computer to your web server. XX Many companies provide platforms for blogging, email newsletters, e-commerce and other popular website tools (to save you writing them from scratch).

Pages:

Soumen Patra

Html and CSS

Like this book? You can publish your book online for free in a few minutes!

Create your own flipbook

TOP SEARCH

business design fashion music health life sports home marketing children

Html and CSS

Description: A book for design website by JHON DUCKETT

Keywords: Html. Css. Web developments

Read the Text Version

Soumen Patra

TOP SEARCH

RELATED PUBLICATIONS