Rebuilding My Site Using HTML 5 and RWD Techniques
The first project was a total rebuild of my own website to incorporate the principles of responsive web design (RWD) and HTML 5. These are two different aspects how today's websites are built.
HTML (Hypertext Markup Language) is a markup language that provides hyper-linking capability.
- Instead of repeating information, you can link directly to the source so visitors can see for themselves.
- Markup allows you to change how the content is displayed.
Think of how you add bold or italics to a document and you'll get a general idea of what markup is but it it also allows for more powerful presentation when using the capabilities of CSS (Cascading Style Sheets) to layout the content and to enhance features.
There has been a progression of HTML versions, the most recent being HTML 5. This version has approached things a little differently in that it aimed to work with both current and older hardware and software. The visitor might not see all the latest or even prettiest content, but the information would be visible and usable.
The second component is the responsive layout, the design of a site so that it was optimized for the visitor's device whether it was a smart phone, tablet, laptop or huge TV screen.
How the Sites Differ
Those familiar with my older sites remember the site navigation was located on the left side:
This was done because more items could be included in the navigation than was practical on a top-based navigation system without using technologies the visitor might not have like JavaScript. However, when viewed on a small screen, the visitor was forced to scroll horizontally to see all the content — not an ideal situation.
The newer design uses two main columns: the main content area (the full width content at the top) and an aside (the column headed by my photo):
The Computer Services and Web Design Services columns are part of the main content area, but use a technique to split the content into two columns.
As the view port (the technical name we use for the size of the screen) becomes narrower, the content collapses into the smaller area. First the aside slides under the main column then the two-column section of the main content area slide into a single column, the Web Design Services content underneath the Computer Services content.
At the same time, the top-level navigation narrows until it is no longer practical (it would overlap or the overflow would move underneath the remaining navigation items) and it is replaced with a graphic representing the navigation.
The image below shows the home page of my website when viewed in a narrow screen (320 x 480 pixels). Notice the site navigation uses the 3-line menu symbol for site navigation. When the viewer clicks of the navigation, it displays the six navigation elements in six full-width text lines.
Firefox users can see this using the developer tools. Ctrl+Shift+M should bring up a smaller view with some tools at the top. Here's how to use them:
- The x will close the window and restore the default view of the browser.
- The 320x480 indicates the current size of the window in pixels. Clicking that button gives you the other size options.
- The arrow will rotate the screen so you can view it landscape mode such as with a smart phone held horizontally.
- The finger button will simulate touch events like you'd experience using a tablet or other touch-enabled device.
- The camera allows you to take a screen shot of the current view.
Redesigning the Content
Because the site was redeveloped from existing content, I was limited in how I might best lay it out. Realizing that the majority of the site visitors were bound to be viewing on a laptop or desktop computer rather than on mobile devices, I opted to optimize the content for these larger screens.Mobile-First Becoming Dominant
This is opposite of the general rule to build for mobile first (the simplest layout) then add enhancements for devices that were capable of wider displays. Because of this, the sidebar information (which is floated to the right of the larger screens and therefore more visible than content further down the page) is placed below the main page content on narrower devices. This was not ideal, but better than either floating it to the top of the page or not displaying it at all.Decision Time
I was forced to make some decisions about how content collapsed and that affected how the page was laid out. No longer able to specify the width of the screen, I had to alter several design assumptions.Many of the old site's graphics were floated left or right (one reason for the fixed width of the content area) but this didn't always work with the new site. Mostly content fell down below the content above it.
Rather than a large centered logo and text, the image was resized smaller and floated left (with a small margin to the left to keep it from bumping against the side of the screen). Smaller devices would resize this so that it would never be larger than the view port.
Issues with the Aside Content
The main change was the aside (narrow right column) which dropped below the main content and was therefore not easily seen in a narrow device. On the home page, there wasn't much content and this was not as much of an issue. Site visitors could scroll past the Web Design Services and Computer Services content to find the Reasonable Rates aside content.However, there is much more content on my Resources pages so I had to change the internal navigation menu and move items around on the individual pages. I made changes to how I labelled content (particularly what was in the aside) to make sure that visitors viewing the site on a narrow device could locate the content easily.
A Large Site with Several Purposes
This is a large site containing 108 pages of content plus the stylesheets and other content to make it work for multiple screen sizes plus to have enhancements like opening external links in a new tab while retaining proper HTML protocols.Have a look at the new site and see how I've dealt with these issues.
