I decided to do another fast forward in the Template Makeover Series. Take a look at the slide show to see where we started! The recent steps of the makeover have been recorded. We'll update this post later for readers who want to tweak their own Blogger design. The html code included adding a gray background image in the side and post columns and a starry background for the content wrapper. The new header is defined as a background image to allow flexible shrinking of the stretch style columns in this Sand Dollar Template. The header has ample space for a much needed menu bar. The RSS feed and search box can also be moved later to the top of the header.
- Click dialog icon for captions
I used the colorblind filter tool to check for sufficient contrast for anyone who may be colorblind. The page looked fine since the purple images become dark blue against gray. Contrast of text is even more important for the visually impaired (who may put the monitor in black and white mode, creating shades). There is an excellent readibility tool that tests specific text and background colors for contrast. This section is in Spanish, but just select your colors, press the big gray (comprobar) button and you see your score versus the minimum requirement. Hey, great time to learn another language!
Results compare the brightness (brillo) and color differences between the two elements.
e.g. for black text on white you would get
Bien" class="ico"> La diferencia en el brillo es 255. Debe ser superior a 125.Bien" class="ico"> La diferencia de color es 765. Debe ser superior a 500.The tool flagged the purplish link color on the gray background, but after checking, the score was okay: brightness of 158 which is higher than the 125 minimum, color of 392 lower than 500. If I change it to a dark blue #341473 then the difference is 458, much better.
Next we'll use the Blogger Fonts & Colors for text size and links --- not as straightforward as you might think. Some sidebar definitions are in the template only and some were overridden in previous posts. If you move a widget like "Popular Post" from the sidebar to the bottom of the Posts column, it retains the sidebar fonts but takes on the larger post title size ... More adventures!
Although this was a great learning experience, it further shows the importance of choosing your template wisely from the outset!
What do you think of the revisions? Any further suggestions? Is anyone really interested in seeing the html steps?
Print this post
Comments for this post
by RSS
ail
