This post has been a long time in the making. I started this rebranding project for Mardesco in late July. Three months later, I have to recognize that even though I’ll still be tweaking the website a year from now, the website redesign is more or less complete, and it’s time for me to follow up on my earlier posts about the rebranding process: the logo redesign process, and the reason for rebranding.
Why redesign the website?
As soon as I decided to change the logo, I knew it was time to redesign the website. It comes as a no-brainer that updating Mardesco’s website would be a core part of a rebranding project. We are a web design company, so our website must reflect the latest in responsive design and modern best practices. And of course it already did that… but.
Website redesign: from concept to code
Brainstorming and wireframing
The website redesign process began with some sketches. I sat down for several different brainstorming sessions. Some of the ideas from these sessions eventually became my wireframes for the design.
A wireframe is a rough draft of the layout of a website. It has no color or content, but is used to demonstrate layout. A formal wireframe is precisely proportioned to show the exact scale and relationship of elements to each other in a finished layout. Because this project was strictly internal, I didn’t require approval from a client, so a rough sketch was adequate for my purpose.
When it came time to start building, I selected my favorite ideas from the brainstorming sessions. Now I had a rough sketch in my notebook of how both the homepage and the interior pages would be laid out. All I had to do was to start fleshing them out with CSS, and put it all together with a WordPress theme.
WordPress theme starting point
My WordPress theme development framework is the Widgeon Starting Point (now available as a free download on GitHub). The Widgeon Starting Point is an empty WordPress theme template, loosely based on an old build of the HTML5 Boilerplate, and customized to suit some of my own personal preferences. So I created a clone of my local copy, and jumped right in with some CSS rules to describe my new website design.
I had already spent a couple hours building the new design up from my Starting Point when I suddenly remembered a long-dormant mental note about the Twitter Bootstrap. So I downloaded the latest version of the Twitter Bootstrap and merged it with my Widgeon Starting Point to create the Widgeon Bootstrap (repository release date tba). At this point, it’s early in the project. I’d like to start it on a solid foundation. And besides, I was able to simply copy & paste most of the previous days’ work into my new Bootstrap-based framework hybrid in a matter of minutes.
But then I spent hours learning about the Bootstrap system, because believe it or not, this was my first Bootstrap project. Turns out the Bootstrap’s .container class is wider than my foundational stylesheet’s #container specification! I had a maximum breakpoint at 1024px, but Twitter allows the size up to 1170px. Screens are growing. Exciting stuff!
Fleshing out the design
I based my theme’s visual design on my logo colors. I went off to ColorZilla for their CSS3 gradient generator, which includes backwards-compatibility for non-compliant browsers.
My idea for the homepage design involved something like a splash screen. The layout design for this splash screen was based on the layout design for my new business cards, which in turn had been inspired by the design for my newspaper advertisements. I set it up so the user could scroll down past the splash screen to access the rest of the homepage content; and on any view other than the splash screen, the header bar and primary navigation menu are fixed to the top of the screen for improved usability.
The original Mardesco website was based on a commercial theme that I purchased in May of 2012. It was just supposed to be a nice design to help launch the company more quickly. I felt the theme architecture was a bit clunky; but I had grown fond of some of the features. In fact, my (already tenuous) search engine rankings probably would suffer if I eliminated some of the features, so instead I had to figure out how to port the features from the commercial theme into my own custom theme. The nice thing about working with open source software is that it’s so easy to reverse-engineer someone else’s code. Once I found what WordPress functions the old theme had been calling, then I just looked those functions up in the WordPress Codex documentation, and wrote my own implementations, as necessary.
For example, custom post types had been built into my old commercial theme, so I built them in to my new theme as well. I had really been dreading the custom post type, but it wasn’t so bad. Trying to integrate some of the Twitter Bootstrap’s expected wrapper classes within shortcode-generated html snippets was much more time consuming.
Later I learned that building this type of functionality into a theme violates the guidelines regarding the separation of presentation from functionality. Since this project was strictly internal, I may not have done this differently even if I had known; but it is certainly something for me to remember when I work on future client projects.
One exception was the breadcrumb navigation: there was no point in writing this from scratch. I found a plugin with a friendly license, and implemented it as an include file to generate my breadcrumbs. Later, I realized that I could have done this even more easily, just by changing my settings in the Yoast SEO plugin. Yup, you live and you learn.
Content and URL structure
If you know me, then you’ll know that I couldn’t just change the visual design of the website and leave it at that. I had to write some new content, get some new art, and style my new design.
I was doing a complete overhaul of my website, so I went after cruft in my permalink structure, too. I tried to get a better informational hierarchy represented by my page URLs. This meant moving some pages from being children of one page to being children of a different page. It also meant moving my entire blog post structure out of my permali
All in all, this required a lot of new 301 Redirect and RedirectMatch rules in my .htaccess file. Regular expressions are always a bit of a tongue-twister to me, so this process required a bit of trial and error that doesn’t need to be recounted here.
Something else that took a lot of time was creating new content to go with the new design. I had to write new copy, and create new composite images and graphics. Content development is essential to the design process; but this blog post is more concerned with the technical considerations of the website redesign. The most interesting part was when I used Photoshop to superimpose actual screenshots of my website design work on top of photographs of a computer monitor and a cell phone, to generate a composite image representing “responsive design.” You can see it on the redesigned web design page.
There’s still more on my “to do” list for this project. I’ve noticed that there are display incompatibilities on IE8, which doesn’t support media queries or CSS3 gradients. If this were a client project, I’d have done that sooner. As an internal project, this gets postponed in favor of more pressing concerns. IE8 currently has about 4.6% of the browser share and declining fast. Still, I should fix the site for IE8, given that I spend so much time & energy trying to improve the browsing experience for mobile users, which represent just 3.26% of browser usage.
In the meantime, the new design is online!
If you’d like Mardesco to help you get your website redesigned, please contact us.