Jeffrey Zeldman. The godfather of web standards, the guy who first got me hooked on CSS and HTML, and who introduced me to WordPress. Zeldman.
10 years later? Zeldman.com uses a theme I helped make for WordPress.
Mind. F’ing. Blown.
I love my job. Thank you, Jeffrey, for getting me started and for continuing to inspire.
(Full screengrab for posterity.)
I’m proud to call myself a WordPress contributor yet again with the recent 3.8 “Parker” release. This is an amazing update to the world’s best CMS, with a focus on device support in the refreshed admin interface, better widget and theme administration, a new default theme, and much more.
As with Twenty Twelve and Twenty Thirteen my primary role in the project was launching a new default theme, Twenty Fourteen. This time the goal was a bit different: create a beautiful magazine-style site with WordPress. And launch it before the new year.
Twenty Fourteen started with an all-star team of Takashi Irie (designer) and Konstantin Obenland (lead developer) and we were joined by many contributors in the WordPress community, notably Nick Halsey (aka celloexpressions) who’d contributed to previous default themes and had a big impact again.
As with Twenty Twelve WordCamp contributor days were a big highlight for me during the 3.8 cycle. For 3.8 and Twenty Fourteen kicked things off at WCSF 2013 contributor day and then did a bunch of testing at WordCamp London (see the above photos for beautiful evidence). It was amazing to meet other WordPress contributors in person, work and talk together, and improve the software we love and use daily—people like Joan and Ben. This is why I love being a part of this community!
More about Twenty Fourteen:
– Twenty Fourteen demo site to see it in action.
– Takashi’s recap and the design decisions for Further (the predecessor to Twenty Fourteen).
– The Fourteen Colors plugin by Nick Halsey in case you’d like to customize the look a bit more.
– Background post on WPTavern: WordPress 3.8 – Taking The Default Theme Further.
– The philosophy behind default WordPress themes—and why they are named after the year (Twenty Twelve, Thirteen, Fourteen… ): Why Default Themes Change Each Year.
Enjoy, and happy new year.
A bit late posting this but it’s still very much on my mind.
With WordPress 3.6 I was honored once again to be part of the team for the newest default WordPress theme. For Twenty Thirteen Joen Asmussen pulled out all the stops, working from Matt’s vision for something new and bold and colorful. I’m still tingly from the first time I saw the design.
Check out the demo and read on for all the juicy details:
– Background and introduction post by 3.6 lead Mark Jaquith.
– Joen’s recap: Four Little Numbers.
– Lead developer Konstantin Obenland presents: Twenty Thirteen – Ins and Outs of Developing a Default Theme (slides).
– Joen’s alternate color versions and original PSD: Twenty Thirteen: Make It Yours.
If you missed the 3.6 announcement or want to know what’s next for WordPress I highly recommend watching 3.6 and State of the Word.
http://ma.tt/2013/01/2012-at-automattic/
Would you like to get involved?
Extra! Extra! The latest WordPress release is fresh off the presses.
If you’ve been around WordPress a while, the most dramatic new change you’ll notice is a completely re-imagined flow for uploading photos and creating galleries. Media has long been a friction point and we’ve listened hard and given a lot of thought into crafting this new system. 3.5 includes a new default theme, Twenty Twelve, which has a very clean mobile-first responsive design and works fantastic as a base for a CMS site.
Did you read that right?! Yes. New media flow. Totes awes, batpeople. There is much more in this release but that alone should be enough to make you go update to 3.5 right this moment. WPCandy has a nice run-down of what’s new in 3.5. (Note: if your site is on WordPress.com you’ve been using this for a few weeks already. You are a future-living geek and didn’t even know it.)
Twenty Twelve is a WordPress theme I’ve been working on for over 9 months, and yesterday it finally launched for everyone via the WordPress.org themes directory.
The theme was designed by Drew Strojny, with a mobile-first approach using responsive design techniques. The result is an elegant, beautiful, and readable theme that looks great on any device. If you’re interested in more about the design, Drew blogged about it over on The Theme Foundry and I also highly recommend watching his overview of the process, presented with humor and wit: How not to design a default theme.
Joining the team in July 2012, Konstantin Obenland contributed many hours of testing, code changes, and expertise. Self-described as a perfectionist and a native of Germany, his keen eye was crucial to nail down all the edge cases and make sure the theme works well for all users. Read Konstantin’s story.
Many more people contributed to bug reports, testing, theme-breaking, documentation. It takes an army to launch a new version of WordPress, and a new default theme is no exception. At the WordCamp San Francisco 2012 hack day, 17 contributors joined me during one of the most efficient and amazing group hack days I’ve been a part of. Looking at the photos from the event you’ll see the energy of the day.
If you’re interested in more of the philosophy behind default WordPress themes—and why they are named after the year (Twenty Ten, Eleven, Twelve …) read Why Default Themes Change Each Year.
And for history’s sake, the core Trac ticket that kicked it off: http://core.trac.wordpress.org/ticket/19978.
I hope you enjoy Twenty Twelve as much as we enjoyed making it.
Thank you to Sheri Bigelow for the photos of WCSF 2012.
I am proud to announce the recent launch of AZ-Birding.com, a custom reservation system for Arizona-based professional birding guides. I was involved in every step of this project from planning and prototyping to web design and development.
AZ-Birding.com, a free service of WINGS, launched in February 2009. I have worked with WINGS since 2005, and this latest project is exciting since it brings focus to Arizona (as compared to WINGS worldwide presence) and enables anyone to hire a local birding expert to explore the state’s wonderful birding specialties.
The site’s main focus is taking reservations, so the majority of the work revolved around managing calendars, the reservation process, and the guides’ availability with a custom CakePHP web application. The CakePHP app has two parts: public-facing pages with reservation forms and guide information and an administrative area for WINGS to manage all the details.
The goal for the administrative aspect of running AZ-Birding as a service was simple: automate the process as much as possible. To do this, the app has built-in functionality that runs automatically to produce reminders, late notices, and feedback requests (sent out to clients after their birding experience is over). This automation reduces the office workload for WINGS while ensuring a high-quality, consistent experience for clients. This hands-off approach safeguards against common situations where an administrator would have to step in and take action, like when a birding guide might be out of the country—or offline for a few days—and cannot respond directly to a reservation request.
The pages that don’t pertain to managing reservations are managed with WordPress. This decision was based on two realities: much more development time and effort would be required to cook up a CakePHP-based CMS, and WINGS is already familiar with the WordPress product and interface as the content editor and producer of the WINGS blog, Wingbeat.
As an added bonus, the site also tracks the latest Arizona bird rarities—meaning WINGS can post alerts when rare or special birds are sighted in Arizona. The home page and the “Latest Rarities” page both feature these alerts (entered into WordPress as blog posts) as well as custom data delivered by eBird, a free service of Cornell Lab or Ornithology. For example, the eBird data feed for “Notable Sightings in Arizona” not only brings more value to the AZ-Birding website as a birding resource, but it also provides potential clients with an idea of what to look for—hopefully enticing them to place a reservation if they see something that excites them. All the bird-related content on AZ-Birding is geared towards providing a reason to book the short-term tour with the service’s expert birding guides.
Two people contributed to this project outside of simpledream, and I owe them thanks. Sam Devore did the heavy lifting on the data modeling and backend CakePHP setup, and also contributed greatly to the project planning efforts, including work on user actions and workflows during the planning stages. The AZ-Birding logo (inspired by the gorgeous Elegant Trogon) was designed by Julie Hecimovich.
See the official announcement from WINGS, view all the screenshots on Flickr, and read more details in the simpledream portfolio.
On January 21st, 2009, DigitalFusion announced the new CPi Syndication website.
The site was released today and has been in development for over 1 year. The new site is completely powered by DFStudio and our entire software team contributed to the project — Michael McHugh did the design for the site and Lance Willett implemented that design while Matt Gile and Michael Rush worked on changes and extensions to our DF Studio system to meet CPi’s requirements.
CPi specializes in the syndication of the highest quality American and international photography. You would normally need to be registered user to access the images, but CPi has teasers on their home page that give you an idea of the type of photography they offer.
I handled the front-end development for the new site, including implementing the design in HTML, CSS, and JavaScript as well as integrating it with the backend framework (written in Java). The team has been very busy with client projects as well as continued work on DF Studio, DigitalFusion’s flagship web application for professional photographers (we recently released version 5 of DF Studio, but more on that in a later post).
Update: Summit Hut did some redesigning this week, including a new logo, new color scheme, and some layout changes. I was not involved in these updates. Please see the screenshots below and on Flickr for a reference to the the site design before these changes.
—Lance, June 16, 2008
From the Recent Client Projects and I Should Have Blogged This Months Ago departments, I present a brief report on a website realign for Summit Hut.
I was fortunate to work with my great friend and mentor Aaron and several former coworkers from my days at the Hut (I worked there 2001–2005). The subject matter was close to my heart, and having worked on the website for a short period of time before leaving the company, I was thrilled to help with the task of realigning and recoding Summit Hut’s flagship website.
View screenshots, visit the live site, or for more details on the part I played in the realign, continue reading.
Disclaimer: Please note, I am not involved in the upkeep and production of code or graphics for Summit Hut; my role was to build a solid foundation for future development and visual merchandising. I did produce the first home page graphic (view screenshot), but the home page graphics and various and sundry sidebar callouts throughout the site have changed since the site launch in February 2008.
I was in charge of visual look-and-feel, basic interaction design, and coding the HTML and CSS for the page templates.
Visual
My goal was to create a mood that was simple, clean, and sophisticated with a subtle regional feel for Summit Hut’s location in the Southwest.
The visual tone took cues from Summit Hut’s in-store merchandising and signage. The chosen color palette, typography, and imagery were all tailored to match the wonderful feeling one gets when stepping into the company’s high-end retail shops. I intended visual chrome such as icons and buttons to produce a clean and professional look to match the company identity as a premier outdoor retailer.
Considerations included better readability, clearer navigation, enhancements to the display of vendor brands and product images, and improved product merchandising.
Merchandising an online store can be quite challenging, especially if you want to reflect how the real-life store works. There are really two parts to it: decorative and organizational. The first is extremely important since it conveys value and desirability to the products; the second provides a clear arrangement for easy searching, browsing, and choosing. My goal here was to remove obstacles and let customers figure things out easily while providing a pleasant, easy, and fun shopping experience.
Code
The recoded page templates were probably the most urgent need; the former summithut.com sported a table-based layout, spacer GIFs, and other typical markup-cluttering artifacts. Valid XHTML and CSS to the rescue! Building on Aaron’s solid programming and site framework, we worked together on producing lightweight and reusable HTML chunks (by reusable chunks I mean in the spirit of microformats). For the style sheets (CSS) I used principles of grid-based layouts and the excellent Blueprint CSS framework as a starting point for resetting and standardizing the layout, text treatment, and interaction messages.
All the benefits of standards-based development apply to the updated pages: faster loading times, code that is easier to read and update, improved usability and accessibility for traditional and non-traditional devices, as well as flexibility for future website features and visual changes.
Interaction
Interactive design tasks for the realigned site centered on product browsing, selection, and the checkout process.
For purposes of keeping this report as brief as I can, let’s take the example of the product browsing and navigation. The previous product navigation involved a clunky accordion-style navigation on the left of every page. The new site splits the top-level navigation into a horizontal dropdown menu on every page, improves the search tool, and provides multiple ways to visually scroll through products. Product browsing can be in a list view or thumb view, and the sidebar menus allow you to drill down and refine the offerings easily.
The dropdown navigation for products was an important piece of this realign (view screenshot). The amount of products and product categories in Summit Hut’s online store makes the product navigation interaction a complex and difficult one. The information architecture is based on the store’s internal organization, which doesn’t always mimic how customers shop. The dropdowns provided a great way to simplify the complexity, and with Aaron’s excellent choice of jQuery (with the Superfish plugin), this interaction works wonderfully.
There were many, many, more improvements to Summit Hut website; I can’t list them all here, but you can view the old site on archive.org and then browse the current site to see for yourself.
The Sensible Leader 
