Lesson 28

Organizing and Managing a Website

What You’ll Learn in This Lesson:

  • Image How to determine whether one page is enough to handle all your content

  • Image How to organize a simple site

  • Image How to organize a larger site

  • Image How to write maintainable code

  • Image How to optimize your site for search engines

  • Image How to get started with version control

The bulk of these lessons have led you through the design and creation of static and dynamic web content, from text to graphics and multimedia, with a little JavaScript interactivity thrown in for good measure. Along the way, we’ve noted some of the ways you can think about the life cycle of that content. In this lesson, you’ll learn how to look at your work as a whole.

This lesson shows you how to think about organizing and presenting multiple web pages so that visitors will be able to navigate among them without confusion. You’ll also learn ways to make your website memorable enough to visit again and again. Web developers use the term sticky to describe pages that people don’t want to leave. Hopefully this lesson will help you make your websites downright gooey! You’ll also learn techniques to give your pages better exposure in search engine results so that your visitors can find your pages in the first place.

Because websites can be (and usually should be) updated frequently, it’s essential to create pages that can be easily maintained. This lesson shows you how to add comments and other documentation to your pages so that you—or anyone else on your staff—can understand and modify your pages. It also introduces you to version control so that you can innovate individually or as part of a team without overwriting work that you might want to have saved.

By this point in the lessons, you should have enough HTML and CSS knowledge to produce most of your website. You have probably created a number of pages already, and perhaps you have even published them online.

As you proceed through this lesson, think about how your pages are organized now and how you can improve that organization. Have you used comments in your HTML or created a document for future website maintainers regarding your content organization? If not, now is a good time to start. Along the way, don’t be surprised if you decide to do a redesign that involves changing almost all your pages. The results are likely to be well worth the effort!

When One Page Is Enough

Building and organizing an attractive and effective website doesn’t always need to be a complex task. If you are creating a web presence for a single entity (such as a local event) that requires only a small amount of very specific information, you can effectively present that information on a single page with or without a lot of flashy graphics and interactivity. In fact, there are several positive features to a single-page web presence:

  • Image All the information on the site downloads more quickly than on more extensive sites.

  • Image The whole site can be printed on paper with a single print command, even if it is several paper pages long.

  • Image Visitors can easily save the site on their hard drives for future reference, especially if it uses a minimum of graphics.

  • Image Links between different parts of the same page usually respond more quickly than links to other pages.

Figure 28.1 shows the first part of a web page that serves its intended audience better as a single lengthy page than it would as a multipage site. The page begins, as most introductory pages should, with a succinct explanation of what the page is about and who would want to read it. A detailed table of contents enables visitors to skip directly to the section containing the material they find most interesting. If this “page” were printed, it would contain about six paper pages’ worth of text about driving traffic to websites—something a visitor might think about printing and reading later, perhaps while also taking notes.

A screenshot shows an example of a good table of content.
Figure 28.1 A good table of contents can make long pages easier to navigate.

When pages contain a table of contents to separate sections of information, it is also common for each short section to contain a link back up to the table of contents so that navigating around the page feels much the same as navigating around a multipage site. Because the contents of these types of longer pages are intended as a handy reference, visitors will definitely prefer the convenience of bookmarking or saving a single page over having to save 8 or 10 separate pages. The most common examples of single-page information websites are encompassed within Wikipedia, at www.wikipedia.org. If you consider each entry full of rich content to be its own “site,” the single-page sites within Wikipedia—with their own tables of contents—represent millions of printed pages.

Having experienced many beautiful and effective graphical layouts online, you might be tempted to forget that using a good, old-fashioned outline is often the clearest and most efficient way to organize long web pages full of text-based content within a site. This is especially true with the influx of single-page interfaces (also called single-page applications) that attempt to bring all the interactivity of desktop applications into a web browsing experience. These applications are often built using HTML and JavaScript frameworks and include significant visual design elements; in fact, these sites are often used to publish design portfolios rather than the type of text-based content you see here.

Organizing a Simple Site

With the exception of the aforementioned special cases of single-page applications and portfolio sites, single-page websites tend to serve merely “coming soon” or placeholder purposes. If you spend any time at all on the Web, you’ll quickly learn that most companies and individuals best serve their readers by dividing their sites into short, quickly-read pages surrounded by graphical navigation that enables them to gather almost all the information they could want within a few clicks. Furthermore, using multiple pages instead of a series of very long pages minimizes scrolling on the page, which can be especially bothersome for visitors who are using mobile devices to view the full site or who have relatively low-resolution monitors (less than 800 × 600).

The fundamental goal of a website is to make the individual or organization visible on the Internet, but another important—and more important—goal is to act as a portal to the information within the site itself. The main page of a site should give the user enough information to provide a clear picture of the organization, as well as traditional contact information and an email address to submit questions or feedback. It should also provide clear pathways into the highly structured information within other pages in the site. The main page shown in Figure 28.2 provides examples of all these good features: basic information, contact information, and paths to information for multiple audiences.

A screenshot of the Washington University main page.
Figure 28.2 This university main page uses a basic design, minimal but useful graphics, and a clear structure to entice users to explore for more information.

Note

Regardless of how large your site is, it’s a good idea to carefully organize your resources. For example, placing the images for your web pages in a separate folder named images is one step toward organization. Similarly, if you have files that are available for download, place them in a folder called downloads. This makes it much easier to keep track of web page resources based on their particular types (HTML pages, PNG images, and so on). In addition, if you organize your site into sections, such as Company, Products, and Press, put the individual pages into similarly named directories (company, products, press, and so on)—for the same organizational reasons.

One of the most common mistakes beginning website developers make is creating pages that look fundamentally different from other pages on the site. An equally serious mistake is using the same publicly available clip art that thousands of other web authors are also using. Remember that, on the Internet, one click can take you around the world. The only way to make your pages memorable and recognizable as a cohesive site is to have all your pages adhere to a unique, unmistakable visual theme. In other words, strive for uniqueness compared to other websites yet uniformity within the site itself.

As an example of how uniformity can help make a site more cohesive, think about large, popular sites you might have visited, such as ESPN.com. If you visit the MLB section at ESPN.com (see Figure 28.3) and then visit the NFL section (see Figure 28.4), you’ll notice a very similar structure.

A screenshot of the website E S P N.com.
Figure 28.3 The MLB section at ESPN.com.
A screenshot shows the N F L section of E S P N website.
Figure 28.4 The NFL section at ESPN.com.

In both examples, you see navigation elements at the top of the page (including some sub-navigation elements), a large area in the middle of the page for the featured item graphic, a rectangle on the right side containing links to top stories, and a set of secondary rectangles under the primary image, leading readers to additional stories. The only difference between the MLB section and the NFL section is the content. However, in both sections, you know that if you want to read the popular news stories, you look to the right of the page. If you want to navigate to another section in the site or to the site’s main page, you look to a navigational element at the top of the page.

The presence of consistent design and organizational elements helps ensure that your users will be able to navigate throughout your content with confidence. From a maintenance perspective, the consistent structural template enables you to reuse pieces of the underlying code. This type of code reuse typically happens through dynamic server-side programming that is beyond the scope of these lessons, but in general, it means that instead of copying and pasting the same HTML, CSS, and JavaScript over and over, that client-side code exists in only one place and is applied dynamically to the content. Therefore, instead of making changes to thousands of files to make a background change from blue to green, for example, you would need to make a change only once.

Organizing a Larger Site

For a more complex site, sophisticated layout and graphics can help organize and improve the looks of the site when used consistently throughout all your pages. To see how you can make aesthetics and organization work hand in hand, let’s look at examples of navigation (and, thus, underlying organization) for a few sites that present a large volume of information to several different audiences.

Figure 28.5 shows the main page of Amazon.com, specifically with the navigation selected. Amazon is in the business of selling products, plain and simple. Therefore, it makes sense for Amazon to show product categories as the main navigational elements.

A screenshot of the Amazon Website is shown. The various links under the section "Department" are shown. The links are divided into sections based on their categories, such as, Books and Audible, TV and Video, Computers, Tablets, and PC Products.
Figure 28.5 Amazon.com shows product categories as primary navigation elements.

Although Amazon is in the business of selling products, it also has to provide information regarding who it is, how to contact it, and other ancillary yet important information to enhance the business-to-consumer relationship. Links to this sort of information appear in the footer, or bottom portion, of the Amazon.com website—outside the viewing area of this screenshot. When creating your site template, you must determine the most important content areas and how to organize that content; also remember to provide users with basic information—especially if that information will enhance your image and make users feel as if you value what they have to say.

The next example is of a secondary page within the Peet’s Coffee website (www.peets.com). All the pages in the Peet’s website follow one of the common types of presenting navigation and sub-navigation: a horizontal strip for main navigation, with secondary elements for that section placed in a vertical column on the left. As Figure 28.6 shows, the secondary navigation changes depending upon what page the user visits—and it disappears completely in some cases. These types of visual indicators help users orient themselves within the site. Using a visual indicator like a color change or change in content is a useful tactic because your users might arrive at a page via a search engine or by a link from another website. After your users arrive, you want them to feel at home—or at least feel as if they know where they are in relationship to your site.

A screenshot of the website Peet’s Coffee.
Figure 28.6 This Peet’s Coffee secondary page shows a main navigation element with different secondary navigation on the left side of the page.

As you can see from the different main navigation elements—Craft, Coffee, Tea, Cold Brew, Gear, Gifts, Subscriptions, and Coffeebars—the Peet’s website has to serve the needs of many different types of people who come to the website for many different reasons. As you organize your own site content, determine the information that is most important to you, as well as the information that is most important to your users, and create a navigation scheme that finds a happy medium between the two.

Figure 28.7 shows another example of a navigation style, this time with a twist on the standard top navigation/left-side navigation scheme. In this example, the left-side navigation (the secondary navigation, in this case) also appears in a drop-down menu under the main navigation (refer to Lesson 11, “Using CSS to Do More with Lists, Text, and Navigation,” for information on how to do something like this). Hovering the mouse over any of the other main navigation elements brings up similar menus. This scheme gives users an entire site map at their fingertips because they can reach any part of the site within one click of any other page.

A screenshot of the official site of B ’A’ W S I. In the main navigation on the top, the "About" link is selected which reveals a drop-down menu with three more clickable options.
Figure 28.7 The BAWSI.org website shows sub-navigation attached to each main navigation element.

Also notice that the About Us link in the navigation is styled differently—with bright orange text—from the other links on the page, indicating to visitors which page they are on. This visual detail is an unobtrusive way to give users a sense of where they are within the current navigational scheme. You can also use other style features, like background colors, changing font sizes, or even using different font families. Some sites also use icons to indicate the location on the site.

You can choose among many types of navigation styles and ways of indicating to users where they are and where they might want to go next. Keep in mind the following fact: Studies have repeatedly shown that people become confused and annoyed when presented with more than seven choices at a time, and people feel most comfortable with five or fewer choices. Therefore, you should avoid presenting more than five links (either in a list or as graphical icons) next to one another, if at all possible—and you should definitely avoid presenting more than seven at once. Amazon.com gets a pass here because it is an Internet superstore, and users expect a lot of “departments” in which to shop when they get there. But when you need to present more than seven links in a navigation list, break them into multiple lists with a separate heading for each of the five to seven items.

It will also help your readers navigate your site without confusion if you avoid putting any page more than two (or, at most, three) links away from the main page. You should also always send readers back to a main category page (or the home page) after they’ve read a subsidiary page. In other words, try to design a somewhat flat link structure in which most pages are no more than one or two links deep. You don’t want visitors to have to rely heavily, if at all, on their browser’s Back button to navigate your site.

Optimizing Your Site for Search Engines

One major part of managing a website is getting it search engine ready. While not all sites rely on search engines for traffic, the majority do, so it’s a good idea to understand the basics of search engine optimization (SEO) so you don’t make mistakes that will hurt your traffic.

What you need to do is make sure that your site provides the information that both your customers and search engines can use to find your site.

There are dozens of search engines out there, and they all use a different method for determining what sites show up first in the results. But there are a few things you can do that will help improve your site rankings no matter what search engine your customers use:

  • Image Interesting content—This is the most important feature of a search engine–friendly site. You need to have text, multimedia, and images that people want to read and view.

  • Image Easy-to-use navigation—You want visitors to your site to stay as long as they want, no matter what page they end up on.

  • Image Mobile friendliness—Mobile-friendly sites are critical for search engine placement. More and more people use mobile devices, and Google and other search engines are switching to an index that prioritizes mobile-friendly designs.

Creating Interesting Content

It used to be that to get good placement in search engines, your content had to be full of keywords. While keywords have some importance, they are not as important as the content itself. The content needs to be interesting, easy to read, and comprehensive. You can’t get by with short, dull articles on your site. You need to write fully formed documents that cover whatever topic you’re writing about in depth.

Caution

Not all your pages need to be optimized for search or have long form content on them. Pages like your home page and navigation pages can be short and provide links and information to other parts of your site. Focus your SEO efforts on the actual content articles (and videos and images) that you post on the site.

The following are some tips for making sure your pages have enough in-depth content:

  • Image Write long articles—2000 words or more.

  • Image Use headings like <h2>, <h3>, and <h4> with the correct numbered level to create a document outline.

  • Image Include good internal navigation.

  • Image Don’t forget tables, figures, and graphs.

If you are determined to use keywords in your documents, focus on latent semantic indexing (LSI) keywords. These are keyword phrases that tend to have the same meaning in different contexts. If that sounds too technical, don’t worry too much about it: Just write your articles. But if you really want to make sure you’re covering it, you can use a tool like LSIGraph (https://lsigraph.com) to generate keywords for you.

Keeping Your Navigation Usable

Search engines navigate your site very much like human users (although they are often much faster). So, you need to make sure that your site navigation works and can get users to any page available. Don’t ever use JavaScript as the only way to get to navigation on your site—especially the primary navigation.

But don’t forget about internal navigation. Since you’re writing long, in-depth articles, you should have a form of navigation within the document. This could be a table of contents or just extra links to other parts of the page. If you don’t remember how to do that, now is a good time to go back and review Lesson 7, “Using External and Internal Links.”

Writing for Mobile Devices

Google and other search engines are prioritizing mobile devices and mobile-friendly pages more and more. If your pages break, are hard to read, or look bad on mobile devices, then you’re not going to rank well in search engines. More and more people use mobile devices either first or as their only access to the web; by making your site mobile friendly, you will get better ranking and have happier customers.

If you’ve been following the instructions in previous lessons about how to write for mobile, and especially the Mobile First information from Lesson 17, “Designing for Mobile Devices,” then you are well on your way to creating a site that works for mobile and for search engines. But keep in mind these key tips:

  • Image Write valid HTML, CSS, and JavaScript.

  • Image Make your pages responsive.

  • Image Remember that download speeds matter a lot, so keep your pages as small as possible—but no smaller.

  • Image Never hide content from mobile users. It’s fine to change how things are displayed, but content should be available no matter what device your customer uses.

  • Image Use the Mobile-Friendly Test tool from Google (https://search.google.com/test/mobile-friendly) to see how easy your site is for a mobile customer to use.

Writing Maintainable Code

If you’ve done any coding before reading these lessons, you already know how important it is to write code that can be maintained—that is, you or someone else should be able to look at your code later and not be utterly confused by it. The challenge is to make your code as immediately understandable as possible. A time will come when you’ll look back on a page that you wrote, and you won’t have a clue what you were thinking or why you wrote the code the way you did. Fortunately, there is a way to combat this problem of apparent memory loss.

Documenting Code with Comments

Whenever you develop an HTML page, CSS snippet, or JavaScript function, keep in mind that you or someone else will almost certainly need to make changes to it someday. Simple text web pages are usually easy to read and revise, but complex pages with graphics, tables, and other layout tricks can be quite difficult to decipher.

Note

To include comments in a style sheet, begin comments with /* and end them with */ (with your commented code between these characters).

The HTML <!-- and --> comment syntax does not work in style sheets.

To see what I’m talking about, visit just about any page in a web browser and view its source code. Using Microsoft Edge, right-click a page and select View Source. Using Chrome or Firefox, right-click a page and select View Page Source. In Safari, right-click a page and select Show Page Source. You might see a jumbled bunch of code that is as tough to decipher as pure HTML. This might be because content management software systems have generated the markup dynamically, or it might be because its human maintainer has not paid attention to structure, ease of reading, code commenting, and other methods for making the code readable by humans. For the sake of maintaining your own pages, I encourage you to impose a little more order on your HTML markup, style sheet entries, and JavaScript code. And remember: Proper indentation is your (and your future development partner’s) friend.

Note

Some designers use minify programs to compress their HTML, CSS, and JavaScript to make sure that it’s as small as possible. These speed up download for pages, but can make the code difficult to read. One solution is to use a tool like CodeKit (https://codekitapp.com) to minify your code after you’ve written it, immediately before delivering it to the live site. CodeKit is for Mac only. If you’re looking for a Windows alternative, one possibility is Prepros (https://prepros.io). You minify your code to make the pages faster, but you only do it once you’re done developing and ready to publish.

As you have seen in several of these lessons, you can enclose comments to yourself or your coauthors by using the HTML beginning and ending comment syntax: <!-- and -->. These comments will not appear on the web page when viewed with a browser but can be read by anyone who examines the HTML code in a text editor or via the web browser’s View Source (or View Page Source or Show Page Source) function. The following example provides a little refresher of how a comment is coded:

<!-- This image needs to be updated daily. -->
<img src="headline.jpg" alt="Today's Headline">

Note

One handy use of comments is to hide parts of a web page that are currently under construction. Instead of making the text and graphics visible and explaining that they’re under construction, you can hide them from view entirely with some carefully placed opening and closing comment indicators around the HTML that you do not want to appear. This is a great way to work on portions of a page gradually and show only the end result to the world when you’re finished.

As this code reveals, the comment just before the <img> tag provides a clue to how the image is used. Anyone who reads this code knows immediately that this is an image that must be updated every day. Web browsers completely ignore the text in the comment.

Try it Yourself

Commenting Your Code

It will be well worth your time now to go through all the web pages and style sheets you’ve created so far and add any comments that you or others might find helpful when revising them in the future. Here’s what to do:

  1. Insert a comment explaining any fancy formatting or layout technique before the tags that make it happen.

  2. Use a comment just before an <img> tag to briefly describe any important graphic whose function isn’t obvious from the alt message.

  3. Consider using a comment (or several comments) to summarize how the cells of a <table> are supposed to align.

  4. If you use hexadecimal color codes (such as <div style=color: #8040B0;>), insert a comment indicating what the color actually is (bluish-purple).

  5. Indent your comments to help them stand out and make both the comments and the HTML or CSS easier to read. Don’t forget to use indentation in the HTML, CSS, or JavaScript itself to make it more readable, too, as discussed in the next section.

You can also comment your CSS and JavaScript in a similar fashion. This is a CSS comment:

/* these are the main reset styles */

And this is a JavaScript comment:

# This line is commented out

Indenting Code for Clarity

We have to make a confession. Throughout these lessons, we’ve been carefully indoctrinating you into an HTML code development style without really letting on. It’s time to spill the beans. You’ve no doubt noticed a consistent pattern with respect to the indentation of all the HTML code in the lessons. More specifically, each child tag is indented to the right two spaces from its parent tag. Furthermore, content within a tag that spans more than one line is indented within the tag.

The best way to learn the value of indentation is to see some HTML code without it. You know how the song goes—“You don’t know what you’ve got 'til it’s gone.” Anyway, here’s a very simple table coded without any indentation:

<table><tr><td>Cell One</td><td>Cell Two</td></tr>
<tr><td>Cell Three</td><td>Cell Four</td></tr></table>

Not only is there no indentation, but there is also no space between rows and columns within the table. Now compare the code above code with the following code, which describes the same table:

<table>
  <tr>
    <td>Cell One</td>
    <td>Cell Two</td>
  </tr>
  <tr>
    <td>Cell Three</td>
    <td>Cell Four</td>
  </tr>
</table>

This heavily indented code makes it plainly obvious how the rows and columns are divided up via <tr> and <td> tags.

Consistent indentation might even be more important than comments when it comes to making your HTML code understandable and maintainable. And you don’t have to buy into this specific indentation strategy. If you’d rather use three or four spaces instead of two, that’s fine. And if you want to tighten things up a bit and not indent content within a tag, that also works. The main point to take from this section is that it’s important to develop a coding style of your own (or your team’s own) and then ruthlessly stick to it.

Note

If you work with other people (or plan to) in developing a website or a web-based application, consider getting together as a group to formulate a consistent coding style. That way, everyone is on the same page—pun intended.

Thinking About Version Control

If you’ve ever used Google Docs, you have encountered a form of version control; when you’re using Google Docs, Google automatically saves revisions of your work as you are typing. This is different from simply automatically saving your work (although it does that, too) because you can revert to any revision along the way. You might have encountered this concept when using popular blog-authoring software such as Blogger or WordPress, or even when editing wikis—both of these types of applications also enable users to revise their work without overwriting, and thus deleting for all time, their previous work.

You might be wondering, “Well, what does that have to do with developing HTML, CSS, or JavaScript? You’re just talking about documents.” The answer is simple: Just as you might want to revert to a previous edition of an article or a letter, you might want to revert to a previous edition of your HTML, CSS, or JavaScript code. This could be because you followed a good idea to the end, but your markup just proved untenable and you don’t want to start over entirely—you just want to back up to a certain point along your revision path. Or, let’s say you developed a particularly involved bit of JavaScript and discovered that something in the middle of it just doesn’t work with some browsers; you’ll want to build on and extend the work you did, not throw it away completely, and knowing what you did in the past will help you in the future. We use version control for every website we manage and every book or lesson we write.

Version control involves more than just revision history. When you start using version control systems to maintain your code, you will hear terms like these:

  • Image Commit/check in and check out—When you put an object into the code repository, you are committing that file; when you check out a file, you are grabbing it from the repository (where all the current and historical versions are stored) and working on it until you are ready to commit or check in the file again.

  • Image Branch or fork—The files you have under version control can branch or fork at any point, thus creating two or more development paths. Suppose you want to try some new display layouts or form interactivity, but you don’t want an existing site to appear to be modified in any way. You might have started with one master set of files but then forked that set of files for the new site, continuing to develop them independently. If you continued developing the original set of files, that would be working with the trunk.

  • Image Change or diff—The terms change and diff both refer to a modification made under version control. You might also hear diff used as a verb, as in “I diffed the files,” to refer to the action of comparing two versions of an object (and there is an underlying UNIX command called diff).

  • Image Fork, push, pull, and fetch—When you find an open-source GitHub repository that you want to use as the basis for your own work (or that you want to contribute to), you fork the repository to then create a copy of it that you can work on at your own pace. From the forked repository, you can push commits to your own version, fetch changes from the original repository, and issue pull requests to the owner of the original if you would like to contribute your changes to the original repository that you forked.

You will hear many more terms than just the few listed here, but if you can conceptualize the repository, the (local) working copy, and the process of checking in and checking out files, you are well on your way to implementing version control for your digital objects.

Using a Version Control System

Several version control systems are available for use, some free and open source, and some proprietary. Some popular systems are Subversion (subversion.apache.org), Mercurial (www.mercurial-scm.org), and Git (www.git-scm.com). If you have a web hosting service that enables you to install any of these tools, you could create your own repository and use a GUI or command-line client to connect to it. However, for users who want to get started with a repository but don’t necessarily want, need, or understand all the extra installation and maintenance overhead that goes with it, there are plenty of hosted version control systems that can even be used free for personal and open-source projects. These hosted solutions aren’t just for individuals; all sorts of companies and organizations both big and small use hosted version control systems, such as GitHub (www.github.com) or Bitbucket (www.bitbucket.org). For a few dollars, you can turn your free, public account into a private account and keep your code to yourself.

For anyone wanting to get started with version control, I highly recommend GitHub for relative ease of use and free, cross-platform tools. The GitHub Help site is a great place to start: See http://help.github.com. An added benefit of the already-free GitHub account is the capability to use Gist (gist.github.com) to share code snippets (or whole pages) with others (those snippets themselves are Git repositories and, thus, are versioned and forkable in their own right). Using GitHub repositories, including Gists, is also an excellent way to get started with version control of your work.

Using HTML and CSS Frameworks

If you use a content management system (CMS) such as WordPress (www.wordpress.org) or Drupal (www.drupal.org) to power your website, you will end up using a presentation template designed for one of those systems. But what if you do not want to use a CMS but would like a starting point for an advanced HTML and CSS presentation? Over the past few years, the web development world has seen the rise of HTML and CSS (or “front-end”) frameworks that can help solve this problem. Many of these frameworks are open source and available for download or forking from GitHub repositories. These frameworks often also include advanced JavaScript libraries, like the ones you learned about in Lesson 26, “Using Third-Party JavaScript Libraries and Frameworks.”

I recommend three popular HTML and CSS frameworks:

  • Image Bootstrap—Developed internally by engineers at Twitter, this framework is open-source software for anyone who wants to use it to get started with modern design elements. Learn more at http://getbootstrap.com, which includes a simple “Get Started” section that explains what is included and how to use it. Or you can get Jennifer’s book Sams Teach Yourself Bootstrap in 24 Hours.

  • Image Foundation—Another open-source framework, Foundation emphasizes responsive design so that people with all kinds of devices, from desktops to phones, can enjoy and use your website. Learn more at http://foundation.zurb.com, which includes an extensive “Getting Started” section that details the components of the display templates you can use.

  • Image HTML5 Boilerplate—One of the leanest frameworks out there, this might be the most useful for beginners because it provides the basics of what you need without overwhelming you with the possibilities. Learn more at http://html5boilerplate.com and see the documentation maintained within the GitHub repository.

Although front-end frameworks can be incredibly useful for speeding up some of the foundational work of web development, you run the risk of falling into the “cookie cutter” trap, in which your site looks like all the others out there (at least the ones using the same framework). However, with a little creativity, you can avoid that trap.

Summary

This lesson gave you examples and explanations to help you organize your web pages into a coherent site that is informative, attractive, easy to find in search engines, and easy to navigate. Web users have become quite savvy and expect well-designed websites, and they will quickly abandon your site if they experience a poor design that is difficult to navigate.

This lesson also discussed the importance of making your code easy to maintain by making liberal use of comments and indentation. Comments are important not only as a reminder for you when you revisit code later but also as instructions for someone who someday inherits your code. Indentation might seem like a minor aesthetic issue, but it can help you quickly analyze and understand the structure of a web page at a glance.

Because you likely will soon need code-management tools either for yourself or for yourself and other developers in your group, this lesson introduced you to a few version control concepts. Version control enables you to innovate without losing your solid, production-quality work and also provides more opportunities for other developers to work within your code base.

Finally, you learned a little bit about HTML and CSS frameworks, of which there are many. These frameworks can help you speed up your web development project by giving you templates that already contain modern and validated markup.

Q&A

Q. Won’t adding a lot of comments and spaces make my pages load more slowly when someone views them?

A. The short answer is not really because text is small and doesn’t add much to the file size. But you should still think about this because it is something that search engines consider when evaluating a page. If your site is 1/10 of a second slower than another, equally ranked site, that other site will be given precedence over yours in the search engine index. One thing you can do is minify your code by removing all the comments and extraneous spaces before you publish. You can learn more about the concept of minifying your HTML, CSS, and JavaScript at https://developers.google.com/speed/docs/insights/MinifyResources.

Q. Using version control seems like overkill for my tiny personal website. Do I have to use it?

A. Of course not. Websites of any type, personal or otherwise, are not required to be under version control or other backup systems. However, most people have experienced some data loss or a website crash, so if you don’t use version control, I highly recommend at least performing some sort of automated backup of your files to an external system. By “external system,” I mean any external drive, whether a physical drive attached to your computer or a cloud-based backup service such as Google Drive (https://drive.google.com), Microsoft OneDrive (https://onedrive.live.com), or Apple iCloud (https://www.apple.com/icloud/).

Workshop

The Workshop contains quiz questions and activities to help you solidify your understanding of the material covered. Try to answer all questions before looking at the “Answers” section that follows.

Quiz

1. How can you ensure that all your pages form a single cohesive website?

  1. Use consistent backgrounds, colors, and fonts.

  2. Repeat words or graphics at the top of your pages.

  3. Avoid repeating images.

  4. Both A and B

2. What types of information should you always include in your home page?

  1. Site name and descriptive information

  2. Site name and contact form

  3. Contact form and product list

  4. Both A and C

3. You want to say to future editors of a web page, “Don’t change this image of me. It’s my only chance at immortality.” But you don’t want users who view the page to see that message. How can you do this?

  1. Put the message in CSS

  2. Put the message in JavaScript

  3. Put the message in a comment

  4. You can’t. Everything you post will appear on the page.

4. What is a benefit of a single-page website?

  1. More mobile friendly

  2. Downloads quickly

  3. People prefer to link to them

  4. Both A and B

5. What is the largest number of links you should have in a navigation bar for maximum usability?

  1. Seven

  2. Six

  3. Five

  4. Four

6. What is an important aspect of SEO?

  1. Interesting content

  2. Easy-to-use navigation

  3. Mobile friendly

  4. All of the above

7. What is a way to write maintainable code?

  1. Use comments

  2. Use a code template

  3. Use user-friendly tags

  4. Both A and B

8. What does it mean to diff a version-controlled file?

  1. Add a new version to the repository

  2. Compare the version to the copy in the repository

  3. Modify the version in the repository

  4. Roll back to a previous version

9. How can you write mobile-friendly websites?

  1. Make pages as large as needed.

  2. Write valid HTML.

  3. Optimize images for quality over speed.

  4. Both B and C

10. Why use an HTML framework like Bootstrap?

  1. To speed up page loading.

  2. To make your code easier to read.

  3. To take advantage of a system for writing advanced designs.

  4. Both A and B

Note

Just a reminder for those of you reading these words in the print or e-book edition of this book: If you go to www.informit.com/register and register this book (using ISBN 9780672338083), you can receive free access to an online Web Edition that not only contains the complete text of this book but also features an interactive version of this quiz.

Answers

1. d. Use consistent background, colors, fonts, and styles. Repeat the same link words or graphics on the top of the page that the link leads to. Repeat the same small header, buttons, or other elements on every page of the site.

2. a. Use enough identifying information that users can immediately see the name of the site and understand what it is about. Also, whatever is the most important message that you want to convey to your intended audience, state it directly and concisely. Whether it’s your mission statement or a trademarked marketing slogan, make sure it is in plain view here.

3. c. Put the following comment immediately before the <img> tag:

<!-- Don't change this image of me.
     It's my only chance at immortality. -->

4. b. A single-page website downloads quickly, it can be fully printed, it can be saved on a hard drive, and internal links tend to respond more quickly than external links.

5. a. Most people struggle if there are more than seven links in the main navigation, and they prefer to see five or fewer.

6. d. Your site should have interesting content, implement easy-to-use navigation, and be mobile friendly.

7. d. Use comments to document the code and use a code template (indenting) to format the code for easier reading.

8. b. It means that you’re comparing it to the version in the repository or another version.

9. b. Write valid code (HTML, CSS, and JavaScript). Create responsive pages. Make the pages as small as possible. Never hide content from mobile users just because they are on a mobile device. Test your pages in the Mobile-Friendly Test tool.

10. c. HTML frameworks are great when you don’t want to use a full CMS but you do want a system for writing advanced HTML and CSS presentation.

Exercises

  • Image Open the HTML, CSS, and JavaScript files that make up your current website and check them all for comments and code indentation. Are there areas in which the code needs to be explained to anyone who might look at it in the future? If so, add explanatory comments. Is it difficult for you to tell the hierarchy of your code; that is, is it difficult to see headings and sections? If so, indent your code so that the structure matches the hierarchy and thus enables you to jump quickly to the section you need to edit.

  • Image Create an account at GitHub and create a repository for your personal website or other code-based project. From this point forward, keep your repository in sync with your work on your personal computer by committing your changes to the GitHub repository.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
34.206.1.144