vanderwal.net

Site CSS Tweak

After years, possibly going back to 2002 or 2003, I haven’t made any big changes to this site’s look and feel. Since the blog is coming up on its 20th anniversary in two days and because I have my screen on my laptop set to most stuff I can fit in I made a change.

Well, I made a tiny change, well maybe a bigger change. This site was stuck at 640 pixel width because of some device I owned and my mom owned that 640 pixel width didn’t scroll on the old web viewport. My mom passed away in 2011. I have no recollection what the screen was of mine (likely if it was mobile I have a mobile version for it (and my old very dead Treo).

This site is still fixed width. Now this site 980 pixels. This will change when the underlying code gets a bigger update in coming months. The typeface is no loner 12 pixels and is no 14 pixels. Everything got a little more breathing room and space. The blog sidebar with things I have squirreled away in Pinboard and surface if they are tagged with “linkfodder” got some tweaking as well.

On the blog pages I’m not fully liking the reading line length as it is a bit wide and I really like a 70 character to 80 character line length. Back when a lot of academics were reading the site it was a common preference for many of them as well. The blog is roughly sitting at around 90 characters I may mess with this a little bit more this week.

I personally spend much of my time on my links page and it is now a much longer scroll and not as scan friendly. But, years back I may the sub-headings collapsable, but they don’t have any indication it is possible so it is a bit of an easter egg. But, that is getting used much more as of today.

24 Ways: A Web Holiday Favorite

Nothing makes me happier than to see the winter holiday begin and 24 Ways start its annual release of web development and design goodness. Drew McLellan and the 24 Ways crew have done another great job and I look forward eagerly for every day’s gem that is released.

To make all of this better, 24 Ways is in its 10th year. Congratulations for all the great content and work, from the very first to the current offering of the day.

Mind the Construction Dust

I’m in the midst of a structuring here across all the pieces of vanderwal.net. It started in January with another project, a meetp-up hack to dive into Zurb Foundation. Within a couple weeks of starting down that path I decided it would be fine time to rebuild and redesign vanderwal.net using Foundation. Before I started down the road leaving the horses behind I desided I was going to update the structure of the HTML of these pages and bring them into modern times with HTML5 and CSS3.

This thinking and tinkering has been finally fixing some of the underlying details that bugged me, but it also allowed to set a much better and more object focussed semantics. This shift will also enable the content objects to flow better and be better foundations for a redesign as well.

While I have no idea what the redesign will be and not even thinking of that, I did find the original photo that I modified to be used for the header image and I put that to the pages I have touched. The new image now is much wider to allow for a fluid page and the “vanderwal.net” text is now out of the image and I a truly proper H1, that has alluded me for a long time (and bugged me to no end). The menu of the updated pages has brought back the selected portion of the site with a bleed to page, which was there at the beginning, but some shift in CSS caused it to go away.

I may, possibly likely, shift hosting at some point in the near future, but that may wait until I have some of the underpinnings of the blog tool updated a little. Some of those changes will wait a little, but have been brewing a long time. I don’t think I am bringing comments back, but will likely bring in web mentions (Jeremy Keith has a great explaination). There is a lot going on in the IndieWeb that has been inspiring and may trigger some more changed that I have longed for to finally get put in place.

BTW, this is the short version of this. Two prior attempts at writing up something short both ended up over 2,500 words.

HTML5 Demo Watch

Thanks to the Berg Friday Links I found the Suit up or Die Magazine and Cut the Rope HTML5 demo sites.

Both have me thinking this is really close, then I remember one of my favorite periodical apps, Financial Times went HTML5 more than a year ago. FT went HTML5 to better manage the multi-platform development process needed for iOS and the multitude of Android versions. While many have said the development is roughly 1.5x what it would take for just one platform development it does same incredible amount of time building an app across all platforms. Since all the major smart phone platforms have their native browsers built on webkit, there is some smart thinking in that approach.

Personally, my big niggle with the FT app is while it is browser based doesn’t have Instapaper built-in and it moves me out of the app to send a link of an article (often to myself because lacking Instapaper) rather than natively in the app, or exposing browser chrome so that I can do that while still remaining in the app and in reading their content mode. It would be really smart for FT to sort this out and fix these as it would keep me in the site and service reading, which I am sure they would love. If they could treat both of those like they do with Twitter and Facebook sharing out all within the app it would be brilliant.

Naked Div and Span Tags Lead to Embarassment

A word to the wise, don't use naked div or span tags in your markup, as you are asking for trouble. Many validation tools will let you know you have messed up, but you will soon realize this as you start extending your design with CSS.

What is a naked div or span? Look in your markup and if you see <div> or <span> you have naked tags. A div or a span tag should always have an id or class attribute that defines what it is doing. Calling div or span in your CSS is one giant hint this are going wrong. Add CSS modifications to the semantic markup that must be in place and use an id or class to place all other presentation layers.

Sooner or later a class or id attribute will be dropped in the div or span and it may lose the intended value, but since the CSS and markup were not used correctly the headache begins. Naked div and span tags lead to embarrassment at best or headaches and cursing for those that have to clean up the mess.

Web Standards Opening

Are you looking to practice and hone your standards compliant web design craft? Are you looking for an environment that is Web Standards friendly and want to join solid Web development team? You now have found a possible match. Does your vernacular include: "Zeldman, Eric, Tantek, Bowman, Christopher, Shea, and/or Molly said..."? Are you looking to get recognized for your Standards work? Can you make Photoshop purr? Do you know the bugs in Dreamweaver's rendering engine? Can you live with just one table in your layout? Are you proud of your craft and want to hone it more?

If you answered yes and are looking for a change of scenery read the following and send me an e-mail (see contact above).

We are looking to hire a strong Web Designer who has strong experience with hand-coding Web Standards (HTML, XHTML, and CSS) that validate. The designer must also have experience with accessibility (Section 508) and have solid web graphic design skills. Experience with information architecture and user-centered design processes are very helpful (wireframes, usability testing, etc). Experience with leading design and redesign processes is very helpful. Strong communication skills, including design documentation is essential. We design with Dreamweaver and Homesite and use Adobe and Macromedia graphics applications. [INDUS Corporation Web Designer Job Listing]

Web Standards and IA Process Married

Nate Koechley posts his WebVision 2004 presentation on Web Standards and IA. This flat out rocks as it echos what I have been doing and refining for the last three years or more. The development team at work has been using this nearly exclusively for about couple years now on redesigns and new designs. This process makes things very easy to draft in simple wireframe. Then move to functional wireframes with named content objects in the CSS as well as clickable. The next step is building the visual presentation with colors and images.

This process has eased the lack of content problem (no content no site no matter how pretty one thinks it is) often held up by "more purple and make it bigger" contingents. This practice has cut down development and design time in more than half and greatly decreases maintenance time. One of the best attributes is the decreased documentation time as using the Web Developer Extension toolbar in Firefox exposes the class and id attributes that provide semantic structure (among many other things this great tool provides). When the structure is exposed documentation becomes a breeze. I can not think of how or why we ever did anything differently.

Best Web Development Practices

Those of you looking for a relatively short article or essay on current best Web practices should look no further than the Best Web Development Practices provided by Apple. Yes, this focusses on web standards, but what best practice does not as it is the cornerstone of accessibility as well as makes the same content usable on mobile devices (one caveat the article will not print on 8.5 by 11 inch paper).

Highlighting Text in IE 6 Now Available Here

Thanks to a heads up from Nick, we have modified our site so that it will allow highlighting text so it can be copied and pasted. All browsers allowed this highlighting functionality, except for IE 6 on Windows, which had a bug that blocked proper functionality.

It took a little bit of digging to sort out the problem. The problem was a result of using absolute positioning in the CSS. Once we changed the positioning from absolute to static everything was fine. Fortunately, we did not need to be using absolute for layout as this was the wrapper for the main content under the menu. This is a foolish bug to have in a browser and to have go unfixed (although minor compared to the severe security holes that are pervasive in the same browser).

Now our content here can be highlighted in all modern browsers to ease reading or copy and pasting. This important so that we may help others grab information for their Personal InfoCloud and reuse the information to help purposes.

Tweaking the Botox Pixels

We have made some minor tweaks to the presentation of the site. The menu bar has had the underlining removed on hover. Each of the items in the menu now has borders that change with hover and selection to create a little cleaner look.

The date bar in the weblog has been padded and has a slight border to off set it from the page and make the date more readable, the date has bugged me for a long time.

The permalink (comments) page now has a title of the entry. The entry titles have been added to the monthly archive pages also.

Lastly, the link to the Quick Link RSS feed has been added next to the Quick link title. This should make it easier to follow those links, should you wish. The Quick Links get updated far more regularly of late and there are some good gems that get nestled in there.

Definition Lists Defined

Definition lists explained and examples by Max Design. Definition lists are often used incorrectly, but these examples are done to show how to use definition lists when it is semantically correct to use them. Definition lists are used for presentation purposes then the information is actually a list, ordered or not. Using the proper structure for information is critical for those that can not see the presentation (visually impaired, mobile devices, text readers for those driving, etc.).
[hat tip Mike]

Wiggles Rocks Zen Garden

I am a huge fan of CSS Zen Garden and have been impressed for many months by the contributions, but Wiggles the Wonder Worm just floored me. I was and still am in awe. Joseph Pearson did a fantastic job and explains Wiggles and CSS on his site.

CSS in RSS

Something to come back to, CSS in RSS. It works in NetNewsWire.

Headers for everybody

I am trying out visual enhancements on the Off the Top weblog display. I have added the header titles for each of the entries, which I have wanted to do for a long time. This should make the page easier to scan for information.

I have used the dark blue color for the type and given it shading in the CSS to offset the header from the date. Once the headers were added the dates were lost on the page, so I have given the pale orange background color to break up the page a little more. The pale orange background also seems to help the reader scan the page more easily.

Depending on feedback I may keep this and add it to the other multiple entry pages in Off the Top.

Taking Site Headers to the Next level

Dunstan (a fellow WaSP) has done a great job with his new site header at 1976design, his personal site. Dunstan explains that the header is made up of 90 image and uses scripts to drive the weather and time relative header image. The sheep in the header move depending on the weather conditions at Dunstan's farm as well as change based on the time of day (they have to sleep sometime).