chapter seventeen

Final Steps and Conclusion

Cool Shoes & Socks is now a truly modern web page. It looks and functions great both on mobile and desktop devices and, with the approach you’ve taken, should stand the test of time, continuing to be a great page as technology and devices advance. Of course, because it is only one page, you will almost certainly want to create more. The page you created throughout CSS3 Foundations makes for a great template that you can easily duplicate and modify for existing pages.

Final Steps

When you’re happy with the site, what’s next? The page will need some final adjustments to get it ready to show the world!

Removing Production Code and Preparing to Go Live

In Chapter 2, I mentioned that all styles should be placed in one stylesheet where possible. This step is optional but one that can improve the performance of a web page. Cool Shoes & Socks consists of four stylesheets: reset.css, styles-ie.css, styles-ie7.css, and styles.css. Because styles-ie.css and styles-ie7.css are conditional stylesheets, they have to stay separate, but you can combine reset.css and styles.css.

1. In styles.css, find the following @import rule and delete it:

@import url(“reset.css”);

2. Open reset.css, highlight all the styles, and copy them.

3. In styles.css, paste the copied reset.css styles where the @import rule was located.

4. Save styles.css.

Now that the reset styles are included in styles.css, you can minify them. Minifying is also optional but good for performance. Minifying a stylesheet causes all spaces to be removed from that file, reducing the file size—so it can be downloaded faster—and making it easier for a browser to read.

Many minifying tools are available, but my personal recommendation is www.cssminify.net, which is one of the easiest and quickest to use.

5. Create a new file, call it styles.min.css, and save it in the css folder.

6. In styles.css, highlight all the styles and copy them.

7. In your browser, navigate to www.cssminify.net.

8. In the text area on the www.cssminify.net site, paste the styles from styles.css.

9. From the Compression drop-down menu, select Highest and click Minify.

When you click Minify, spaces and returns are stripped out of the styles in the text area.

10. Highlight and copy all the minified styles from the text area.

11. Return to styles.min.css and paste the minified styles.

12. Save styles.min.css.

Now that you have a minified version of styles.css, index.html needs to reference it.

13. In index.html, find the reference to styles.css and change it to reference styles.min.css:

<!--[if ! lte IE 6]><!--><link rel=”stylesheet”

href=”css/styles.min.css” type=”text/css” /><![endif]-->

14. Save index.html.

Cool Shoes & Socks now uses the minified styles from styles.min.css instead of the production styles found in styles.css.

Testing, Testing, Testing

In Chapter 15, you prepared Cool Shoes & Socks to begin modifying it with media queries. Having modified the site in this chapter and Chapter 16, you should test it again to be doubly sure it is cross browser compatible. Although testing can sometimes be tiresome, it is a very important step and should be your last step before making a page live for everybody to see.

Going Live! Uploading to a Web Server

When you’re satisfied that a web page is cross browser compatible, to make it live, you need to upload it to a web server, most commonly done using FTP software.

Many text editors nowadays come with built-in FTP software, and if this is the case, consult the instructions provided with your text editor to set it up. Alternatively, dedicated FTP programs are available, some free and some paid.

My recommendations are Cyberduck (www.cyberduck.ch) and FileZilla (www.filezilla-project.org), both free and both available on Mac and Windows.

If you choose to use one of these FTP clients, see the documentation made available on its website for instructions on how to use it.

The Future Web

With Cool Shoes & Socks, you created a page suited not just to the modern web but also the future web. Its robust, responsive layout will make it appear and function great across many different types of devices now and in the future. Will CSS offer anything more for the future, though? Of course!

Because the CSS3 specification is still being modified, you will be able to use many new technologies in the near future. Here are a couple:

• Filter Effects (http://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html), which changes the style of an image similar to what you can do in photo-editing applications such as Adobe Photoshop.

• Flexible Box Layout (www.w3.org/TR/css3-flexbox/) and Regions (http://dev.w3.org/csswg/css3-regions/), which make laying out a page easier and more robust.

What’s more, work has already started on new CSS modules, which propose new selectors and media features, with no doubt lots more exciting goodies on the way, too!

The web is a fascinating technology to be a part of. And now styling beautiful content is easier than ever. If you can dream it, you can create it.