vanderwal.net

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.

Why Ma.gnolia is One of My Favorite Social Bookmarking Tools

After starting the Portable Social Network Group in Ma.gnolia yesterday I received a few e-mails and IMs regarding my choice. Most of the questions were why not just use tags and del.icio.us. After I posted my Ma.Del Tagging Bookmarklet post I have had a lot of questions about Ma.gnolia and my preference as well as people thought I was not a fan of it. I have been thinking I would blog about my usage, but given my work advising on social bookmarking and social web, I shy away talking about what I use as what I like is likely not what is going to be a good fit for others. But, my work is one of the reasons I want to talk about what I like using as nearly every customer of mine and many presentation attendees look at del.icio.us first (it kicked the door wide open with a tool that was light years ahead of all others), but it is not for everybody and there are many other options. Much of my work is with enterprise and organizations of various size, which del.icio.us is not right for them for privacy reasons. I still add to del.icio.us along with my favorite as there are many people that have subscribed to the at feed as they derive value from that subscription so I take the extra step to keep that feed as current.

Ma.gnolia Offers Great Features for Sociality

I have two favorite tools for my own personal social bookmarking reasons Ma.gnolia and Clipmarks (I don't think I have anything publicly shared in Clipmarks). First the later, I use Clipmarks primarily when I only want to bookmark a sub-page element out on the web, which are paragraphs, sentences, quotes, images, etc.

I moved to try Ma.gnolia again last Fall when something changed in del.icio.us search and the results were not returning things that were in del.icio.us. My trying Ma.gnolia, by importing all of my 2200 plus bookmarks not only allowed me to search and find things I wanted, but I quickly became a fan of their many social features. In the past year or less they have become more social in insanely helpful and kind ways. Not only does Ma.gnolia have groups that you can share bookmarks with but there is the ability to have discussions around the subject in those groups. Sharing with a group is insanely easy. Groups can be private if the manager wishes, which makes it a good test ground for businesses or other organizations to test the social bookmarking waters. I was not a huge fan of rating bookmarks as if I bookmarked something I am wanting to refind it, but in a more social context is has value for others to see the strength of my interest (normall 3 to 5 stars). One of my favorite social features is giving "thanks", which is not a trigger for social gaming like Digg, but is an interpersonal expression of appreciation that really makes Ma.gnolia a friendly and positive social environment.

Started with Beauty, but Now with Ease

Ma.gnolia started as a beautiful del.icio.us (it was not the first) and the beauty got in the way of usability for many. But, Ma.gnolia has kept the beautiful strains and added simple ease of use in a very Apple delightful moments sort of way. The thanks are a nice treat, but the latest interactions that provide non-disruptive ease of use to accomplish a task, without completely taking you away from your previous flow (freaking brilliant in my viewpoint - anything that preserves flow to accomplish a short task is a great step). Another killer feature is Ma.gnolia Roots, which is a bookmarklet that when clicked hovers a semi-transparent layer over the webpage to show information from Ma.gnolia about that page (who has linked to it, tags, annotations, etc.) and makes it really easy to bookmark that page from that screen. The API (including a replica of the del.icio.us API that nearly all services use as the standard), add-ons, Creative Commons license for your bookmarks, many bookmarklet options, and feed options. But, there are also the little things that are not usually seen or noticed, such as great URLs that can be easily parsed, all pages are properly marked up semantically, and Microformats are broadly and properly used throughout the site (nearly at every pivot).

Intelligently Designed

For me Ma.gnolia is not only a great site to look at, a great social bookmarking site that is really social (as well as polite and respectful of my wishes), but a great example for semantic web mark-up (including microformats). There is so much attention to detail in the page markup that for those of us that care it is amazingly beautiful. The visual layer can be optimized for more white space and detail or for much easier scrolling. The interactions, ease of use, and delightful moments that assist you rather than taking you out of your flow (workflow, taskflow, etc.) and make you ask why all applications and social sites are not this wonderful.

Ma.gnolia is not perfect as it needs some tools to better manage and bulk edit your own bookmarks. It could use a sort on search items (as well as narrow by date range). Search could use some RedBull at times. It could improve with filtering by using co-occurance of tag terms as well as for disambiguation.

Overall for me personally, Ma.gnolia is a tool I absolutely love. It took the basic social bookmarking idea in del.icio.us and really made it social. It has added features and functionality that are very helpful and well executed. It is an utter pleasure to use. I can not only share things easily and get the wonderful effects of social interaction, but I can refind things in my now 2,500 plus bookmarks rather easily.

Let Me Count the 24 Ways

It is that wonderful time of the year for 24 ways, the wonderful 24 gifts from one web developer to the rest of us. I deeply enjoyed them last year and am looking forward to the remainder of the gems.

Stikkit Is a Nice Example of a Personal InfoCloud Tool

I have been using the newly launched Stikkit for the last day and rather enjoying it. Stikkit, is a web-based postit with super powers of a notepad with bookmark, calendar, lite address book for people, tagging, to do, and reminders to SMS (in the U.S.) and/or e-mail.

Stikkit is the product of values of n start-up that is the founded by Rael Dornfest, formerly of O'Reilly.

This summer I was in Portland and got a preview of Stikkit and was really impressed. It was a slightly different application at that point, but it had the great bones to be a really nice application for one's own Personal InfoCloud. Much of the really good intuitive scripting that turns dates in text into calendar entries, text to do lists into ones that can be checked-off, and other text to real functionality is in the current version and just sings.

When I used the Stikkit bookmarklet it captured pertinent information from a page that I wanted to track, which had date related information that is essential to something I have interest in, it made a calendar entry. The focus of the Personal InfoCloud is to have applications and devices that let people hold on to information that they have interest in and move it across devices, as well as add their own context. Stikkit, really is a wonderful step in making a rather friction free approach to the Personal InfoCloud. It puts the focus on the person and their wants and needs for the use of the information in a page. Stikkit can free the information from the confines of the web page and alert the person to important dates. Stikkit also allows the person to share what they find easily.

I think the key to Stikkit is the term "easily", which is the underpinning of the whole application. The only thing I would love to see is Microformats added so that the information in Stikkit could be dropped into my own address book or calendar and synced (if the gods of syncing shine favorably on me that day). Looking at the markup in Stikkit, it seems to be semantically well structured to easily add microformats in the near future.

This has been cross-posted at Stikkit at personalinfocloud.com where there is commenting turned on.

Rebranding and Crossbranding of .net Magazine

From an e-mail chat last week I found out that .net magazine (from the UK) is now on the shelves in the US as "Web Builder". Now that I have this knowledge I found the magazine on my local bookstore shelves with ease. Oddly, when I open the cover it is all ".net".

Rebranding and Crossbranding

In the chat last week I was told the ".net" name had a conflict with a Microsoft product and the magazine is not about the Microsoft product in the slightest, but had a good following before the MS product caught on. Not so surprisingly the ".net" magazine does not have the same confusion in the UK or Europe.

So, the magazine had a choice to not get noticed or rebrand the US version to "Web Builder" and put up with the crossbranding. This is not optimal, as it adds another layer of confusion for those of us that travel and are used to the normal name of the product and look only for that name. Optimally one magazine name would be used for the English language web design and development magazine. If this every happens it will mean breaking a well loved magazine name for the many loving fans of it in the UK and Europe

What is Special About ".net" or "Web Builder"?

Why do I care about this magazine? It is one of the few print magazines about web design and web development. Not only is it one of the few, but it flat out rocks! It takes current Web Standards best practices and makes them easy to grasp. It is explaining all of the solid web development practices and how to not only do them right, but understand if you should be doing them.

I know, you are saying, "but all of this stuff is already on the web!" Yes, this stuff is on the web, but not every web developer lives their life on the web, but most importantly, many of the bosses and managers that will approve this stuff do not read stuff on the web, they still believe in print. Saying the managers need to grow-up and change is short-sighted. One of the best progressive thinkers on technology, Doc Searls is on the web, but he also has a widely read regular column in Linux Journal. But, for me the collection of content in ".net" is some of the best stuff out there. I read it on planes and while I am waiting for a meeting or appointment.

I know the other thing many of you are saying, "but it is only content from UK writers!" Yes, so? The world is really flat and where somebody lives really makes little difference as we are all only a mouse click away from each other. We all have the same design and development problems as we are living with the same browsers and similar people using what we design and build. But, it is also amazing that a country that is a percentage the size of the US has many more killer web designers and developers than the US. There is some killer stuff going on in the UK on the web design and development front. There is great thought, consideration, and research that goes into design and development in the UK and Europe, in the US it is lets try it and see if it works or breaks (this is good too and has its place). It is out of the great thought and consideration that the teaching and guiding can flow. It also leads to killer products. Looking at the Yahoo Europe implementations of microformats rather far and wide in their products is telling, when it has happened far slower in the Yahoo US main products.

Now I am just hoping that ".net" will expand their writing to include a broader English speaking base. There is some killer talent in the US, but as my recent trip to Australia showed there is also killer talent there too. Strong writing skills in English and great talent would make for a great global magazine. It could also make it easier to find on my local bookstore shelves (hopefully for a bit cheaper too).

More XTech 2006

I have had a little time to sit back and think about XTech I am quite impressed with the conference. The caliber of presenter and the quality of their presentations was some of the best of any I have been to in a while. The presentations got beneath the surface level of the subjects and provided insight that I had not run across elsewhere.

The conference focus on browser, open data (XML), and high level presentations was a great mix. There was much cross-over in the presentations and once I got the hang that this was not a conference of stuff I already knew (or presented at a level that is more introductory), but things I wanted to dig deeper into. I began to realize late into the conference (or after in many cases) that the people presenting were people whose writting and contributions I had followed regularly when I was doing deep development (not managing web development) of web applications. I changed my focus last Fall to get back to developing innovative applications, working on projects that are built around open data, and that filled some of the many gaps in the Personal InfoCloud (I also left to write, but that did get side tracked).

As I mentioned before, XTech had the right amount of geek mindset in the presentations. The one that really brought this to the forefront of my mind was on XForms, an Alternative to Ajax by Erik Bruchez. It focussed on using XForms as a means to interact with structured data with Ajax.

Once it dawned on me that this conference was rather killer and I sould be paying attention to the content and not just those in the floating island of friends the event was nearly two-thirds the way through. This huge mistake on my part was the busy nature of things that lead up to XTech, as well as not getting there a day or two earlier to adjust to the time, and attend the pre-conference sessions and tutorials on Ajax.

I was thrilled ot see the Platial presentation and meet the makers of the service. When I went to attend Simon Willison's presentation rather than attending the GeoRSS session, I realized there was much good content at XTech and it is now one on my must attend list.

As the conference was progressing I was thinking of all of the people that would have really benefitted and enjoyed XTech as well. A conference about open data and systems to build applications with that meet real people's needs is essential for most developers working out on the live web these days.

If XTech sounded good this year in Amsterdam, you may want to note that it will be in Paris next year.

Nick Finck on XHTML Wireframes

Nick does a killer job in a post on XHML wireframing and use and reuse of deliverables. This is something I had been doing for years and found it really made the conception to inception process really quick. It also gives the means to keep your documentation up to date. The time savings with XHTML wireframes has been about a quarter to a third of the development time saved.

Those who don't like giving clients clickable wireframes, the pages can be printed/saved out in PDF and annotated.

The other knock is IAs not knowing XHTML or CSS. Somebody working in the practice of web development and web design that does not have an understanding of the handful of elements in XHTML needs to learn it quickly. Go look at CSS Zen Garden to get an idea of what design can be done on top of properly structured XHTML. Lift the hood and look at the mark-up. It is not that difficult.

In short go read Nick's wonderful piece and give XHTML wireframes a shot.

10 Wonderful Years

Before I forget, as of some point between the 20th and the 30th of November I will have had a personal site on the web for 10 years. All of this started with a few simple pages to say who I am (never very well), post a links page so I could have access to things I have an interest in from any internet access, and play with HTML. Much of the first site was silly with each page having its own look-and-feel (see playing with HTML), but I really wanted to experiment.

The first site was hosted on Compuserve, but with in a year it was moved to Clark.net hosting (that was bought by Verio and went downhill). In 1997 or 1998 I bought this domain name and soon after hosted the site outside (first with ASP and then ColdFusion) in real terms. In 2000 I moved the site to PHP, on the same hosting service, but they did not understand open source server hosting. In very late 2000 I started blogging with Blogger, which in 2001 switch to hand mark-up and then by the end of 2001 I implemented my own blogging tool that still runs the blog (it desperately needs a few hours of attention to get if functioning properly). But, work has largely kept me from making other profound changes to the site since then, there was the redesign to the current presentation in 2002 or so.

These past 10 years have made for a wonderful digital life. If you see me in London or Brighton (given the appropriate venue) lets celebrate this little event of personal expression and personal existence.

Microformats hCard and hCalendar Used for Web 2.0 Conference Speakers

Tantek has posted new microformat favelets (bookmarklets you put in your browser's toolbar). The microformat favelets available are: Copy hCards; Copy hCalendars; Subscribe to hCalendars; feed Copy hCalendars (beta); Subscribe to hCalendars feed (beta). Look at Tantek's Web 2.0 Speakers hCard and hCalendar blog post to understand the power behind this.

Microformats are one of the ways that sites can make their information more usable and reusable to people who have an interest. If you have a store and are providing the address you have a few options to make it easy for people, but a simple option seems to be using the microformat hCard (other options include vCard and links to the common mapping programs with "driving directions").

There will be more to come on microformats in the near future here.

Personal InfoCloud at WebVisions 2005

I, Thomas Vander Wal, will be presenting the Personal InfoCloud at the WebVisions 2005 in Portland, Oregon on July 15th. In all it looks to be a killer conference, just as it has been in the past. This year's focus is convergence (it is about time).

WebVisions is one of the best values in the web conference industry these days, as the early bird pricing is just $85 (US). You don't need an excuse, you just go. You spend a Friday bettering yourself and then Saturday in Powell's Books the evenings are spent talking the talk over some of the world's best beers served up fresh.

Books Read in 2004

I bought and read one standout book this year, Malcolm McCullough's Digital Ground mixed in with many more that I enjoyed. Digital Ground stood out as it combined a lot of things I had been thinking about, but had not quite pulled together. It brought interaction design front and center in the ubiquitous computing and mobile computing spectrum. I have been working on the Personal InfoCloud for a few years now and this really moved my thinking forward in a great leap. I considering better questions and realizing there are many next step, but few of these next steps the design community (in the broad user experience design sense) seems ready for at this time. One of the key components that is not was thought through is interaction design and the difference place makes in interaction design. It was one book that got my highlighter out and marking up, which few books have done in the past couple years.

I greatly enjoyed the troika of books on the mind that came out in 2004. The first was Mind Wide Open by Stephen Berlin Johnson, which was a relatively easy read and brought to mind much of how we use are minds in our daily lives, but also how we must think of the coginitive processes in our design work. Mind Wide Open focussed on improving one's attention, which is helpful in many situations, but I have had a running question ever since reading the book regarding focus of attention and creative problem resolution (I do not see focus of attention good for creative problem resolution).

The second book was On Intelligence by Jeff Hawkins. On Intelligence is similar to Mind Wide Open, but with a different frame of reference. Hawkins tries to understand intelligence through refocussing on predictive qualities and not so much on results based evaluation (Turing Test). I really like the Hawkins book, which throws in some guesses in with scientifically proven (unfortunately these guesses are not easily flagged), but the predictive qualities and the need for computing to handle some of the predictive qualities to improve people's ability to handle the flood of information.

Lastly, for in the mind book troika I picked up and have been reading Mind Hacks by Tom Stafford and Matt Webb. This is one of the O'Reilly Hack series of books, but rather than focussing on software, programming, or hardware solutions these to gents focus on the mind. Mind tricks, games, and wonderful explainations really bring to life the perceptions and capabilites of the grey lump in our head. I have been really enjoying this as bedtime reading.

Others in related genres that I have read this year, Me++: The Cyborg Self in the Networked City by William Mitchell, which was not a soaring book for me, mostly because Ihad just read Digital Ground and it should have been read in the opposite order, if I had cared to. Linked: How Everything is Connected to Everything Else and What it Meands by Albert-Laszlo Barabasi was a wonderful read, once I got through the first 20 pages or so. I had purched the book in hardback when it first came out and I was not taken by the book in the first 20 pages. This time I got past those pages and loved every page that followed. Barabasi does a wonderful job explaining and illustrating the network effect and the power curve. This has been incorporated into my regular understanding of how things work on the internet. I have learned not to see the power curve as a bad thing, but as something that has opportunities all through out the curve, even in the long tail. On the way back from Amsterdam I finally read Invisible Cities by Italo Calvino, which was quite a wonderful end to that trip.

I picked up a few reference books that I enjoyed this year and have bought this year and have proven to be quite helpful. 250 HTML and Web Design Secrets by Molly Holzschlag. CSS Cookbook by Chris Schmitt. More Eric Meyer on CSS by Eric Meyer.

On the Apple/Mac front the following reference books have been good finds this year. Mac OS X Unwired by Tom Negrino and Dori Smith. Mac OS X Power Hound by Rob Griffths.

Two very god books for those just starting out with web design (Molly's book above would be a good choice also). Web Design on a Shoestring by Carrie Bickner. Creating a Web Page with HTML : Visual QuickProject Guide by Elizabeth Castro.

The year started and ended with two wonderful Science Fiction romps. Eastern Standard Tribe by Cory Doctorow. Jennifer Government by Max Barry.

Update: I knew I would miss one or more books. I am very happy that 37signals published their Defensive Design for the Web: How To Improve Error Messages, Help, Forms, and Other Crisis Points, as it is one of the best books for applications and web development on how to get the little things right. The tips in the book are essential for getting things right for the people using the site, if these essentials are missed the site or application is bordering on poor. Professionally built sites and applications should work toward meeting everything in this book, as it is not rocket science and it makes a huge difference. Every application developer should have this book and read it.

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]