Creating Web Pages All-in-One For Dummies Cheat Sheet - dummies
Cheat Sheet

Creating Web Pages All-in-One For Dummies Cheat Sheet

From Creating Web Pages All-in-One For Dummies, 4th Edition

By Richard Wagner

Unless you’re a professional Web designer, you might be a bit unsure of – and maybe even a little intimidated by figuring out – where to start creating your Web site. Whether you use an online editor (WordPress or Squarespace) or a Web-site-building software application (Adobe Dreamweaver or Microsoft Expression Web), use this cheat sheet to create a fantastic Web site.

Tips for Good Web Site Design

Because the Web is a visual medium, the design of your Web site is as important as the content you offer. Follow these tips so your visitors aren’t quickly leaving your site:

  • Don’t clutter up your site. Make good use of padding, margins, and whitespace.

  • Be careful not to overwhelm your visitors on your home page. Keep content to a minimum, referring users to other parts of your site for additional information.

  • Don’t use a hodgepodge of design ideas. Find a style you like and be consistent across your site.

  • Extreme symmetry is a yawner. Use the Rule of Thirds. When an image or a page is divided into thirds vertically and horizontally and objects are positioned on those lines, the image is simply more pleasing to the eye.

  • Don’t forget about the visitor. You’re not designing the site for yourself, but for people coming there.

  • Don’t let your site content grew stale. Update it regularly to keep it alive.

Designing Your Site for Mobile Users

With the power of smartphones and their fully functional mobile browsers, mobile visitors expect to have a satisfying browsing experience. You’ll want to fully consider the mobile user in your design and determine the level of support you want to provide for them:

  • Basic compatibility: The first level of support is simply making sure that your Web site is viewable and operable inside a mobile device. If your Web site is using standard CSS formatting and HTML structures or if it is built using popular online tools (WordPress, Posterous), your Web site is probably already set up to support smartphone browsers.

  • Mobile friendly: The second level of mobile enablement is to make sure your Web site is easy to navigate on a small screen. One of the most important ways to make your site mobile friendly is to structure the pages into columns. Columns help prevent users from being forced to read wide chunks of text that cause them to scroll left and right to read each line of a Web page.

  • Mobile styling: A third, richer, and deeper level of support that you can provide mobile users is to incorporate styling specifically targeted for mobile devices.

  • Companion site: There may be some specific cases in which you need to go beyond the page structure and styling. In this case, a final level of support is to design and structure a site from the ground up in a manner that is optimized for mobile devices.

If you offer a mobile version, always allow users the freedom to choose between the mobile and normal versions of your Web site. While you may default to the mobile style sheet for your mobile users, provide the functionality on each page to view the site normally.

Using Cascading Style Sheets, or CSS

Cascading Style Sheets (CSS) is a styling language that enables you to create a more attractive, well-designed Web site and make it much easier to manage and organize. Here are three basic reasons that CSS is helpful when designing your Web site:

  • CSS gives you greater control over your page design. CSS has many formatting settings that HTML, by itself, does not provide. As a result, you can have much greater control over the look of your Web page by using CSS than just using normal HTML.

  • CSS allows you to separate your site content from the formatting instructions. The HTML document, therefore, becomes the place where you work with content, and the CSS style sheet serves as your place to set up your styles.

  • CSS enables you to manage styles across your site in one central location. Although you can define CSS styles inside a single Web page, its real power becomes evident when you use a separate CSS style sheet that every page in your Web site can access. When you set up your site like this, you can easily give your entire site a consistent look and feel. You can also make global changes from a single location.