Blart-layout
From KallestadWiki
Contents |
Blog / Article Layouts
I've laid out some ground work with the layouts and here's what I've come up with so far.
This design is largely based on the original Zen Garden design, but only in the appearance of the layout. I hardly referenced the sites html or css - in the true spirit of the Zen Garden, it was used merely as a starting point for ideas.
I currently have defined several areas that need attention moving forward. This is just basic layout and will need to be tested on several platforms for consistency.
I've been working on this layout for several days now, and one thing is clear - CSS does not make things easier. It makes things cleaner for sure, but easier? Not a chance. Minimum and Maximum widths have turned into a problem. Text that wraps that shouldn't in certain scenarios is a problem. The markup required for various CSS issues is a problem. The question of what links are appropriate for all pages in a site is a problem. What screen dimensions should be supported? Is leaving big chunks of whitespace an issue? What about javascript... Using prototype is at least a 13K bump, but more likely, considering my thoughts on compression, it's a 28K bump, plus at least 2 additional script loads per page - which is 6 seconds at 56K. The thing is that prototype makes a lot of things easier and thinner - and it will definitely be used on more interactive site pages.
Working on this layout further, I have some visio diagrams with some more specifics.
Top Navigation
For this area, I steered clear of menus - both CSS Based and Javascript based. Menus carry with them an inherent weight. Javascript and CSS files are cumbersome and sometimes difficult to work with - though there are some that are better than others, incompatibilities can be introduced. Further, they seem to get used, in my experience, quite rarely. The benefits you get from an SEO perspective for identifying the important pages in your site are outweighed by the fact that they affect page relevance and introduce a sometimes large set of unrelated linkage and text within a page. I opted for a few simple links that define clear starting points within the site.
I'm not a huge fan of sidebars, but with open space appearing on either side of the layout, I can clearly define categoy links within each area. I'm still torn as to the usefulness of breadcrumbs. They get used rarely, but they are quite helpful at times - although they imply a tree based structure which isn't necessarily the case for a lot of sites.
Issues to deal with
- Decide on an effective set of top level links.
- Find a way to deal with minimum width (IE6 Still a problem after CSS Declaration)
- Figure out what the minimum width should be. - 980px
Background Images
There are two very large background images that are part of this layout. Normally, I would refrain from placing such large images in a layout, but their placement in the corners really helps to define a good deal of the layout while leaving a lot of open space to work with.
A couple of things that I've noticed are that fading the images does a great deal towards shrinking them, and clearing out areas of space within the triangular section defining the page helps as well. The pictures I've chosen for the layout example are not ones I will go live with - just a starting point to get everything laid out correctly. Color consistency between the two images is important - at least the strong colors should be compatible with the overall scene of the page.
Including a title implies a certain level of image quality, and so does font selection.
For the top image, I've allowed a darkened area at the top which is visually appealing and it's the one solid line that appears on the page at this point. It draws attention to the upper left corner without overpowering the content within the page. I've chosen two fonts for the title and subtitle that do not appear on the page. The title font color is the strongest element on the page and drives the color theme. I suppose a lighter color would command less attention and leave other color schemes to be open, but I like the way this has worked out.
The width and height of the elbows in these images determine the amount of space available in the header area, the sidebars, and the footer. These are important elements to consider.
I think in this layout, the image sizes worked out to about 30K. I think I can shrink that number a bit for the live version of this style, but essentially I'm adding about 7 seconds to page load times for 56K users. These images shouldn't hold up the page display since they are background images, but I'll have to prove that during testing. The images should be cached well, so once someone has already committed the 7 seconds of time, they should not have to do that for consecutive pages.
I'm thinking that the images could be seasonal - different images for summertime, valentines day, christmas, etc. as an easy way of making the site festive. As long as the color scheme is compatible with my strong colors and overall site theme, whatever images I choose should work well.
Issues to Deal with
- Decide on sizing for elbow areas
- If content is small, the lower elbow does not reach the bottom of the viewable area
- Come up with a set of images to be used year-round
- minimum width so that bottom right corner doesn't overlay text
Right Sidebar
I've decided to use the right sidebar for navigation purposes only, and only high level on-site links should appear here. It should be at most 5 links, and they should be desirable, next-to-top level, content filled pages with easy navigation options to sub-areas within the site.
I think I'll place a search box in this area as well, space permitting. Or I might just place it in the footer.
Issues to Deal with
- I want to style these links like I had it set up at ovenbuns.com -- li hover shows an image based disc and highlights the background, potentially a border in between items.
- These links imply quality pages at the base of the heirarchy. Layouts, templates, and a management system behind such is required.
- Determine appropriate width
Removed
Looks like this area is going to get removed from the new layout.
Left Sidebar
The left sidebar is the area I've chosen for user status information. User status information is usually relegated to dynamic areas of a site, but since I want to have multiple disparate dynamic areas, users should know when they are logged in and if so, basic information like a "Welcome back!" or "You have messages" kind of things should be available on any given page within the site. I don't want to detract from the overall theme of a page, and I don't want to decrease the performance of static pages, so I've decided to use an iframe here. This is a relatively thin area, so the information provided must be basic.
Issues
- Cross-site scripting vulnerability potential
- Determine the content of this area
- Style the iframed page
Summary / Pullquote
Depending on the page content, this area may or may not be relevant. It's entirely optional, and when present the width will be fixed, but the height of this element is flexible. It could be a summary of what is present on the page, or it could include a quote from within the article.
Main Content Area
The main content area is simply that, the main area for the page content. Looking at the highlighted area of the screen, it seems like we are using up a lot of screen space for other elements, but really compared to most websites, I think it's a big chunk of whitespace to work with.
Issues
- With some thin content, I might want to thin out the region.
Further Thoughts
While going through some guidelines for websites last night, one of them mentioned viewing the layout in a text browser. Here is a comparison of the existing layout compared with the new layout.
The goal of this design really was to come up with something that could be used as a base model for other layout styles within the site. This design leaves a great deal of whitespace to work with, while still being good looking.
I chose to use a slightly off-white background. White on my screen was a little bit too bright for me to deal with for an extended length of time, and colored backgrounds restrict your content a little bit too much for my tastes.
Layout consistency across browsers is achieved using two external resources - both of which I've modified slightly for my own reasons - the YUI Fonts by Yahoo, and Eric Meyer's Reset.css.
I have noticed two problems with YUI - first 120 DPI fonts used in many widescreen laptops. 120 DPI fonts throw off the expected layout significantly. The other is line-height. It's not specified within YUI, and it means that vertically positioned layout elements with relative positioning cannot be counted on. It's not so much an issue with this particular layout, but it was a problem when I started playing with layout configurations.
The speed report for this layout shows a load time of 8.64 seconds on a 56K connection. This includes 3 CSS imports (I separated out my main CSS from my font and reset CSS files) totalling ~2.7K, 2 images totalling ~31K, and an html file size of ~2K. For consecutive visits, the download speed would be < 1 second, since the CSS file and images would be cached. No doubt, there will end up being a few more stock images and a javascript file before this goes live - but considering the fact that I expect any images within the HTML to be sized properly, the speed of repeat visits should be extraordinarily fast.
Further, since most pages should be served up statically, web server performance should be excellent.
I used a proxy server to check how much information needs to be downloaded before a page will display. Firefox will display the page as soon as the CSS files are loaded - but before the images. IE7 displays the same behavior. This puts new visitors at a 2 second mark before the data they are looking for gets displayed.
Min-Width is an issue currently, but max-width is an issue as well - after seeing this laid out on a 1920 pixel wide screen.
Undefined Regions
- Footer (RSS / About / Search / Copyright)
- Author Information
- Related Links
- Discussion Links
- Default Ad Location
- Pagination Links
