css

Free WordPress Theme: AP-blueprint

Thursday, November 19th, 2009

screenshot 300x225 Free WordPress Theme: AP blueprintWe do a lot of custom WordPress sites.  In fact, I’d go so far as to say we sort of specialize in customizing WordPress for a variety of different uses.  When you start out doing customized themes, often you start with some other theme as a “framework.”  We did this for a long time, but the thing with using someone else’s code as a framework is…it’s someone else’s code.  And everyone writes code differently, organizes things differently, lays the elements of a site out on the page differently.  And eventually, using someone else’s theme as a framework just wasn’t cutting it anymore — we’d end up spending half the time ripping out the existing code and putting our own in.  Lately we’ve been building WordPress themes from scratch — but if they all are going to have the same basic elements, it saves a lot of time to copy something from an old theme (and, chances are, you end up doing this anyway).  So we decided that it was time to build our own, very basic, WordPress theme framework that could be adapted for just about anything.

What’s included in this framework?

Clean, simple code, for one.  I know, I know, every developer thinks they have clean code, and the definition of “clean” varies depending on who you’re talking to.  The CSS in our theme is structured more or less from the top down with separations between different parts of the site.  So all the general stuff that applies to everything is together, all the stuff that applies to the header comes next, then the content, then the sidebars, and last, the footer.  One thing that annoyed us using Kubrik, the default WordPress theme, was that the author, Michael Heilemann, grouped the typography styles together, and the structural styles separately.  That may work for him, but for us, we would end up scrolling up and down and using CTRL+F to find what we were looking for only to end up duplicating styles anyway.  And one thing that always bugged me was that Kubrik had some inline styles in the header.php that I would invariably forget about.  With our method, we find it easier to navigate to where we want to go, and there’s no hidden inline css.  But the CSS has been reduced to a bare minimum anyway, so that you can apply whatever styles you want when you use this for your site.

Part of how we get around separating the typography styles is by using BlueprintCSS as a framework behind the theme.  BlueprintCSS is a CSS framework that just applies some basic browser resets and rudimentary styles and typography for the basic html and common CSS elements so you don’t have to worry about it.  There’s some debate in the design community about using a CSS framework, but Blueprint’s intent is to create a stable framework so you spend less time hacking and more time designing, which is what we do.  They even have an IE stylesheet that fixes most common IE compatibility issues so the sites you build with Blueprint come out compatible with IE6 without spending a lot of time futzing with conditional styles.

We’ve included the social bookmarking links we posted about last June on the single post template.  You can copy the block over to the index.php or page.php if you want sharing options on the main blog or the page templates as well.  The sidebars are entirely widgetized, and split into two unique sidebars, so you can easily turn a single-sidebar theme into a two-sidebar theme and back again.  And we’ve built a unique 404 page with links to other areas of the site to help your wayfaring visitors back to content that matters.

Oh, and the navbar uses the wp_list_pages tag to create a menu powered by Son of Suckerfish, which is a cross-platform browser-tested javascript dropdown menu that is lightweight and works well.  Also, we included the code necessary to create your own theme-based favicon, just save your favicon.ico in the /images folder.

There’s no fancy admin back panel, we really just wanted to build a very simple framework that could be used for anything, and will be used for everything we do, and since we did all the work in creating it, we figured we might as well let others benefit from it as well.  We only ask that if you do use our framework for your theme you credit us somewhere — the theme’s style.css is good enough for us, but we wouldn’t refuse if you wanted to link to us, too!

Check out the AP-blueprint demo
Download AP-blueprint 0 B
downloaded  490 times

Why we don’t support Ie6

Wednesday, July 22nd, 2009

I’m going to go out on a limb here and say that IE6 is a horrible browser.  Oh, it may look unassuming if all you’re doing is surfing the web — that is, until you find your computer slowing to a crawl as it is bombarded by pop-ups, adware, malware, and other nasty business that wasn’t invented when Internet Explorer 6 was unleashed in 2001.

Think about that for a second: 2001. Internet Explorer 6 is a browser that is 8 years old. Why are we even having this discussion?

In 2001, the web was a completely different place. CSS was an afterthought and non-essential to the design of web pages. Microsoft must’ve thought that CSS would just blow over or only be used by extreme geeks when they made the decision to not (or just forgot to) fully support CSS 2. Surely if you are still using Internet Explorer 6, you are beginning to see glitches, bugs, and design problems as more and more developers and designers stop supporting the browser.

As a designer, I work hard to make the best looking web site I can. I put hours into the CSS and design. Supporting IE6, literally, means spending twice as long designing a site. It means building the site, making it compatible in Google Chrome, Apple Safari, Mozilla Firefox, and Internet Explorer (and, even though we say we only support the most recent versions of all the most common browsers, we still support 2 versions of Internet Explorer). After that is done, I have to start all over again with conditional statements, IE6-only stylesheets, and hacks to get it to work in an ancient (by tech standards) browser that Microsoft stopped supporting fully with the release of Internet Explorer 7.

How many pieces of software do you use in a day that are 8 years old? Let’s put it into perspective. In 2001, if you were using Microsoft Office, you were using either Office 97 (probably bundled with your computer that came installed with Windows 95, or Windows 98) or, if you were particularly savvy, Office 2000. Most likely not the latter, however, since the latest version of Office was most commonly used only in corporate workplaces in 2001, not at home. Your computer was most likely running Windows 98. Windows ME was a market failure, and most home users, for one reason or another, couldn’t get used to Windows 2000 — which was also marketed as being more of a business workplace Operating System. If you were a mac user, you were thrilled by the announcement of the latest release of OSX, but were most likely still using Mac OS 8 or 9.  Back then, most people didn’t know that Google existed, we were still using Yahoo! or possibly Altavista for searching the web.  Ask.com was still AskJeeves.com, and not widely used, still being fairly early in the company’s history.

In 2001, Microsoft was in the midst of a large-scale antitrust case against them for, unsurprisingly, bundling their browser with their operating system. If you are still using Internet Explorer 6, it is likely because it came installed on your computer (cause for the antitrust lawsuit), and haven’t updated your browser, despite the fact that if you are doing regular Windows Updates, Internet Explorer will automatically update to the latest version, something you should be doing for the security of your system anyway. Internet Explorer 6 is superseded by not one, but two versions, and they’re all free.

Again, let’s take a moment to ponder that: there have been not one, but 2 full, updated versions to Internet Explorer since IE6. If you do a google search for “internet explorer 6″ there is a sponsored link with the text “Internet Explorer 6″ but the link points to IE8 (a clever bit of subterfuge)! Why are we having this discussion?

ie6 300x68 Why we dont support Ie6

Not only that, but if you had a problem with Internet Explorer, and called Microsoft or your ISP for support, the first thing they would say is “upgrade to Internet Explorer 7 or — better yet! — Internet Explorer 8.” (I know this, because I used to do tech support for MSN. If I was still working there, a call in which the user was still on IE6 would be something we looked forward to, because we could tell them to upgrade and move on. Try it, if you want, and see if they tell you otherwise.) For the sake of the health of your computer, you should be using at least IE7 which is leaps and bounds better than IE6 and introduces tabbed browsing, something other browsers (Opera, Firefox, Safari) had been doing for years.

IE6 is a dinosaur. Can’t we just agree that it’s best to see other browsers and live in a safer, happier, more secure web?

Here’s some resources for alternatives to Internet Explorer 6:

Opera
Apple Safari
Mozilla Firefox
Google Chrome
Internet Explorer 8

Don’t take my word for it, here are some other articles on IE6:

Wikipedia: Internet Explorer 6
YouTube Will Be Next to Kiss IE6 Goodbye
Phasing out support for IE 6 across all 37signals products on August 15, 2008
IE6 Must Die for the Web to Move On
Much Ado About IE6
ABC News: Kill IE6, for the sake of the web
I Dropped IE6
Apple’s MobileMe drops support for IE 6
Dig a hole and shovel IE6 into it
Vulnerability Report: Microsoft Internet Explorer 6.x
Wikipedia: United States v. Microsoft

Phasing out support for IE 6 across all 37signals products on August 15, 2008
IE6 Must Die for the Web to Move On
Much Ado About IE6
Vulnerability Report: Microsoft Internet Explorer 6.x
Kill IE6, for the sake of the web
I Dropped IE6
Apple’s MobileMe drops support for IE 6
United States v. Microsoft
Dig a hole and shovel IE6 into i
arcane palette home about arcane palette creative design contact arcane palette creative design arcane palette free stuff arcane palette's commitment to being green arcane palette portfolio arcane palette design services arcane palette swag