Connect: behind the front-end experience is an extraordinary frontend engineering knowledge drop from Stripe’s design team — how they built engaging landing pages with next-generation technologies like CSS 3D, CSS Grid, and the Web Animations API — including the (new to me) Intersection Observer API to detect the visibility of an element. A must-read.
Via Twitter / johnmaeda.
If you make websites, this is must-watch TV: CSS Grid Changes Everything (About Web Layouts) with Morten Rands-Hendriksen at WordCamp Europe 2017.
An educational and engaging presentation by @mor10 (epic pun on his Twitter handle!) that explains everything you need to know to move past float and flex and start using CSS grid today in your web design or WordPress theme.
View links and slides on the author’s site; source: WordPress YouTube channel.
Forge is a tool for quickly developing a WordPress theme built by the fine folks at The Theme Foundry.
Forge is a free command-line toolkit for bootstrapping and developing WordPress themes in a tidy environment using front-end languages like Sass, LESS, and CoffeeScript.
During the early development process of this year’s default theme for WordPress, the Twenty Twelve team—Drew Strojny and myself—used Github and Forge to build the theme (view the archived source).
I would like to share my thoughts on using Forge during this process now that the theme is back in the core WordPress environment: Subversion and Trac.
In summary: Forge is too restrictive for general theme develpoment.
Continue reading Review: Forge, a Tool for Bootstrapping a WordPress Theme
Matt Wiebe linked up a piece of required CSS reading from Nicholas Gallagher.
Unicorn is the newly minted Unified Validator from W3C. One-stop shop for CSS, HTML, and RSS feed validation.
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 