When I started building with Genesis, I had been building on Thesis for a while. I was spoiled to Pearson’s typography and the ease of designing just by tinkering with two files:
custom.css. There were a lot many things I didn’t know or didn’t care about. And let’s say the web was a little different then. It was 2008.
I was forced to look for an alternative once Thesis 2 came out. And Genesis was visible everywhere, thanks to a ton of affiliates both platforms were feeding. And not one could tell which one’s better and how, because the focus was one earning a commission. Anyways, I just bought the entire thing on the safer side. And there were so many child-themes, almost one theme for anything you could think of. But soon I realized my workflow wasn’t as simple and streamlined as before. And in order to successfully deliver a Genesis based website there was an ocean of challenges. This is a story of those challenges and how I ultimately evolved a winner.
- Taming a child-theme: Out of all those child-themes there’d at least be one that looks closest to your end-goal. And at that point you’ve picked up the lesser of all evils. It’s only later you realize that the child-theme you’ve chosen to customize and deliver is still miles different from what your really want. Changing layouts, other layout elements, fonts is just the beginning. Clearly if you wanted something that was flexible, scalable and something that you could count on to deliver, child-themes were not it.
- Fixing the default Genesis design: Ask any Genesis affiliate “Why Genesis?” and the answer will be that it’s more secure and robust and simply awesome. This is just some “smoke and mirrors” terms to get a sale. Really, Genesis is neither the first of its kind and not the only one out there. Set up Genesis and I felt like scraping and redoing it again. Simply put, it was not tastefully done. While the goodness of Genesis is not just skin-deep, the vanilla design was the first thing that turned me off.
- Getting to grips with Typography: The confidence of Pearson’s vanilla designs was just missing. This typography looked cheap and I needed a quick way to find-replace the fonts or better yet do it programmatically.
- Integrating Google Fonts: And while I was at it, why limit yourself to web-safe fonts? Why not tap into web-fonts? Google Fonts is free and one of the best out there. I saw forums with questions like how do I use the x Google font with the y Genesis child-theme. It was time to bust this bozosity.
- Modifying Layout Widths: When it came to modifying the widths, it would almost be tricky to get them right cross-browser. Clearly not everyone has the same layout requirements and everyone has their choice of what width works for their site/design.
- Fixing responsive break-points: And right when you think you are done with widths you realize you’ve scr**** the responsive design. At this point I’m thinking for a good reason to continue building the thing and not start something from scratch. I’d not give up that easy.
- Finding and replacing values in CSS: So how do I change the font size? Or the font-family? Finding and replacing isn’t as easy as you think it is. Sometimes a simple font declaration does it and sometimes it’s a font-family and font-size. I don’t like the leading anyways so I’d spend a long time scanning the stylesheet for anything that’s out of line with my design requirements.
- Personalizing a child-theme/design (logo/header graphics/favicon): And finally there’s no easy way to personalize the theme. Even if I were to ignore everything, install and configure the theme, how would I go about getting the header and logo right? A background header image is not the answer.
- Incorporating styled elements into the design: One areas of challenge is inserting modern styled elements in the design. CSS Frameworks like Semantic UI make that a breeze. But when you integrate the same into Genesis or a child-theme, it would break them. To build an impressive design I needed to use at least one CSS framework. It was just a smart thing to do — use stylish elements that an expert has already built for you to reuse.
- Creating Landing Pages: What good is a website without at least one landing page design? Every single design worth it’s salt needs a landing page. And if you consider this as an after-thought, it’s just plain short-sighted. Why would I need to install a third-party landing-page solution if every site needs it? Why not solve the headache for once and for all? Landing-pages are not all that easy. Boosting conversion rates is a niche service and a whole different area of expertise. From being able to insert full-width landing sections to the ability to show and hide specific sections of mobiles, it’s a lot of work. People on mobile platforms see and use the design differently. Their usage and conversion patterns are different. Also there are other areas of challenge. For example most landing pages don’t need the same site-wide menu or don’t need one at all. Landing pages often have the header/footer and various elements hidden. Clearly this was one area where some long-term vision was needed.
…All these, not to mention some other specific requirements of business sites. I don’t build one page simple websites for mom-n-pop shops. I do custom-design and I do it with flair and do it tastefully. If I had to build a solution that I would count on to be flexible, scalable and be able to deliver exceptionally well to my standards, it has to be hand-coded. I also found I was wasting a lot of time in other areas such as:
- Making the design retina ready.
- In some cases, translation, RTL etc. would be a major exercise.
- Adding, removing, changing menus on specific pages (landing pages like I mentioned above). Actually I treat every post and page as a landing page. There should be no reason to have to cut-paste content from a post and convert it into a page and redesign it as a landing page if it is doing well in SERPS or traffic-wise. The same post or page should have the ability to be built-upon as a landing page itself. Any url where your visitors land is a landing page. Full stop.
- Showing, hiding specific widget areas on specific views. You don’t want your sidebars to show everywhere and you can hide them with the layouts. So that seems simple. But the more complex part is that often (and most) designs have specific call-to-action areas perhaps for ebooks and in the form of other opt-in forms etc. And you don’t need all these to show across all WordPress views, 404, category, search views etc. Simply put, you should be able to control which views they show on with a simple checkbox.
- Mobile detection and customization specifically for mobiles only platforms. Since a majority of my focus goes into boosting conversation rates, I dedicate a lot of time making sure that the site converts equally well or better on mobile platforms. After all most of us use our tablets and smartphones for shopping these days. And what good is a $4000 design if it doesn’t earn you on mobile platforms?
- Building a setting page: This was a common expectation but always scrapped because of budgetary issues. Why should a settings page cost this much? I think for all simple things there should be a setting somewhere so that the customer can live in peace and confidently feel in control without having a chance to break the design itself.
- Locking all settings and functionality in-place: That’s a big concern once you gave them control. Depending of your customer, they may get confused or adventurous to try things out and ultimately end up breaking the design. The easiest things is to save the settings on the settings pages and then hide them so that the customer can’t see them. Taken care of.
- Miscellaneous: There are several other things with Genesis. Like it needs fixing to work with bbPress and WooCommerce.
It took me a few years before I thought of building something of my own. Want to check it out? Watch this video right here. If you do custom design this is what you are looking for. This halved my design time and doubled the success rate of the designs at the same time.
UX UI Front-end Development, Genesis WordPress Theme Framework Child-Theme