Tag: XHTML

Categories
internets

Accessibility rules!

Want an argument for accessibility?

Here you go! (via Ma.tt)

 

Uber-cool Glenda Watson Hyatt, aka the Left Thumb Blogger, shares her perspective on how WordPress has improved her ability to communicate effectively on the internets.

Whether you are 100% able-bodied or not, accessibility is important. Because no matter who you are, the future is coming. Some day many of us may have devices assisting us, whether we need them or not, and completely removing all barriers between humans and machines will be an important first step in enabling us to proliferate on the digital grid – on a truly level playing field.

I’ve committed to making my upcoming theme be as accessible as possible. You should too, especially if you want to meet the Future head-on. Keeping all variants of humanity and machinery in mind when designing user interfaces of any kind will be important there.

Categories
uncategorized

Accessibility rules!

Originally published at jeremyjarratt.com. You can comment here or there.

Want an argument for accessibility?

Here you go! (via Ma.tt)

Uber-cool Glenda Watson Hyatt, aka the Left Thumb Blogger, shares her perspective on how WordPress has improved her ability to communicate effectively on the internets.

Whether you are 100% able-bodied or not, accessibility is important. Because no matter who you are, the future is coming. Some day many of us may have devices assisting us, whether we need them or not, and completely removing all barriers between humans and machines will be an important first step in enabling us to proliferate on the digital grid – on a truly level playing field.

I’ve committed to making my upcoming theme be as accessible as possible. You should too, especially if you want to meet the Future head-on. Keeping all variants of humanity and machinery in mind when designing user interfaces of any kind will be important there.

Categories
creative uncategorized web design

new wp-theme preview: “transitory”

I’ve been hard at work the past couple of weeks on a new WordPress theme i’m calling “transitory.” It’s not as cool of a name as Big Urgent Wish, but i tried it on and it stuck.

My goal with this theme was to have a much, much cleaner page, without too much extraneous information clogging up eyeballs. Here is how i’ve decided it will eventually be layed out:

"transitory" Layout
"transitory" layout (click to enlarge)

Note that the colors are arbitrary in the above layout and will change. 

And now here is a screenshot of it in action. Note the final layout has not yet been 100% applied. Also note the cool city background, which is blacked out underneath content boxes. Trust me, it looks much cooler than this. The menu to the side is being rewritten with jQuery, and will fold out when needed, and collapse when not needed.

transitory screenshot
"transitory" screenshot (click to enlarge)

At a guess, i’d have to say that it should be completed in about another week or two. So… a month, maybe? I dunno. You’ll see it soon enough.

All comments (good or bad) welcome!

Categories
uncategorized

new wp-theme preview: “transitory”

Originally published at jeremyjarratt.com. You can comment here or there.

I’ve been hard at work the past couple of weeks on a new WordPress theme i’m calling “transitory.” It’s not as cool of a name as Big Urgent Wish, but i tried it on and it stuck.

My goal with this theme was to have a much, much cleaner page, without too much extraneous information clogging up eyeballs. Here is how i’ve decided it will eventually be layed out:

"transitory" Layout

"transitory" layout (click to enlarge)

Note that the colors are arbitrary in the above layout and will change.

And now here is a screenshot of it in action. Note the final layout has not yet been 100% applied. Also note the cool city background, which is blacked out underneath content boxes. Trust me, it looks much cooler than this. The menu to the side is being rewritten with jQuery, and will fold out when needed, and collapse when not needed.

transitory screenshot

"transitory" screenshot (click to enlarge)

At a guess, i’d have to say that it should be completed in about another week or two. So… a month, maybe? I dunno. You’ll see it soon enough.

All comments (good or bad) welcome!

Categories
creative internets uncategorized web design

CSS tricks: Styling parent elements with :hover

[EDIT: this site no longer supports the features described in this article. Sorry.]

You may have noticed in my sidebar that there are a few elements which are nested in an obvious hierarchical order. For example, at the time of this writing, i have a list of books which i am either reading, planning to read, or have already read, listed under the “now reading” heading.

You may also have noticed that the heading for each of these menu items is highlighted whenever you hover your cursor (pointer) over it.

What you may not have noticed is that the headings for these items’ parent elements is also highlighted when its descendant is hovered over. In other words, when you hover over the “planned books,” “current books,” or “recent books” list, the parent element, “now reading,” is highlighted as well.

(If you’re still not sure just what the hell i’m talking about, check out the demo first, and then come back.)

This is a cool trick that you rarely ever see on the internets, and it’s remarkably simple to do. You don’t need no fancy JavaScripting to do it, either! No server- or client-side scripts are used at all, just good old CSS, and a properly nested hierarchy of elements.

Continue reading “CSS tricks: Styling parent elements with :hover”
Categories
uncategorized

CSS tricks: Styling parent elements with :hover

Originally published at jeremyjarratt.com. You can comment here or there.

[EDIT: this site no longer supports the features described in this article. Sorry.]

You may have noticed in my sidebar that there are a few elements which are nested in an obvious hierarchical order. For example, at the time of this writing, i have a list of books which i am either reading, planning to read, or have already read, listed under the “now reading” heading.

You may also have noticed that the heading for each of these menu items is highlighted whenever you hover your cursor (pointer) over it.

What you may not have noticed is that the headings for these items’ parent elements is also highlighted when its descendant is hovered over. In other words, when you hover over the “planned books,” “current books,” or “recent books” list, the parent element, “now reading,” is highlighted as well.

(If you’re still not sure just what the hell i’m talking about, check out the demo first, and then come back.)

This is a cool trick that you rarely ever see on the internets, and it’s remarkably simple to do. You don’t need no fancy JavaScripting to do it, either! No server- or client-side scripts are used at all, just good old CSS, and a properly nested hierarchy of elements.

First, create a nested list, with headings. For example:

<ol>
 <li>
 <h1>text</h1>
 <h2>more text</h2>
 <ol>
 <li>
 <h3>subtext1</h3>
 </li>
 <li>
 <h3>subtext2</h3>
 <ol>
 <li>
 <h4>subtext2.1</h4>
 </li>
 <li>
 <h4>subtext2.2</h4>
 </li>
 </ol>
 </li>
 <li>
 <h3>subtext</h3>
 </li>
 </ol>
 </li>
 <li>
 <h2>text again</h2>
 </li>
 </ol>

Now create the following style rules:

li:hover>h2, /* matches the H2 element when its parent list-item is hovered over */ li:hover>h3, li:hover>h4, li:hover>h5
 {
 background: #000;
 color: #fed;
 }

(Note that the H1 element is not styled and thus does not actually participate in any fancy hover effects.)

Now save your page and test it out. You can adapt this technique to work with just about any set of nested elements. (Just make sure your nest validates!)

See the demo

Categories
creative internets web design

Cheaters, etc.

Here’s a list of cool resources for web design and development, including cheat sheets galore.

I’m sure there are more I have bookmarked somewhere. I’ll add them as i find ’em. Enjoy!

Categories
uncategorized

Cheaters, etc.

Originally published at jeremyjarratt.com. You can comment here or there.

Here’s a list of cool resources for web design and development, including cheat sheets galore.

I’m sure there are more I have bookmarked somewhere. I’ll add them as i find ‘em. Enjoy!

Categories
web design

Coming up, a redesign

I’m gearing up for a redesign. Sometimes too many bells and whistles is a bad, bad thing. I’m going simple and clean next.

I expect to base it off of the current theme, just because i already hacked it up for the style switcher. This time, no extraneous code. This time, things will be clean. My plan is to AJAXify the sidebars so all the other crap is still there, just not there all the time. Go figure – JavaScript wound up becoming useful for something after all!

Suggestions welcome, as always.web

Categories
uncategorized

Coming up, a redesign

Originally published at jeremyjarratt.com. You can comment here or there.

I’m gearing up for a redesign. Sometimes too many bells and whistles is a bad, bad thing. I’m going simple and clean next.

I expect to base it off of the current theme, just because i already hacked it up for the style switcher. This time, no extraneous code. This time, things will be clean. My plan is to AJAXify the sidebars so all the other crap is still there, just not there all the time. Go figure – JavaScript wound up becoming useful for something after all!

Suggestions welcome, as always.web

Categories
internets uncategorized web design

Google Chrome obeys alternate CSS

NOTE: this post is ancient, but still gets a good bit of traffic, so i need to let readers know:

This issue was fixed long ago.

So Google Chrome is out. That’s great! It’s really a cool, fast, secure browser.

Unfortunately, it appears to break sites in one very important way: it obeys alternate stylesheets, just as if they were normal, active stylesheets. This breaks sites who print their alternate CSS links after active ones (like mine – for now).

I’ve sent this in as a bug to Google, and i’d recommend that others do the same (select “report bug or broken website” from the page icon to the upper right).

At the moment, the only thing to do is to list alternate stylesheets before active ones, or exclude alternate links altogether.

However, there are (naturally!) problems with each method…

Listing alternate CSS (which would still be obeyed) could still cause style conflicts, if there are any rules which are not contradicted (read: overwritten) by later stylesheets below the alternate ones.

On the other hand, not listing alternate stylesheets disables additional functionality in user agents such as Opera, which allows users to select from a menu what style they’d prefer to view a site in – which is arguably the best, most accessible method of switching stylesheets (if you’re using one of those user agents, that is).

For my money, i believe the former is the best option. This means i may have to do some code “cleaning,” which i should have done anyway. In fact, rather than removing extraneous CSS rules, i’ll be adding rules which do not exist in, say, X.css to Y.css, in order to counteract any style collisions by overwriting them with alternate rules.

Btw, for those who need it, here’s the User Agent string i captured:

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

[UPDATE] Matt Wilcox helpfully pointed out that this isn’t exactly a Chrome bug, but a leftover Safari one which has apparently been around for years, according to a decently shrewd Google search. Lesson: test in Safari, even if you think it’s a Practically Perfect Browser.

I have fixed it locally but am waiting for at least a few more hours in order to use this site as an example. Hey, it beats making a quick mock-up. Sort of. (My teachers always thought i was most useful as an example to warn others – well, i do what i can!)

And a big thanks to the great Jeffrey Zeldman for helping get the word out to designers about this. Of course, 99% of people making web sites won’t be affected, but for those of us using alternate styling, it’s a nasty thing to have happen.

[UPDATE 2] To clarify, Safari and Chrome both use the Webkit rendering engine, as well as parts of the Mozilla FIrefox codebase. Not to point fingers or anything. I’m just sayin’ is all.

[UPDATE 3] I couldn’t take it anymore. I fixed things here so there shouldn’t be any issues. I use a browser sniffer to detect the user agent and deliver either modern CSS or a crappy facsimile thereof for older, less standards-compliant user agents. As long as i keep up to date, no problem… of course, the drawback is obvious. I must keep up to date. Anyway, i’ve completely eliminated the alternate styles for both Chrome & Safari, at least until this bug is fixed in the Webkit renderer. In the meantime, i’ll put together a tester page and link it here.

Categories
uncategorized

Google Chrome obeys alternate CSS

Originally published at jeremyjarratt.com. You can comment here or there.

So Google Chrome is out. That’s great! It’s really a cool, fast, secure browser.

Unfortunately, it appears to break sites in one very important way: it obeys alternate stylesheets, just as if they were normal, active stylesheets. This breaks sites who print their alternate CSS links after active ones (like mine – for now).

I’ve sent this in as a bug to Google, and i’d recommend that others do the same (select “report bug or broken website” from the page icon to the upper right).

At the moment, the only thing to do is to list alternate stylesheets before active ones, or exclude alternate links altogether.

However, there are (naturally!) problems with each method…

Listing alternate CSS (which would still be obeyed) could still cause style conflicts, if there are any rules which are not contradicted (read: overwritten) by later stylesheets below the alternate ones.

On the other hand, not listing alternate stylesheets disables additional functionality in user agents such as Opera, which allows users to select from a menu what style they’d prefer to view a site in – which is arguably the best, most accessible method of switching stylesheets (if you’re using one of those user agents, that is).

For my money, i believe the former is the best option. This means i may have to do some code “cleaning,” which i should have done anyway. In fact, rather than removing extraneous CSS rules, i’ll be adding rules which do not exist in, say, X.css to Y.css, in order to counteract any style collisions by overwriting them with alternate rules.

Btw, for those who need it, here’s the User Agent string i captured:

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

[UPDATE] Matt Wilcox helpfully pointed out that this isn’t exactly a Chrome bug, but a leftover Safari one which has apparently been around for years, according to a decently shrewd Google search. Lesson: test in Safari, even if you think it’s a Practically Perfect Browser.

I have fixed it locally but am waiting for at least a few more hours in order to use this site as an example. Hey, it beats making a quick mock-up. Sort of. (My teachers always thought i was most useful as an example to warn others – well, i do what i can!)

And a big thanks to the great Jeffrey Zeldman for helping get the word out to designers about this. Of course, 99% of people making web sites won’t be affected, but for those of us using alternate styling, it’s a nasty thing to have happen.

[UPDATE 2] To clarify, Safari and Chrome both use the Webkit rendering engine, as well as parts of the Mozilla FIrefox codebase. Not to point fingers or anything. I’m just sayin’ is all.

[UPDATE 3] I couldn’t take it anymore. I fixed things here so there shouldn’t be any issues. I use a browser sniffer to detect the user agent and deliver either modern CSS or a crappy facsimile thereof for older, less standards-compliant user agents. As long as i keep up to date, no problem… of course, the drawback is obvious. I must keep up to date. Anyway, i’ve completely eliminated the alternate styles for both Chrome & Safari, at least until this bug is fixed in the Webkit renderer. In the meantime, i’ll put together a tester page and link it here.

Categories
creative internets uncategorized web design

Big Urgent Tweak Test

Look out for my B.U.T.T.! I’ve just finished uploading some tweaks to make the Big Urgent Wish theme a little nicer. Please, as always, wear your helmets, and let me know if anything falls on your head. I could always use a good laugh.

I hope to have a sanitized version available soon.

Categories
creative internets uncategorized web design

Validation

Whew! So far, Big Urgent Wish passes XHTML 1.0 Strict and CSS level 3*!

I have only done the index page, though, so more work is no doubt needed.

 

*although, due to the opacity: .6 in the CSS for the thickbox plugin I’m using, it doesn’t validate as CSS level 2

Categories
creative internets uncategorized web design

Big Urgent Garbage Hunt

The B.U.G. hunt is on! See if you can find all the problems with my new layout… I’ve already identified the ugly 3rd-tier dropdown menu thing on the navbar at the top, but I haven’t had much time yet to test everything out. fixed Later tonight I’ll tweak it and try to get it to behave itself a little better. Please post your comments here (be sure to include your OS/browser). And thanks!

(Things are bound to be a little on the messy side for a few days while I convert this thing over to the new theme.)

EDIT: Yikes! Single posts & pages are also totally unstyled! fixed

Categories
creative internets uncategorized web design

Big Urgent Wish coming together

Big Urgent Wish 3.0 is nearing readiness! The third subtheme has been completed.

Done:

To do:

  • Set CSS as PHP so can sniff browser/platform and deliver either semi-transparent PNG or GIF format backgrounds as User Agent supports
  • Download, install and support additional plugins
  • Test for bugs
  • Figure out which additional files are needed outside the normal Themes folder
  • Make sure I’m conforming to WordPress standards as much as possible!
  • Upload to server, test more
  • Fresh install on fresh, live WordPress test installation
  • Fix any and all bugs!
  • Write installation notes
  • Create ZIP archive of necessary files
  • Upload and tell folks!

Additionally, I’ve decided that it’ll probably launch with just three subthemes, due to time constraints; however, more subthemes will be available later.

Screenshots:
Big Urgent Wish, subtheme threeBig Urgent Wish, subtheme twoBig Urgent Wish 3.0

Categories
internets life uncategorized web design

Big Urgent Wish

Still working on the new theme. Actually, the theme’s done, it’s the subthemes that are killing me. I’ve got the first one about 90% done, and almost as much on the second. The main thing is separating the stylesheets into usable, selectable chunks.

Boy, is this gonna be purty!

I’m also gearing up for some podcasting for the nearish future. Should be interesting. More details to come….
Big Urgent Wish, subtheme twoBig Urgent Wish 3.0

Categories
creative internets uncategorized web design

Big Urgent Wish 3.0

Haven’t been feeling 100%, so I’m working on making my own WordPress theme from scratch (though I’ll admit to scraping a little code from other themes). My current theme is called “Big Urgent Wish 2.0”, and it’s based on another theme, but i’ve decided to reuse the name and call it 3.0. This one will be a three column layout.

It’s coming along flamingly so far. It looks beautiful and has tons of really tasty hover effects. Works very well in Firefox, Opera, and IE. It’s a plush, spacey theme, with burnt oranges, ambery peaches, and velvety browns.

I’m also planning on having it support style switching, Widgets, and all of the plugins I currently use. AJAX is under consideration as well.

This will most likely end up being my first public WordPress theme.

Big Urgent Wish 3.0

Categories
creative internets uncategorized web design

New tutorial: HTML Beginner’s Course pt 1

I’ve just finished posting the latest tutorial: HTML Beginner’s Course pt 1. This tutorial covers basic HTML formatting and some common tags. Nothing intensive here, just a crash course in what it is and what it does, with a little bit of the fundamentals. Topics to be covered later include lists, images, links, tables, and CSS.

Get your feet wet now, we’ll be doing some fun diving soon enough! There’s even an RSS feed to the tutorials pages, so you can keep up with the latest tute’s.

Categories
friends internets uncategorized

New page: Tutorials

Because I seem to be the only person in my local circle of friends who understands web code, I receive lots of requests from people to help them jank up their MySpace pages. In response, I’ve created the first tutorial: MySpace: the DIV element. This tutorial assumes you know a little bit about HTML and CSS going in. In future tutorials, I’ll cover basic HTML and CSS.

And i’ve just finished adding the comments functionality to pages (as opposed to blog posts), so if you have any questions or need help, I’ll do my best to clarify. This is a work in progress.