Web Style Guide is a Must Read

Web Style Guide

Web Style Guide

Here is an easy to read, well-planned and executed style guide for web designers. If you’ve not come across this resource before, now is your chance to get stuck in! Thank you to Patrick J. Lynch and Sarah Horton for making this book available online.

The Web Style Guide is written specifically for web designers and throughout maintains an emphasis on design fundamentals. The book explains established design principles and covers all aspects of web design — from planning to production and maintenance.

So, without much further ado, make a cup of coffee and start reading – you will be amazed at what you can learn in the Web Style Guide Online!

Getting ready for HTML5

HTML5 logo.

The W3C says the logo "represents HTML5, the cornerstone for modern Web applications" but does not imply validity or conformance to a certain standard.

HTML 5 is the next generation of HTML, specifically designed to make it easier to develop web pages. HTML5 will be the new standard for HTML, XHTML, and the HTML DOM (Document Object Model).

It is also an attempt to define a single markup language that can be written in either HTML or XHTML syntax. It includes detailed processing models to encourage more interoperable implementations; it extends, improves and rationalises the markup available for documents, and introduces markup and APIs for complex web applications.

The specification is an ongoing work, and is expected to remain so for many years, although parts of HTML5 are going to be finished and implemented in browsers before the whole specification reaches final Recommendation status. It may still be years before this stage is reached, but many parts of the specification are already stable and may be implemented in products, for example I’ve noticed that some Blogger templates are already built on HTML5.

Visit the W3C Schools HTML5 tutorials to learn all about HTML5. Here are just a few basic issues to take note of, to get you kick-started.

HTML5 introduces a number of new elements and attributes that reflect typical usage on modern websites. Some of them are semantic replacements for common uses of generic block (<div>) and inline (<span>) elements, for example <nav> (website navigation block), <footer> (usually referring to bottom of web page or to last lines of HTML code), or <audio> and <video> instead of <object>.

Phrase text formatting has been simplified. Since HTML 4.01 there was an understanding that you should use Cascading Style Sheets (CSS) to format text, for example bold and italic. This is still the case, but in HTML5 you should use the <i> or <b> tag to define some part of a text as italic or bold type, but not how the entire block of text renders in the layout. Examples of other text formatting elements that can be used inline are: <cite> for a citation, <dfn> for a definition, <em> for emphasized text, <q> for a short quotation, <small> for small text, <strong> for strong text. There are more… read the tutorials!

Some deprecated elements from HTML 4.01 have been dropped, including purely presentational elements such as <font> and <center>, whose effects are achieved using CSS. There is also a renewed emphasis on the importance of DOM scripting (e.g., in JavaScript) in Web behaviour.

Some of the most interesting new features in HTML5:

  • The canvas element for drawing
  • The video and audio elements for media playback
  • Better support for local offline storage
  • New content specific elements, like article, footer, header, nav, section
  • New form controls, like calendar, date, time, email, url, search

The HTML5 syntax is no longer based on SGML despite the similarity of its markup. However, it has been designed to be backward compatible with common parsing of older versions of HTML. It comes with a new document type element that looks like an SGML document type declaration, <!DOCTYPE html>, which triggers the standards-compliant rendering mode in browsers.

HTML5 is not yet an official standard so no browser will have full HTML5 support, but all the major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions.

Are you ready to start using HTML5?

Sitemap.xml for Blogger

An XML sitemap is a list of pages of a website accessible to crawlers, also called search engine robots. There are several excellent online tools available to generate XML (and other) versions of sitemaps, for example xml-sitemaps.com. Typically the sitemaps are uploaded to the root of the website and by “submitting” the sitemaps to search engines, those search engines are notifieBlogger logo.d of the existence of the sitemaps. However, one does not have access to the root of a Blogger blog to be able to upload a sitemap.xml file there, but the RSS feed of the blog, its atom.xml file, can take the place of the sitemap.xml file.

To create an XML sitemap for a Blogger blog proceed as follows:

Log in to Google Webmaster Tools with your Google account and add your Blogger blog to your list of websites.

Verify your Blog by adding the meta tag generated during the verification process, as instructed, to the blog template.

Submit Sitemap.After your site has been verified go to “Add a Sitemap” in the Google Webmaster Tools. Add your blog’s atom feed URL at the Submit a Sitemap page.

The atom feed format is http://myblog.blogspot.com/atom.xml?orderby=updated.

Wait for some hours for Google to read your sitemap file and you will see the Sitemap Status as OK.

Note: The atom.xml contains only 25 posts by default and if you want to increase the number of URLs you need to change the URL to  http://myblog.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=100.

If you have hundreds or thousands of posts you have to add multiple sitemaps for your blog, like this :

http://myblog.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=100 (for the first sitemap)

http://myblog.blogspot.com/atom.xml?redirect=false&start-index=101&max-results=200 (for the second sitemap)  and so on.

Improve page speed with GZIP compression

gzip

Still on the topic of improving your website’s load speed, ensuring that files requested are served as compressed (zipped) files is an easy way of gaining large savings on load speed. Yes, it is true that the older browsers are not able to handle compressed files, but in terms of the modern internet, those are very old browsers such as IE 4.0 on Windows 95. Most website visitors have moved on from there by now.

So how does one compress your website files? There are various ways, but probably the easiest for most webmasters is this simple method:

1. Make sure that compression is enabled on the server settings (ask the ISP if you are not in control of the web server).

2. Add the following code to the .htaccess file for your website:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

There is an excellent explanation of how it all works in this article:
How To Optimize Your Site With GZIP Compression