New Brittany Gite website design - coming soon (part one)
For the last few weeks I have been working on a redesign of our Brittany Gite website, and although it's still quite a long way from being finished I thought I'd share the work so far.
This is probably the most major redesign of the site I've done since it was first completed in January 2005 so if I'm going to go to all this effort then I'd really like to make sure that it's a step forwards rather than backwards - please comment as to what you think.
The first thing I've been doing is to break the text up on the page more and add subheadings so that it's both easier for the visitor to read the page quickly and (hopefully) it'll boost my search engine placement as well. Many of the search engines apparently place greater significance on the words within headings (such as <H1>) than on ordinary page text and as I originally never had any headings I was probably missing out. So far I've made this change to the travel options page and now the home page and I think they both look better as a result.
Next to tackle was the page width.
When I originally designed the site it was deliberately designed so that it viewed properly (without having to scroll left and right) on an 800 x 600 screen size. Looking at my website logs for 2005 and 2006 I feel that's still the right decision, it's the third most popular screen size and that's used by 13% of visitors to the site. However the majority of site visitors have 1024 x 768 (56%) or 1280 x 1024 (16%) screen sizes so I've been thinking for some time that I needed to redesign the site so that it takes advantage of the whole screen width.
My original design has used a fixed width HTML table (e.g. <TABLE> <TBODY> <TR> <TD> text ... etc) to position the 'masthead logo' at the top, the menu bar down the left, the main text in the middle and the pictures to the right. The great advantage of this approach is that it's relatively easy to do the HTML coding and it guarantees that the page text appears just where I want it to do. Unfortunately on a wider screen size the text all still appears fixed width with a lot of white space to the right hand side. Using a table for the website layout is hard to get it to expand to full screen width and this approach is now somewhat frowned upon - if possible a CSS solution is considered "better design".
The other problem with using tables is that everything has to appear in the HTML in the order it appears on the page from top to bottom, left to right. This means that first in the file is the header picture, then the menu text, then the main text, and finally the images. Although this all sounds logical it can cause problems for some search engines that attach more 'significance' to the earlier words in the HTML file. So a search engine reading my site would have to wade through 'Home', 'The Gite', Things to do and see', ... all the way to 'Site Map' before it got anywhere near the actual interesting stuff on the page. Some search engines only read the first few hundred characters in the file so with the approach I'd adopted I was potentially cutting down my search engine marketing effectiveness.
The first redesign attempt was to add DIV sections for the header, table of contents down the left hand side and the main site contents in the middle/right. I then used absolute positioning in the CSS file to position the DIV's in the appropriate places (e.g. #nav{ position:absolute; top:100px; } ) and it actually all worked pretty well.
There's a test version of the homepage restyled like this at http://www.giteinbrittany.com/test/index_pos.html and in both IE6 and Firefox 1.5 it looks good no matter what size you make the width or height.
However I have slightly cheated with this page as although it uses CSS to position the menu bar it still uses a table to position the pictures to the right of the main text.
Next challenge was to try to get a CSS solution working to position all elements of the page. My first attempt was to simply extend the 2 column approach, add an extra DIV around the pictures and position it using CSS. This didn't work properly on the first attempt as the text still expanded to full width and the images then appeared on top of the text. Putting a padding-right on the centre DIV (where the text is) that's the same width as the pictures fixed the problem.
Again, there's a test version of the homepage restyled like this at http://www.giteinbrittany.com/test/index_pos_3col.html. This looks pretty good in both IE6 and Firefox 1.5 until you reduce the screen width to less than 800 when the pictures start overlapping the text in Firefox (but strangely enough have no such problems in IE6). I've not worked out how to fix this particular issue - the CSS command 'min-width' should fix it but it doesn't appear to in Firefox.
So far the restyling has been fairly cosmetic. The next set of changes I've been trialling get far more radical ...
This is probably the most major redesign of the site I've done since it was first completed in January 2005 so if I'm going to go to all this effort then I'd really like to make sure that it's a step forwards rather than backwards - please comment as to what you think.
The first thing I've been doing is to break the text up on the page more and add subheadings so that it's both easier for the visitor to read the page quickly and (hopefully) it'll boost my search engine placement as well. Many of the search engines apparently place greater significance on the words within headings (such as <H1>) than on ordinary page text and as I originally never had any headings I was probably missing out. So far I've made this change to the travel options page and now the home page and I think they both look better as a result.
Next to tackle was the page width.
When I originally designed the site it was deliberately designed so that it viewed properly (without having to scroll left and right) on an 800 x 600 screen size. Looking at my website logs for 2005 and 2006 I feel that's still the right decision, it's the third most popular screen size and that's used by 13% of visitors to the site. However the majority of site visitors have 1024 x 768 (56%) or 1280 x 1024 (16%) screen sizes so I've been thinking for some time that I needed to redesign the site so that it takes advantage of the whole screen width.
My original design has used a fixed width HTML table (e.g. <TABLE> <TBODY> <TR> <TD> text ... etc) to position the 'masthead logo' at the top, the menu bar down the left, the main text in the middle and the pictures to the right. The great advantage of this approach is that it's relatively easy to do the HTML coding and it guarantees that the page text appears just where I want it to do. Unfortunately on a wider screen size the text all still appears fixed width with a lot of white space to the right hand side. Using a table for the website layout is hard to get it to expand to full screen width and this approach is now somewhat frowned upon - if possible a CSS solution is considered "better design".
The other problem with using tables is that everything has to appear in the HTML in the order it appears on the page from top to bottom, left to right. This means that first in the file is the header picture, then the menu text, then the main text, and finally the images. Although this all sounds logical it can cause problems for some search engines that attach more 'significance' to the earlier words in the HTML file. So a search engine reading my site would have to wade through 'Home', 'The Gite', Things to do and see', ... all the way to 'Site Map' before it got anywhere near the actual interesting stuff on the page. Some search engines only read the first few hundred characters in the file so with the approach I'd adopted I was potentially cutting down my search engine marketing effectiveness.
The first redesign attempt was to add DIV sections for the header, table of contents down the left hand side and the main site contents in the middle/right. I then used absolute positioning in the CSS file to position the DIV's in the appropriate places (e.g. #nav{ position:absolute; top:100px; } ) and it actually all worked pretty well.
There's a test version of the homepage restyled like this at http://www.giteinbrittany.com/test/index_pos.html and in both IE6 and Firefox 1.5 it looks good no matter what size you make the width or height.
However I have slightly cheated with this page as although it uses CSS to position the menu bar it still uses a table to position the pictures to the right of the main text.
Next challenge was to try to get a CSS solution working to position all elements of the page. My first attempt was to simply extend the 2 column approach, add an extra DIV around the pictures and position it using CSS. This didn't work properly on the first attempt as the text still expanded to full width and the images then appeared on top of the text. Putting a padding-right on the centre DIV (where the text is) that's the same width as the pictures fixed the problem.
Again, there's a test version of the homepage restyled like this at http://www.giteinbrittany.com/test/index_pos_3col.html. This looks pretty good in both IE6 and Firefox 1.5 until you reduce the screen width to less than 800 when the pictures start overlapping the text in Firefox (but strangely enough have no such problems in IE6). I've not worked out how to fix this particular issue - the CSS command 'min-width' should fix it but it doesn't appear to in Firefox.
So far the restyling has been fairly cosmetic. The next set of changes I've been trialling get far more radical ...
posted by Geoffrey at 11:44 pm Permalink
0 Comments:
<< Home