All Posts Made in
Front-End Development

Blogher Redesign: Now 40 Winks

denim.png

Our project plan says, “Creative Brief: June 9th, 2007.” That’s just six weeks ago when we were still “talking” about the design ideas and the creative direction for the new Blogher.org redesign. Lisa Stone is always up for an enthusiastic late night call when it comes to talking about the design for the web’s number-one destination for women’s bloggers. Had it not been for the opportunity to get to know Lisa before taking on this effort, I don’t think we would have been able to make this happen…

So, many of you know the rest of this story. The reader’s digest version goes something like this:

  • Scores of late night Skype calls between designers, developers and Blogher
  • A few rounds and revisions of design
  • A few color tweaks and changes
  • Some very random late night ideas
  • Some new functionality and aesthetic things to add
  • Setup Drupal environment
  • Build Drupal templates
  • Database this and Drupal module that…
  • Build/test, build/test, build/test…
  • You know the rest…

Before I knew it, the time was 3:00 am. I was on a four way Skype call with Graham, Jeremy and Michael. At this point we were past the point of no return as we were deep into the migration process. These guys had not slept in days but they were cool, calm and collected. Sure, there was the occasional four letter word when the inevitable surprise occurred, but this is when they would systematically triage and remedy each issue as it would come up. I was imagining that this was like a very complicated surgery. A procedure that would last for hours and where the body was in a strange sort of balance. I pictured the team in their surgical clothes, shoe-cover-thingies, masks, rubber gloves and special microscope glasses. Passing the tools around the table, a few stitches here, suction there and an organ transplant every now and then.

This launch has a happy ending as we went live in the early hours of the morning on July 24th, 2007. In this business we just expect launches to be challenging. There are always surprises and special circumstances. It was particularly challenging since we were also repopulating thousands and thousands of old posts and comments into a new Drupal 5.1 system and theme. While being persnickety about the code, we were faced with the challenges you might expect from a community made up mostly of user generated content.

Please note the word “beta” on the Blogher logo at Blogher.org. We have a bug list and soon will redeploy the creative team to sift through the details, comparing the approved color comps to the actual site…..while our coding team tests in every browser.

Sometimes life rewards us with rare opportunities to fade into that special blur where we just go into overdrive and turn out great work. Making new friends with people like the Blogher team is the unexpected bonus that is extra cool and great.

Blogher is an amazing community that we are sure has a business model to carry it very far. Thanks so much to Lisa, Graham, Jeremy, Brandon, Jenny, Mike, Candice and Gabe. Great work, and get some sleep for crying out loud!

Developing Content for iPhone’s Mobile Safari

Analysts are estimating that Apple has sold 700,000 iPhones in the U.S. According to Nielsen//NetRatings, there were about 209 million U.S. Internet users as of March/07, 69.2% of the nation’s population. Making the reasonable assumption that the 700,000 iPhones sold were to people who already regularly use the Internet, that means 0.25% of Internet users in the U.S. will occasionally be using the Mobile Safari browser on their iPhones to visit your web presence, and that’s after the first four days of sales. Does that make you warm and fuzzy, or send a chill down your spine? At RD2, we couldn’t be happier.

RD2inc.com on the iPhone

Which Web?

The iPhone falls squarely in a facet of the web that has been growing for some time now, a sort of limbo between the “desktop web” and the “mobile web.” Apple recently posted their Development Guidelines for the iPhone which “read like a love-letter to standards-based design” as our local Adam Keys puts it.

(more…)

Lorem Ipsum Considered Harmful

Oftentimes, we will need to design and even develop for unknown content. Maybe a client has a copywriter that is still in the process of producing the content. Maybe the project is a blog that will have regular content additions or a white paper template. When this happens, designers and developers do what we’ve been trained to do; reach for lorem ipsum.

Photo of stick figures saying Lorem IpsumLorem ipsum, originally uploaded by missha

So what’s the big deal? Why am I picking on the placeholder text that has been used for over 400 years? The problem is not with the text itself; in fact, it excels at shifting the focus from content to presentation. The problem is that it only represents a single type of content, the paragraph.

Writing good content isn’t easy; a challenge that is only exacerbated by the hyperlinked nature of the web. What does good content look like? Good content is varied and rich, like the content on LogLogic’s site. Rich content is written using element beyond paragraphs such as bulleted lists, numbered lists, glossary lists, hyperlinks, emphasis, citations, quotations, pictures, pull-quotes, and data tables. Lorem ipsum, as-is, neither explores the design of these elements nor encourages their use.

Anyone familiar with markup semantics will recognize that most of the above list is represented in HTML as various elements. That’s not simply because I think in markup semantics; it’s because the goal of HTML isn’t to create web pages, but to create hyperlinked documents with rich content.

In case you couldn’t already tell, I’m advocating putting together new standardized dummy text, a richer dummy text, “Lorem Ipsum 2.0” if you must. Content changes and the design and implementation should be ready for it. We’d love to get some input on the format this should take, or better yet, even invoke the lazyweb. After all, the results should end up being creative commons licensed. We, the industry, need to get started on this right away; we at RD2 will be.

Guidewireconnection.com Launched!

guidewireconnection header.png

When I first typed in my search to learn about Drupal, I spelled it “Droople.” Luckily “Droople Blog” on google returned the proper spelling. It took a few requests from Charlotte to get me there, but after realizing that I might be coming across like we were a WordPress only shop, I wanted to prove the strength of our team and prove our knowledge in many applications. Keeping the faith, after learning enough to sound smart (sort of), I asked Chris and Blake if they had heard of it before. They both looked at each other and paused. I knew we were in for a ride. They both admitted to have worked with Drupal in the past, but mentioned that it was slightly more complex.

Fast forward a couple of weeks and it is now very obvious to me why so many Drupal sites look very similar to each other. At lightning speed, our designers and developers completely reconstructed Chris Shipley’s Guidewire Connection.

Great work Chris, Blake, Brandon and Mike…not to mention the rest of the RD2 team who covered for us during those late nights of working through all aspects of the Drupal framework.

More to come on the details of what we all believe to be a great platform for business applications that want a content managment platform that supports social networking functions.

Graded Browser Support

Chris Ronan @ 03 Dec 2006 :: Front-End Development :: comments (1)

It seems like every time I turn around we are re-evaluating how we write to our level of browser support. In chatting with Chris Griego the other day, he shared with me the following that he posted on our internal Wiki. I thought it was worth sharing so that we can reference it from time to time. Here’s what Chris posted internally:

graded browser support

Graded browser support is a concept borrowed from Yahoo! that promotes using different levels of support for browsers versus supporting a browser or blocking it completely. Graded Browser Support provides an inclusive definition of support and a framework for taming the ever-expanding world of browsers and front-end technologies.

A-Grade Browsers are fully supported in terms of content access, style, and behavior. These browsers are fully tested in QA.

X-Grade Browsers are assumed to be compatible. These browsers are never tested in QA, but if an issue is brought to light, it receives a fix.

C-Grade Browsers are those not in wide usage with significant support costs. These browsers should receive content but are not expected to achieve the full style or behavior that A-Grade browsers do. QA may randomly test these browsers to ensure the content is accessible. Issues found are taken on a case-by-case basis. Where possible, these browsers may even be blocked from loading CSS and JavaScript files.

Blake, You Are So Money!

Atta Boy, Blake. You have attracted the attention of WaSP and they posted a nice interview with you. LOVE IT!

“As a student of Interactive Media Design at the Art Institute of Dallas, Texas, Blake Elshire learned CSS as part of his course, then discovered that not all students were quite as charmed by the technology as he was. He shares his thoughts and insights with WaSP EduTF.

At the time of year where many schools are starting a new term, some teachers are still demanding archaic Web practices as part of their syllabi. Whether Web standards is taught at educational institutions is an issue that is no longer new. And yet, it is not uncommon for a student to be penalized for using modern Web techniques. Factors contributing to why we are not yet seeing more valid university Web sites, or why fresh graduates are not more knowledgeable in Web standards, still constitute a multi-faceted problem.

Blake Elshire first caught the attention of EduTF via his comment to our Buzz On Quality Education. We invited him to tell us a little more about his experience as a student in interactive media design. Read the interview

Refresh Dallas and Microformats

Refresh Dallas, a local user group for web designers and developers, will have a speaker tonight talking about Microformats — a way to enrich content in web sites to have specialized meanings, which allow for pseudo APIs to be built.

We’ve been integrating these into our sites for several months now. For example, we integrated an address card into Rough Creek. Today you can use specialized search engines to find Rough Creek’s contact information, and it won’t be long before major web search engines integrate this functionality directly so that a search for “Rough Creek Lodge” would show a map and contact information at the top, without Rough Creek needing to register their information with each individual search engine.

Look forward to seeing you there!

BancTec: Do-It-Yourself Content Management

We’re pretty proud of the work we’ve been doing for BancTec. I compiled this snazzy (yet fairly shameless) press release-type writeup on the cool things we’ve done with BancTec’s new site. A few BancTec people were in the office today and when Chris asked how keeping up with the new site was going, the response was very positive. I can’t quote her exactly, but words like “great” and phrases like “it’s easy for me to take care of by myself” were definitely used.

Here’s the press release:

BancTec, headquartered in Dallas and London, provides “a wide range of solutions for automating complex, high-volume and data-intensive business processes for clients in the financial services, manufacturing, government, services, and utilities industries,� according to their website.

BancTec’s new corporate website, www.banctec.com, is filled with next generation thinking in web development, especially in the area of content management. In an unprecedented move, RD2 constructed the entire web site from the ground up using WordPress, an open source (free) Content Management System (CMS). The program has traditionally been used to update Blog content only, but RD2 cut BancTec’s content management cost substantially and improved online marketing practices by seamlessly integrating the technology to allow the firm to easily administer the web site through a web browser without the use of traditional HTML editors. Every image asset and word on each page is contained and managed within the CMS (Content Management System). (more…)

The Eolas Wars

Recently, Microsoft changed the way Flash and anything else that uses <object>, <embed>, or the <applet> method of accessing ActiveX controls. This is a result of the Eolas versus Microsoft patent case regarding the way Microsoft was accessing the ActiveX controls to handle those tags. On February 28th, Microsoft released a patch which changed the way Internet Explorer works with ActiveX.

I paid attention to this case closely. I don’t do the Flash work around here, but I do implement it on many of our sites, so I wanted to be sure we had our bases covered.

Last year, RD2 Best Practices called for the use of the Satay Method for including valid Flash objects in a web site. Unfortunately, using this method triggers the patch and the new “click or hit spacebar for activation” comes up.

In a recent update to our Best Practices, we switched to the use of Unobtrusive Flash Objects, or “UFO”, as our method of implementing Flash.

How exactly does using UFO solve this wonderful problem? Through plain old trickery, my friends.

UFO swaps content through Javascript dynamically. The page has normal searchable text inside of an element with a specific ID. That element is then swapped for the Flash content when the page is loaded. The cool thing is that the text content is still searchable and valid and shows up even if Javascript is turned off. You can have cool Flash content without sacrificing your SEO or site accessibility.

Since UFO works dynamically, it falls under Microsoft’s preferred method for fixing your ActiveX controls, which basically says that any ActiveX controls dynamically written to the screen are automatically activated for user interaction.

No grey borders, no “click or hit spacebar for activation” — just Flash working properly.

Exciting Day at RD2

Last Friday was a pretty exciting day at RD2, and, having only been with the company for a month and this being my first “real” job in the web design world, it probably made it that much more exciting.

We are very close to launching a site, so we are finishing up the Quality Assurance process. Some very interesting issues arose Friday. I wasn’t directly involved in the team that built the site, as it was already in progress when I came here about a month ago, but I helped on occasion when an extra hand was needed, and was involved in the QA team.

In the morning we had a couple of issues with WordPress and how it handled a link to a category with no posts in it. When choosing a category with no posts, WordPress returned a 404 page that had no style or information about the error. So Chris Griego did some surgery on the PHP that handles 404 errors and fixed it to look and see if the category is present and send it to the category page saying there aren’t any posts in this category yet. Thinking that was the end, we felt good and went to lunch. (more…)