What you’re looking at — this beautiful new design — is over a year’s worth of work. To say it’s overdue is an understatement. It took awhile to put together, but it’s definitely worth the wait.
It’s The Black and Blue 4.0 – codename Delta.
And like all of the redesigns on this site, it started as a tiny thought in my head that the website was beginning to look dated. From there, it was all downhill.
I started by having a new logo made. But that wasn’t enough.
Hungry for more, I dove head first into a complete overhaul. I didn’t want just a new skin – I wanted to change how you experience the site. I wanted a stronger focus on finding content that can get lost in the shuffle. I wanted a website that reads just as beautifully on an iPad as it does on an iMac.
I wanted a transformation.
I wanted a fresh perspective on how this site works – more than visual changes. I wanted to start with a blank page and really refine the experience you should have when visiting The Black and Blue. That kind of thinking, as pretentious as it sounds, profoundly changed my approach to this website.
Instead of asking, “What looks nice?” the question became, “What works best?”
Of course, I’ve always valued the experience of the site along with the aesthetics, but this was truly the first time that I gave significant weight to changing the underpinnings of your standard WordPress blog for the sake of a better experience.
To me, when you simplify what makes The Black and Blue great, there’s only one answer…
The Content You Love to Read, Better Than Ever
The most important part of The Black and Blue is content. Without content, there’s nothing. No readers, no discussions, and really no reason for the site to exist.
Content is king. At least on this website it is.
So, with this redesign, I wanted an even greater emphasis on content in a way that empowers you to get more out of the website. Search is now more accessible. Categories have more prominence. And (one of my favorite features) you can sort posts by their published date or what’s most popular.
This redesign isn’t just about making the content look better, but making it easier for you to find, digest, and learn. It’s also about enabling me to provide that content to you in a more engaging way with big top-of-post hero images, an advanced video player, and significantly improved typography.
This isn’t a new philosophy. The last time I did a major overhaul, I expressed similar sentiments:
I want readers to focus on what is important on the page — the posts.
Nothing has changed in that regard, I’m just better at it! I approached every single change with an eye on content and your positive experience consuming it, sharing it, and learning more about it.
I broke that experience down into two main areas: reading and discovery.
Reading without Distractions
No matter how flashy or clean or nice the design looks, it means nothing if reading the content isn’t enjoyable. Throughout the existence of this website, I’ve spent time tweaking fonts, spacing, backgrounds, and other stylistic elements to try and make reading articles even better.
I hate going to websites and being distracted with things like:
- Poor link color choice
- A hard to read text/background contrast
- Flashing or distracting advertisements
- Pop-ups or pop-overs
- Embedded widgets within the content
Admittedly, at some point, I’ve been guilty of several of those in the history of this site.
But you’ll find none of that in this new design. In fact, you may have noticed there are no sidebars. There aren’t any ads either. That popup I used to have to push my free eBook? It’s gone too.
The content, this post you’re reading, is the complete focus of the page for its entire length.
Everything else is secondary.
Discovering Old Content in New Ways
One of the goals with this redesign was to do more with already written content. As The Black and Blue inches closer to its 500th post, the ability to discover content within the archives is crucial.
This is an advantage for both you and I.
For me, it means I get more out of the content I’ve worked so hard to create. For you, it means you get access to content you may not have seen before, but would love to check out.
After all, what good is the content if it’s tucked away out of sight?
That’s why the homepage is a complete overhaul. Previous versions featured a simple blog roll: nice because it’s familiar, easy to navigate, and floats the most recent post to the top. But blog rolls provide little flexibility. Publishing new content means pushing old content down closer to irrelevance. I often shied away from shorter posts in order to keep the longer, richer posts at the top.
This is what the old homepage used to look like. The most recent post was always given top priority, even if it was a simple announcement.
The new featured slider on the homepage overcomes this obstacle while still allowing a traditional post list underneath. That post list can be sorted by newest or most popular posts.
When you combine those three things, you get several types of discovery: featured articles I think are important, the newest articles, and articles other readers find the most exciting.
This thinking is also prevalent at the bottom of each post in the “Read Next” section. By default, the “Read Next” button will take you to the most relevant post based on the one you’re reading. But you can also choose to see, via the tabs below, the 5 most popular and 5 most recent posts.
Overall, there’s a better chance now that you’ll find content you haven’t seen before that you’ll enjoy.
Modern Aesthetics
We all have heard by now that Apple went “flat” in their design for iOS 7. Whether you like it or not, well, that’s another debate. But there is one particular quality from the flat design movement that I tried to embody: simplicity.
Early on, that meant stripping out gradients, superfluous reflections, shadows, and other accents. It meant prioritizing color, typography, and white space. While working on the “Delta” redesign, I turned to several websites as inspiration for their embodiment, in one way or another, of this philosophy:
These sites helped guide my mission to change the site from a cluttered, closed, chaotic mess to a clean, open, modern design. And nowhere is that transformation more apparent than in the logo.
The (Old) New Logo
You may have seen this logo already, in some form, because I’ve had it for over a year now. It was the genesis of this redesign. I was so excited over it, however, that I quickly adopted it as branding on the website, pocket guides, and social media pages.
But it always felt out of place.
The evolution of the logo starting from the earliest (top) to the current one (bottom). The third one down was in use up until yesterday.
Now it has a home – thanks, in part, to an improved font choice to match the icon.
For the first time in the history of this site, I feel like there’s a true identity to The Black and Blue’s logo which always felt forced in previous versions.
Modern Standards and New Technologies
Design is not just what it looks like and feels like. Design is how it works. – Steve Jobs
What you’re looking at is only half the story of this redesign. Behind the scenes are thousands of lines of code providing structure and functionality to The Black and Blue. And powering that code are some great new technologies and modern web standards.
HTML5 + CSS3
Even if you aren’t a code-junkie, you’ve probably heard of HTML5 as the future of the web. Now, The Black and Blue is part of that future.
This website redesign was made to be HTML5 and CSS3 compliant. That means it is future-proofed for the coming wave of the Internet’s standards. You may not notice it immediately from an external point of view, but the internal structure of the HTML5 code should help the site load faster, more reliably, and be supported by modern browsers well into the future.
The CSS3 effects help keep the site leaner with less reliance on images.
Responsive Design and Mobile Enhancements
Want to see a neat trick? Take your browser window and resize the width of this page. Or open up the site on your tablet or smartphone. Go ahead — I’ll wait.
What you’ll see is the page automatically scale in size to the width of the browser and certain elements adapt to the changing size: the menu collapses, the logo shrinks, and the content dynamically adjusts.
That’s responsive design.
This will make reading The Black and Blue on any device — laptop, tablet, phone — a consistent and pleasurable experience.
There will no longer be a mobile version of the website and a desktop version. There’s just one fluid version that will adapt to whatever kind of screen you’re reading the site on.
And if you’re on a touch device (which, according to my web stats, some 25% of you are), there are a few touch controls built into the site. For instance, on the homepage you can swipe between the featured posts at the top. You can also swipe right to close the menu on the right when it’s open.
Animations
Crisp, smooth animations are everywhere on this site. Importantly, however, they are CSS based. That means they can be accelerated by hardware graphics processors in everything from computers to phones. CSS animations don’t have nearly the same limitations as flash.
Secondly, they aren’t jump out at your face animations you’d expect from a Flash-based website. No, these animations are classy:
- A swipeable slider on the homepage
- The menu that pops out from the right of the screen
- The header that pops down or up depending on how you scroll through the page
- The search bar that expands when you search from the menu
- Fading transitions between content areas such as “Read Next”
- Subtle transitions on certain buttons when hovering over them
- And more…
If you really want to see CSS3 animations in full force, check out the new page for my free ebook Becoming the Reel Deal.
It was important to me to make any animations subtle and unobtrusive. Or, if overtly obvious like on the ebook page, make them quick and non-repeating. As a filmmaker, I understand the power of spectacle, but as a web user, I know it can also degrade, rather than enhance, a website’s experience.
If you aren’t seeing the animations, you’re probably using an outdated web browser. I highly suggest you update to the latest version of Google Chrome (my preference) or Mozilla Firefox. Speaking of…
A Few Notes on Compatibility
The new site structure leverages heavy amounts of Javascript in tandem with HTML5 and CSS3. While I’ve done my best to provide compatibility looking backwards, if you are using an old internet browser (specifically Internet Explorer), you may have a lesser experience.
If you’re using any Internet Explorer version lower than 10, you should think about updating or switching to Chrome or Firefox. And not just for my website, but you’ll find the rest of the web will be enhanced for you as well.
Also, to enjoy this site fully, it is necessary you have Javascript enabled. If you use any browser extensions that block Javascript, please add theblackandblue.com to your whitelist.
If you’re unsure if you have Javascript enabled, then you likely do. It’s on by default in most browsers.
Finally, there are certain pages on this site that have carried over their look from the old design. Unfortunately, I didn’t have enough time to get to those pages before this launch, but rest assured I am going to be slowly rolling out updates to them in the next month or so.
So When Do We Get New Posts?!
While the most drastic change to The Black and Blue with this redesign are the visuals, it’s about more than that. It’s about bringing the code up to standards, ruthlessly attacking page speed, and delivering content to you with no frills and no obstacles.
But this redesign represents something even greater.
It’s a rebirth of The Black and Blue.
I’ve been quiet for the past few months working on this redesign, but that doesn’t mean I’ve stopped writing. I have a plethora of posts and post-ideas sitting as drafts waiting to be published. I have new ebooks to finish and ideas for more resources. And now that this redesign is launched, I’m going to turn my focus to them.
With this relaunch complete, you can start expecting regular posts from me again – several times a week – and more regular releases of expanded resources.
Even in its period of dormancy, The Black and Blue drove consistent traffic and was shared across social media sites. That gave me confidence that other filmmakers are willing to learn for a lifetime, not for a product cycle. I don’t have to publish fresh posts everyday because what I write about isn’t tied to a firmware update, or a camera release, or anything with gimbals. That’s not to say sites that cover those topics are bad, but it’s not what I want The Black and Blue to be about.
The Black and Blue will always be about providing you with stories, entertainment, tips, and advice that give you a better understanding of how the film industry and below-the-line filmmaking actually work.
That’s what I love writing about. That’s my passion and I enjoy sharing it with you. And based on the comments I’ve received and emails that have been sent my way, you also share that passion and we can connect – however remotely – through this website.
So, I want to thank you for your patience as I took a hiatus to work on this redesign. Even if you don’t see the benefits now, I know you’ll enjoy it as more posts and new content begin to emerge in more pleasing and interactive ways on this website.
If you’d like to get on that ride, sign up for The Black and Blue newsletter where you’ll receive weekly emails with new posts as well as some exclusive tips and tricks.
Finally, I want to extend a tremendous thank you to you – the reader – for making the site what it is today. You have always given me the push I need to sit at the keyboard and write new posts. When I was up until 4 AM working on the silliest details of this design, it is you that kept me going.
Without you to read these posts, The Black and Blue is just a man talking to himself. So thank you, thank you, thank you for lending me your ears, your thoughts, your time, and, most importantly, your encouragement.
Now, let’s go back to one and… roll camera!
I’d love to hear your feedback on the new design – whether it’s massive praise, constructive criticism, or a tiny bug to be squashed. So leave your thoughts in the comments, hit me up on Twitter, or shoot me an email.