Archive for the ‘CSS’ Category

HTML5 & the quasi-death of XHTML

Monday, July 6th, 2009

In the past several weeks there’s been a bit of a stirring in the web design world. This stirring culminated in the announcement that the World Wide Web Consortium (W3C) would not re-new the XHTML Working Group’s charter at the end of 2009. The W3C will pool its efforts and focus on the HTML5 specification.

This appears to be good news. No longer will the schism that separated HTML4 and XHTML1 (that formed in 2000) divide web designers and, more importantly, web browsers. The Internet will depend on one specification to markup websites.

I speak from a utopia though. There are still many issues at hand. The biggest drawback is HTML’s past tendency to be sloppy. With certain tags like < img >, XHTML used the wonderful / > closing bracket to signify the end. Every element had to be closed, from your < p > < /p >s to your < br /> and the afore-mentioned < img/>. Another bit of sloppiness is that fact that some web developers type their tags in all caps ( < IMG > or < a HREF > and the like. I grew up learning HTML when the web was making the transition to 3.2, then 4.0. In 2002 I took a web design and development course, teaching the 2001-drafted XHTML 1.0 specification.

XHTML was supposed to be the beginning of the transformation of the Internet, giving us XML parsed documents, more semantic code, and tighter and better developed web sites. Well, that hasn’t exactly happened. Many major websites still don’t adhere to web standards—take a look at Best Buy’s website; it’s nothing but table nested in table nested in table. We’ve still got years to go, and years before HTML5 is finalized and put into popular use on the Internet.

I’ve begun adding elements new in HTML5 to my website. Semantic markup like < div id="header" > has been replaced with the new tag < header >. This semantic markup lets humans and machines know exactly which section is supposed to be and how to interact with it. < footer> is also a new one I’ve updated. The rest will be done over time. If you’re into validating websites, the little CSS and HTML icons in the right sidebar will point you to several errors on my site—all blamed on my looking ahead to CSS3 and HTML5, plus a few third-party code snippets (like PayPal and Facebook Connect) that are really beyond my control in editing.

If you enjoy making websites like myself, I recommend reading up on the changes to come via HTML5. It’s an exciting time. If you can’t see the changes, most notably the usage of @font-face, a CSS rule to use any font the designer wishes, download Firefox 3.5, Safari 4, or Opera 10.

Work begins on MonticelloLive.com

Saturday, June 13th, 2009

A few weeks ago, a friend and fellow member of Twitter Geeks of Monticello, Jeff Noble, asked me what I thought about taking over the technical side of Monticello Live (ML), a WordPress blog reporting on local news around Monticello, Ark. and Drew County. After a few weeks of doubting and pondering and vacation, I decided to take him up on the offer. It seems like God had his hand in this endeavor, as Jeff and his family are moving to Virginia next month.

History of Monticello Live

Jeff started the blog in September 2006 as an online source of news and community information. Since then, the site has expanded to a center for the community to communicate online. Jeff became absorbed with Journey Church, and Joe Burgess took over operations of ML, with Jeff helping out with the technical aspects.

The site receives an average of nearly 1,000 daily visitors—an accomplishment, considering Monticello has a population of under 10,000—and has seen peaks of up to 16,000 visitors in a single day.

The Challenge Ahead

I don’t take the task at hand lightly. ML has grown tremendously over the years, and I only hope I can help it continue. Taking over Jeff’s responsibilities will be a challenge I look forward to. My first project at hand will be an overhaul of the layout of the site. ML’s content causes it to burst at the seams from time to time—the severe storms that rolled through the area on May 6, 2009 stressed ML’s server and the site was taken offline for several hours. That situation has been remedied and we now recede on our own dedicated server, allowing us stretching room for the growth spurts.

Over the next few weeks, I will be working on re-designing the layout to be more user-friendly and accessible. If anyone wants to be in-the-know, comment and I will let you see the progress from time to time. It won’t be a drastic overhaul—a new masthead, a different perspective on the three-column layout, more refined typography, integration with Facebook Connect (to allow you to tie your ML activity with Facebook), and a few other things.

Mock University of Arkansas-Monticello Website

Tuesday, April 28th, 2009

Mock UAM website designI am currently working on a mock re-design of the University of Arkansas at Monticello website for my Technical Writing course. Our final project for the semester, an assignment to find a local problem and present a solution, led me to the UAM website. After a recent re-design to celebrate “a century of opportunity,” coinciding with the university’s 100-year anniversary, many design flaws still remained. My project aims to highlight those problems and suggest fixes for them.

Although, as you will see, the overall design of the site lacks visual appeal, my main focus will be in two areas: content layout and web standards. The website uses the “< table >” element to organize the content, a bad move as far as standards-purists are concerned. A referenced CSS style sheet seems to be ignored as the HTML has its own styles embedded. Pretty messy overall.The major overhaul will be in content—the current website has over 50 links.

The formal report must be at least seven pages in length (not including supporting graphics and other documents). I will be attempting to interview the “web publisher” of the site, whoever that may be, to ask a few questions regarding the history of the site and other menial topics. I’ve used Facebook as a survey platform to get a feel for what users like and dislike about the site— navigation and accessibility seem to be the biggest concerns.

Here’s what I’ve done thus far on the mock-up. Voice your opinion.