Below are the most recent Virtual Revolution blog entries. The blog is new to the site; it was started in April 2007.
Blog entries will cover my thoughts on my current graphic design and web design projects. I will also write about graphic design, web design, search engines, local Tallahassee art/design events, as well as other design-related topics.
This technique was explained by BigBison of International Web Developers Network in the thread hiding link text completely in opera and ie. I love it so much that I wanted to document it here.
View a very simple demonstration of the accessible image-replacement CSS menu technique.
The idea of this menu is to create a simple, semantic menu using an unordered list. Each list item should contain an "empty" span tag. That span tag is then turned into a block-level element using a stylesheet. Your image/button is applied to that span tag as a background. Absolute positioning is then used to make the span tag "cover up" the simple text link.
The benefits of this are many. Your menu can be used before the images load--good for slower connections. Search engines like plain text links more and will follow them. Individuals using alternative browsers or browser configurations (mobile users, users with disabilities) will also find your menu more accessible. My example here is simple, but it's the best of both worlds. You can have your fancy buttons and your plain text links at the same time.
Another note here that was new to me was making the normal, hover, and visited buttons all one image. Background positioning (instead of background image swapping) is then used to show the button's state. This improves performance in several ways--you have to manage fewer files, you will avoid that flash of an unloaded hover image, and your overall file sizes will be reduced.
This menu builds on a popular technique--using lists. What is a menu, after all, but a list of pages, links, and/or places to go? The list has some semantic relevance to the menu and it's a sensible format for your menu in a plain-text browser. We all know what a list looks like--each <li> is automatically moved to the next line. The first part of this technique, which will be familiar to many CSS fans, is to place all the <li>'s on a single row. We do that by using the float property. Using li { display:block; float:left; } we explicitly declare that <li> is a block-level floating element. Floating can be tricky because, like absolute positioning, a floated element is taken out of the normal document "flow." Unlike absolutely positioned elements, however, floated elements can be cleared--all it takes is some experimentation to get used to floats.
Normally the <a> element is also made a block element as well. That allows us to define a height, width, background, border, etc. as well as make use of pseudo-classes on our 'buttons' in a way that IE will understand. In this case, we are also going to set the <a> element's position to "relative." We will also place an "empty" (as in, nothing between the two tags) <span> tag inside our <a> element.
Once we add the empty <span> tag, we have an empty inline element within our block. Using our stylesheet, we will make the <span> element a block-level element and set it to the same height/width of the <a> element around it. We will also apply our button as a background to the <span> element. Making the position of <span> absolute at top:0 and left:0 will cause the background of <span> to completely overlap the plain-text link.
Below is the code:
Technique learned on IWDN, developed by member BigBison.
<!-- XHTML Unordered List -->
<div id="amenu">
<ul>
<li class="home">
<a href="index.html">
Home<span></span>
</a>
</li>
<li class="blog">
<a href="blog.html">
Weblog<span></span>
</a>
</li>
<li class="contact">
<a href="contact.html">
Contact<span></span>
</a>
</li>
</ul>
</div>
/* Image Replacment - Accessible Menu */
div#amenu{
/* Your custom styling for the menu container. */
background:#FFFFCC;
}
div#amenu ul, div#amenu ul li, div#amenu ul li a, div#amenu ul li a span{
/* Necessary default styles. */
/* Only change height and text-align if desired. */
display:block;
margin:0;
padding:0;
height:20px;
text-align:center;
/* Add any desired margins, padding, or borders to elements below individually. */
}
div#amenu ul li, div#amenu ul li a, div#amenu ul li a span{
/* You can use variable widths by using individual classes. */
/* Or make each button the same width here. */
width:100px;
}
div#amenu ul{
/* Your custom styling. */
list-style:none;
}
div#amenu ul li{
/* Creates a horizontal line of items from the unordered list. */
float:left;
}
div#amenu ul li a{
/* Only change color, font, text, and (maybe) overflow properties. */
position:relative;
color:blue;
font:bold 10pt "century gothic", sans-serif;
text-transform:uppercase;
text-decoration:none;
overflow:hidden;
}
div#amenu ul li a span{
/* Important: Causes the span element's background to overlap the plain-text link. */
position:absolute;
top:0px;
left:0px;
}
/* Change your desired colors. */
/* Using one background image and changing its position (rather than multiple images) improves performance. */
/* Ensure that your plain text menu's font colors and styles and background colors harken to your image menu. */
/* Accessibility guidelines recommend that you suggest a state change with more than just color, however, so keep that in mind. */
div#amenu ul li a:visited{
color:purple;
}
div#amenu a:visited span{
background-position:center bottom;
}
div#amenu ul li a:hover{
color:red;
}
div#amenu a:hover span{
background-position:center top;
}
div#amenu ul li a:active{
color:red;
}
div#amenu a:active span{
background-position:center bottom;
}
/* Set your individual image menu buttons here. */
li.home a span{
background:url(amenu_home.jpg) center center no-repeat;
}
li.blog a span{
background:url(amenu_blog.jpg) center center no-repeat;
}
li.contact a span{
background:url(amenu_contact.jpg) center center no-repeat;
}
I was thinking about the phrase "web presence" today. I've always used it to speak of something more than a website. A web presence would include a website, of course, but it would also consider other ways an entity can create and have a presence online. Like search engine optimization, blogs, advertising campaigns, link exchanges, memberships to related sites and services.
When I looked up the term, I found that it was often used interchangeably with "web site." It was also used to convey a "full service" sort of web design package. One site even mentioned that the term could relate to the fact that some larger sites can be located on multiple servers.
If you did a search for my web pseudonym, you would find pages of results of my posts in mailing lists and forums. You would learn about my old High School hobby of writing fanfiction. You'd get an idea of the kinds of shows I like. Although I've maintained sites of all kinds for over a decade and a personal website for 6 years, I have suddenly realized that my web presence is much larger than what I create deliberately (with the idea of creating a presence in mind).
This line of thought reminded me of rumors I'd heard about MySpace. I have a MySpace page, of course. I have a few friends who update their MySpace blogs semi-regularly, so I try to visit to read their posts. Recently I've heard that employers are checking MySpace for the names of applicants. If they find a user who matches up with an applicant, they investigate the page. The rumors say that MySpace pages have lost people job opportunities or even gotten people fired!
When I first heard this, I thought it was silly. "A person's personal life is personal," I said, "and doesn't necessarily reflect their work ethic." I feel this is true, but it also may be short-sighted in some respects. After all, as anyone on MySpace knows, many companies are making use of MySpace in their quest for a more pervasive web presence.
This isn't a post about how the internet has made true privacy difficult. Or about human nature. It's just my musings; because now I'm wondering, "Is there anything about my MySpace page, or anything else that an interested searcher might find, that would embarrass me professionally?" I'd like to think not.
Overall, I'm starting to think that a "web presence" is a double-edged sword. When we post on the internet, we almost always know that it is "public" in some sense. But sometimes we compartmentalize--this is "public" for my personal friends, while this is "public" regarding me as a professional. It's odd to realize that the two worlds can meet unexpectedly. But on the other hand, that knowledge leads to a greater understanding of what a web presence truly is and how to build it. Sometimes you can overlook opportunities.
I keep hearing about this site. We'll see.
I may have mentioned my new job at Homes.com. My short job title is "Broker Support Rep," which involves customer service, technical support, and web design for Real Estate Brokers. I've actually wanted to work for Homes.com since High School. It was founded locally, in Tallahassee, and provides web advertising and other solutions, including web design, to real estate agents nationally.
So far, I think I'm grasping things quickly. I'm thrilled about that. Am I loving it? Mostly! I'm happy with my new job. I'm still excited about the work I'm doing and I'm enthusiastic about the company. I'm busy, tired, and forgetful, but I'm also feeling pretty positive about what I do every day.
Working in the web industry has surprised me in some ways while also reinforcing some ideas and opinions I've had. I have had the luxury of being able to start from scratch with my site whenever I want; to create a new database, a new template, a new stylesheet, a new 'CMS' concept. I always think I'll use the same stylesheet again, and I design with that idea in mind, but usually I don't. It's an undertaking to recreate my site this way, but it's manageable. I've always viewed it as being good practice. And while it is a good learning experience, it's time-consuming on even my small site--and just impossible (and silly) for a large, established business.
One of the subtle things I've learned that is the most interesting to me is this: I have a lot of design and development habits that I don't vary or question. For one thing, although I tend to code neatly and comment liberally, I hadn't ever really grasped how attached I was to my personal unique coding and design quirks.
I'm so used to doing everything from scratch--being able to scrap an entire 'template' and stylesheet on a whim, write a new, specific form-processing script, and directly access my server! There are departments at Homes.com that can do those things, of course. But in my department, we work within Homes.com's CMS and its template system. I have to adapt by learning how to find small solutions in order to achieve the effects I want.
I usually solve problems in my own designs and code in a very linear way. Almost like I'm taking a hammer to each issue as it arises; or maybe "reinventing the wheel" is a better way of putting it. I generally figured this habit was a way to learn new things--and it is. But, because of this habit, I'm finding it a challenge to work within all the various constraints I have now. For example, time constraints and franchise logo compliance!
It's a bit of a change of pace, and it's one that makes me a bit nostalgic--reminding me of my first experiences with web design. I know I've asked myself if I've been focusing "too much" on the code and not enough on the design. I like to think there's an ideal balance and that a person can do both. But there is some trade-off, in my opinion, between a graphics-focused Flash site and a fully-accessible, semantically marked-up XHTML site. (That's a subject for another day, though!)
As promised, there is now an Atom feed available. If you subscribe, you will be notified of updates, events, blog posts, and new images in the Portfolio.
I ended up being somewhat fonder of Atom than of RSS. Primarily because of the reasoning driving its development.
However, I did find it a bit more difficult to find examples of Atom feeds; it didn't help that, in a fit of single-mindedness, I selectively ignored Wikipedia's links. If you're wondering, I feel that Atom Enabled.org's examples were the most straightforward and helpful; and starling.us also looks helpful in retrospect. I also read through the HTML 'specification' several times.
I had a severe gripe about the need for UUIDs, up until I read diveintomark.org's atom:id treatise and learned about tag URIs. Here's hoping I understood how to build tag URIs correctly! It wasn't that I disagreed with the concept of permanent, unique ids, I just didn't want to have to add UUIDs to my database. You could call that "laziness", but I'm happier with the tag alternative.
My other issue was using a complete date/time in atom:updated. Again, it's not that I disagreed with the recommendation, exactly. It was more because my database doesn't store times for my additions and updates--for several reasons.
For example, in the Portfolio I only store the date I added the image. First, I don't have or remember exact dates for older images, let alone times! Second, I didn't add that field to the database until after I'd already launched the site. I'm bad. Finally, I also have a personal preference: I honestly do not care what the exact time was, and I don't want to have to manage times. So I cheated on that one; the times are all fake. I'll probably improve on that in the future.
<?xml version="1.0" encoding="UTF-8" ?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title type="text">
Virtual Revolution
</title>
<subtitle type="text">
VR Updates Feed
</subtitle>
<link rel="alternate" href="http://www.vr.net/"
type="text/html" />
<link rel="self" href="http://www.vr.net/xml/vr_atom.xml" />
<author>
<name>
Rachael Moore
</name>
</author>
<updated>
2007-04-23T16:36:53-05:00
</updated>
<id>
tag:virtualrevolution.net,2007-04-21:/xml/vr_atom
</id>
<rights>
Copyright Rachael L. Moore 2007
</rights>
<icon>
http://www.vr.net/favicon.png
</icon>
<logo>
http://www.vr.net/images/site_xml_logo.gif
</logo>
<entry>
<title>
VR Post: Syndication--RSS
</title>
<link rel="alternate" href="http://www.vr.net/Blog/#Syndication--RSS" />
<id>
tag:virtualrevolution.net,2007-04-19:Blog/Syndication--RSS
</id>
<updated>
2007-04-19T00:00:60-05:00
</updated>
<content type="text">
If you take a look at the address bar of your browser, you may notice something new. I have added an RSS 2.0 feed of updates to the site. If you subscribe, you will be notified of updates: relevant events, blog posts, and new images in the Portfolio. ...
</content>
</entry>
<entry>
<title>
VR Portfolio: Eyrie 2007
</title>
<link rel="alternate" href="http://www.vr.net/showimage/Eyrie_Cover.jpg" />
<id>
tag:virtualrevolution.net,2007-04-17:Portfolio/Eyrie_Cover.jpg
</id>
<updated>
2007-04-17T00:00:59-05:00
</updated>
<content src="http://www.vr.net/img/Eyrie_Cover.jpg"
type="image/jpeg" />
<summary>
Eyrie 2007 layout and design.
</summary>
</entry>
</feed>
If you take a look at the address bar of your browser, you may notice something new. I have added an RSS 2.0 feed of updates to the site. If you subscribe, you will be notified of updates: relevant events, blog posts, and new images in the Portfolio.
Currently the feed resembles the Recent Updates list on the main page of the site. I am considering enclosing images in the feed, when appropriate, as well as (part of) the text of blog posts. Keep your eye out for these and other improvements in the future.
I chose RSS 2.0 after being assured by my reading that most RSS Readers supported several formats.
To be perfectly honest, I see very little to choose from between RSS 1.0 and RSS 2.0. I did a cursory comparison, and I liked the options in RSS 2.0. But I can't discount the the influence of RSS 2.0 being the tutorial on W3 Schools.
I find that a little strange, considering that they say, "RSS 1.0 is the only version that was developed using the W3C RDF standard." It seems to me that being based on the RDF standard would be a good thing. But, then, they also remind me of the obvious truth, "There is no official standard for RSS." What a mess.
However, since I'm generating the feed dynamically, I may add an RSS 1.0 and Atom feed--just for fun. Maybe once I use them all, I'll have more of an opinion.
The Eyrie release reception was tonight.
I donated some of my artwork as raffle prizes: the Laissez Faire v4 photograph manipulation, the Wired photograph manipulation, and the Metro photograph manipulation. I framed those 3 and also raffled an additional Laissez Faire print unframed.
I realized after the work was done and I saw it being released that it's something I'll consider doing again next year. It's a stressful undertaking, but it's also rewarding when you finally get to see everything in print.
Soon I'll be moving to a new job.
Reorganization in my department at TCC caused me to seek new employment. It ended up being a good thing, though, because I got hired at Homes.com.
My position will be "Member Services Broker" and will include providing web design services to clients.
I can hardly wait to get started. There will be a whole new place with new tasks to get comfortable with. That's always a bit stressful. I hope I catch on quickly.
This is my first blog post. I'll be writing about the internet, web design, graphic design, and web development issues pretty much exclusively here.
I've got a sort of article in mind about columns from a design perspective. Expect to see that in the near future if all goes well.