Introducing Our Brand New Design!

Jun 20 at 10am

On Monday, June 23rd we'll be launching a total redesign of The Bold Italic. You may recall back in September we redesigned the homepage, which was an interim design that laid some groundwork for the changes we were planning with this larger effort. This version has been nine months in the making, and touches every single page of TBI. (Design-nerd moment: we even changed the grid!) We've affectionately nicknamed this redesign Layercake, because each page is broken up into layers of similar content. We're thrilled to finally be sharing our new site with you. We hope you like it, and we'd love to hear your feedback in the comments either way, because this is just the beginning; we'll be rolling out more features and updates in the coming months.

What's Under the Hood?

We're making a serious investment in the way our users experience this site, starting with some pretty great and powerful tools. Zurb's Foundation – which credits itself as "the most advanced responsive front-end framework in the world" – was the starting point. It really delivered; we were able to get our basic layout prepared in a matter of days. In addition to providing basic HTML, CSS, and Javascript goodies, Foundation is also very easy to modify and extend. We were able to use SASS (Syntactically Awesome Style Sheets) to write clever code that kept our HTML clean, while still utilizing the powerful grid system and tools from Foundation.

Responsive Design

Perhaps the most notable change in this version of our site is that it features a responsive design, or fluid layout. This means that we no longer have a (slightly sad) mobile version; as you resize your browser, the content re-shuffles to fit into whatever size screen you're using, across the wide variety of devices and screens that our site is viewed on. 

More than half our traffic comes from mobile devices (mostly iPhones), and we also have users on giant desktop displays. To ensure that our content makes sense at every size, we used four defined ranges in our layout: mobile, tablet, large, and X-large. Each range has styles specific to it, and in the case of mobile and tablet, we even changed how things appear in the grid. For tablet and larger, we used grids of varying sizes to organize content. In the mobile view, content becomes a feed for easy flipping through stories and events. 

Additionally, we want our photographs, illustrations, and type to look beautiful on every screen. This is tough, as it can add to load time. We found a service that helped us with this aspect of the redesign. ReSRC.it provides tools to resize photographs and illustrations for whatever screen size (or resolution) you are using. Have a 15" Retina MacBook Pro? Expect crisp, clear photographs in our stories. Have a 27" desktop monitor? We've got you covered with some huge illos.

It's a Bird, It's a Plane, it's the Superhero!

We're calling this part of the site (above) the Superhero. It's at the top of the homepage, and it's where you'll find the most current and relevant content: articles as they are published, our upcoming events, new shop items, and anything else we think you should see immediately! Check back often, as this will continue to change throughout each day.

Flyout Nav

The "hamburger" icon, which lives in the upper right corner of our persistent navigation bar, unleashes a flyout nav with trending articles and quick links to each of our major site areas: Read, Do, and Buy. You can also find links to your profile in here, and for contributors, the dashboard.

Human-Curated Collections

Further on down the homepage is the Read layer. While the Superhero is chronological, this area is curated by one of our editors daily. Here you will find collections of like-minded content from our archives.

Events

Throughout the redesign process, we've been conducting interviews with our users, and heard that some of you didn't know we produced events. Now all of our calendar listings will appear in circular frames, visually differentiated from the articles. This layer of the homepage will display upcoming events. We're including "vibes" for each of the individual listings to give you a hint about what to expect from them. There will also be a layer of content on the event pages – articles tagged with the neighborhood where the listing takes place, so you can read up on the 'hood you're about to visit.

Read Archive

This is a month-by-month view of all the content we've created. You can spend hours here! The bigger article on the left of the page is the piece that was most popular that month, while the rest of the grid displays chronologically. 

Superheros Need Superfeet!

At the bottom of every page you'll find our superhero counterpart, the Superfooter. This is a randomized collection of our greatest hits, which will change when you move to a new page or refresh the page you're on. If you're a new Bold Italic reader (as opposed to an Old Italic reader), be sure to check here for awesome stories you may have missed when they first became popular.

Article Pages

These pages have a few new bells and whistles too. We've removed that pesky "right rail" to allow images to go edge-to-edge for an immersive experience. Further down the page, we've added a sweet new "Also tagged as" layer, where you can find other related stories based on your interests. Below that is a "Next up" layer, showing you the next article in chronological order. 

Shout Out to Our Homies!

Finally, we want to thank our collaborators, without whom this redesign wouldn't have been possible. Thanks to DesignMap for brainstorming with us and providing user-interface wireframes to get us off and running. You guys got us thinking bigger than we could have on our own. And thanks to Byron Hoffman for collaborating on the visual system. Your enthusiasm was contagious!

Also Tagged As

You Might Also Like

Next Up

×
Let's try that again
Join Other SF Insiders
Sign up to receive our stories, events, and other news. — OR —
By signing up you agree to The Bold Italic's terms of service.

Already have an account?

×
Let's try that again
Sign In
Access your profile, email settings, post comments, and more. — OR —
Forgot your password?

Don't have an account?