Optimize your Cascading Stylesheets

Geekie.org is making available a clone of Robson’s CSS Compressor using the GPL-licensed source code available at http://iceyboard.no-ip.org/showcode/code/css_compressor.php.

Just so that I didn’t have to go and search the Internet for this excellent CSS compressor every time I wanted to use it, I decided to host the code and frontend on our site. You can find it at http://www.geekie.org/tools/css.compressor. Bookmark it for future use! There are no advertisements on the frontend and the backend works exactly as it was intended to work at the original site.

Previously I talked about a long method of compressing JS or CSS on-the-fly with PHP’s zlib.output_compression. What this tool does isn’t “compress” in the sense of changing the output between the server and your browser, but rather optimize Cascading Stylesheets by changing the way that colours are defined to the shortest form possible, combining different declarations that are similar or identical, and removing useless measurements like 7.00 em. The result can be compressed to as little as 30% of the original code, depending on how it was written.

We recommend that you try this tool, and speed up your site. It’s easy; just copy and paste your CSS into the box and press submit. The default settings work fine for most stylesheets, and help you reduce your filesize significantly. The only downside is that the resulting code won’t be as easy to edit as before, so always keep your original, pre-optimized stylesheet backed up!

(No Ratings Yet)

 Loading ...

Background Preferences enabled

The hugely modified edition of the Vistered Little theme that I am using on this site still contains the original code that allowed for the changing of wallpapers. But I’ve disabled the JavaScript-based wallpaper selection that appeared under the blog title in the default theme, and instead forced the users to accept the picture that I set.

But there are those that realize that scrolling isn’t so smooth when there’s a picture in the background.

So I’ve spent some time creating a cookie-based solution called Background Preferences that will let YOU choose what background you want on our site: your choices are limited to black, white, and the picture that I select, but you’re still able to change how the site looks.

The premise of Background Preferences is that users should have a choice… but a limited selection of choices. There’s some complex PHP coding going on in the background that will set cookies & session variables, modify the CSS of the site, and so on, but nevertheless it works. (As far as I know, on Firefox and IE.)

Go try Background Preferences and set your background to a black one. (The second link just does it for you. Specially-formatted links can do that. Don’t try it yourself. It only works on links from Geekie.org.)

Sorry, feed readers. This only works on the site. You can still go to the Background Preferences page from the first two links in this post, but the last link won’t work for you.

(No Ratings Yet)

 Loading ...

Reminiscence 1

In an effort to celebrate the increase in PageRank for Geekie.org and a number of other FreddyWare assets, I have changed the wallpaper for Geekie.org to that of the site in February. The image is called Lime Light, and is royalty-free photography from stock.xchng . Thanks to stock.xchng for that!

In the future, there will be a number of “Reminiscence” posts where I relate something to a time in the past. Usually, there will be something that brings back memories of a prior time. In this case, Reminiscence 1 brings us back to the start of Geekie.org.

Another matter: in order to most effectively deploy wallpapers and CSS changes, I need to know what the screen resolution of my users are. That would help in resizing wallpaper photos to a suitable size so that it doesn’t take too long to download. Besides, it’s important that the wallpapers appear properly for any resolution.

That’s it for now.

(No Ratings Yet)

 Loading ...

Yet more changes

Today marks a very important hallmark in the revisions to Geekie.org’s design. The Vistered Little theme has been used for many months, since the creation of Geekie.org, but went relatively unmodified until recently. Today, I have made changes to the theme that could justify its independent release as a WordPress theme.

Geekie.org’s theme is now no longer regarded as the Vistered Little design for several reasons.

Wallpaper

• the wallpaper switching functionality has been disabled (there is no option for the user to change the visual design)
• the default background will be switched every once in a while from our repository of royalty-free images
• all background images designed for 800 x 600 and above, preferably 1024 x 768
• all background images optimized for fast loading, especially on a broadband connection

Sidebars

• there are now two sidebars (left and right) rather than the original one (right) and the choice for a left sidebar
• each sidebar is now also widgets-compatible
• fully coded in VALID CSS
• new sidebars not dependent on location
• all sidebar locations compatible with Firefox 2.0+, IE 7, on Windows XP/2003 at 1024 x 768
  • if you have problems, please comment or e-mail us
• the sidebars are now loaded AFTER the main body (posts)
• enhances the loading time (delays in loading the sidebar do not prevent the user from reading the page)
• search engines pick up new content before considering the often-useless links of the sidebar
• some shifts between where widgets are displayed have occurred

Advertisements

• after some experimentation and research, leaderboard ad units (top of page) have been removed
  • they prevented more content from being shown
• a sidebar ad (skyscraper) unit has been added on the right side
• we will experiment with in-post ads and banners after the first post
• the rotation of ads has been temporarily halted for performance reasons

Other

• faster loading time with compression
• now fully VALID XHTML 1.0 Transitional
• CSS & JavaScript in process of being optimized
• no more waiting for the main content - the posts are always shown first, followed by the sidebars, and lastly the ads
  • before this change, ads would need to load first before the sidebars, followed by the content (we’ve switched it around entirely)
• less distracting advertisements
• more useful content viewable before scrolling
• users with JavaScript disabled or ad blocking can still enjoy full benefits (this was somewhat lacking before my modifications)
• font design experimentation is still ongoing

In summary

Users will find the newer interface a whole lot easier to navigate and use. It has been optimized for efficiency, not necessarily performance on our server, but ease for the client. There is now compatibility (full) for Internet Explorer as well as other major browsers.

Although the site has been designed for Windows XP & above, Gecko browsers, and the 1024 x 768 resolution, I am confident that a few minor changes can easily make the site compatible with other platforms and resolutions. It is not my intention to make this site backwards-compatible with Firefox 1.5, Internet Explorer < 6, or Opera.

If you have any comments, please feel free to leave them.

(No Ratings Yet)

 Loading ...

More changes

Over the past few days, I’ve developed a few more ideas for Geekie.org that are being implemented. In addition to the obvious switch in wallpaper — from now on I’ll be swapping the background every once in a while — I’m also experimenting with fonts.

A user using the default theme on our web site can click on “Opt in to the Arial font beta” beneath the header title. Doing so will reload the page, and create a session variable that will show you the Arial design for as long as your session lasts. I didn’t use cookies for this particular feature, but it is a possibility. You can click to opt out if you don’t like it.

The Arial font beta will make most text a bit smaller. This usually isn’t a problem, but if it is for you, drop us a line (leave a comment) and let me know. Remember, you can always switch back.

I’ve also decided to start optimizing the site’s CSS and JavaScript files for efficiency. In the past, the site loaded way too slowly — even on a fast connection — but with the implementation of compression, and optimization, we should be getting better.

(1 votes, average: 1 out of 5)

 Loading ...