ifacethoughts

Rationale Behind The Current Design

So finally do get time to explain some rationale behind the current design. I would like to clarify that I am not a Web designer, that is, professionally. I am a software programmer, who understands the elements of design, or maybe still trying to. I am really bad with images and graphics. This blog is a place for experiments to improve my understanding of the underlying technologies.

Before
The interface theme homepage

After
Preview of the current elastic design.

The Rationale

The Layout

When I started out with the redesign, I wanted to create a minimalist theme – one that be best for performance, with minimum number of images (I wonder why!). However I did not want to compromise on any aspect of accessibility and usability. I also wanted to experiment with elastic design, where the content area is proportionate to the font size. If you increase or decrease the font size, the content area will change proportionately with it.

I have stuck with the mullet style design, which displays the first post in full and the other in excerpts. This happens only on the home page of the blog. The layout is a simple two column layout, one for the primary content and the other for the secondary.

The Markup

One more thing I wanted to do was assign priorities to the content types and load them in that order. The current order is:

  1. The blog title
  2. The about text
  3. The navigation
  4. The blog post(s)/page(s), which I call the primary content here
  5. The content in the sidebar, which I call the secondary content
  6. The footer

My effort was to load the markup for each of them in the same order. If you do view the source, you will realize that they are loaded in that order. Actually the skiplinks, used to skip to the primary content or navigation is loaded before anything else, for convenience on other devices like the hand-held ones or the screen readers.

I have also tried to maintain semantic validity, however I believe there is some more work needed.

The CSS

The CSS code has gone through some processing to make it smaller. It is not there yet, but enough to give it some rest. I have use the float property to the fullest. By the look it appears as if the blog title, the navigation are part of the sidebar and are loaded together. As mentioned earlier, the markup is loaded according to the priority, but visually they seem to be grouped together. This is purely done by floating the blog title, the navigation and the secondary content to the left, the skiplinks, the about text and the primary content to the right.

The choice of colors was not very difficult. The blue will always be there, and pink was the logical opposite of blue for me. The highlight colors are not original, I have lifted them from other themes. I am sorry, I have seen so many themes that I cannot remember exactly which one it was.

I still need to cleanup the CSS as and when I get time with it.

Testing

I have tested this in Firefox, IE 7, Konqueror and Opera on Linux and Windows. I believe the layout is a bit affected in IE 6, the primary content clears the navigation and starts on the next line. I am conveniently assuming that testing on Konqueror will be indicative of how the site will look on Safari. If you are using any other browser and find problems, feel free to report.

I am not using any widgets currently, I call the functions in the correspondingly place, even while using widgets. I plan to show different content for different context and felt restricted while using widgets.

Todo

There are still some things to be done, which I will slowly incorporate. They are not related with the style modification, but with some additions.

  • Use the style switcher done by Christian Montoya to provide a high contrast layout.
  • Do specific design for the hand-held devices and print medium.
  • The retrieval of pages for the navigation is not satisfactory.
  • Add breadcrumbs or some indication to the user about where he/she is in the site.

Currently I am using Google Coop as a search engine for this blog, but it is part of an experiment I am doing. It will keep changing, however I will try my best that you do not have to do different things for it.

I think that is it. As always, if you have any suggestions, do ping me.

Discussion [Participate or Link]

  1. Alpesh Nakar said:

    Hi Abhi,
    I really liked the design. Well done.

    Cheers!
    Alpesh

  2. Abhijit Nadgouda said:

    Thanks Alpesh!

  3. On Blog Homepage Design | iface thoughts said:

    […] a day, you can keep the top one or two posts in full and the rest as excerpts or links, called a mullet style design, which provides a balance between only excerpts and only full posts. If your frequency is […]

  4. Experimenting With A Makeover | iface thoughts said:

    […] layout. Primarily the sidebar on the left was not preferred, so I have changed that. Note that the order in which the content is loaded is still the same, only the view has changed. Also, I have taken this opportunity from the all […]

Say your thought!

If you want to use HTML you can use these tags: <a>, <em>, <strong>, <abbr>, <code>, <blockquote>. Closing the tags will be appreciated as this site uses valid XHTML.

freshthoughts

contactme

Abhijit Nadgouda
iface Consulting
India
+91 9819820312
My bookmarks

badgesand...

This is the weblog of Abhijit Nadgouda where he writes down his thoughts on software development and related topics. You are invited to subscribe to the feed to stay updated or check out more subscription options. Or you can choose to browse by one of the topics.