Etika Marketing

Tag: website design

  • Mobile Marketing Is No Longer Optional

    Mobile Marketing Is No Longer Optional

    A few days ago, Movable Ink posted their US Consumer Device Preference Report for Q3 2013,  showing that 61% of email opens occurred on a mobile device like a phone or tablet. That’s more people opening emails on mobile devices than desktops (“desktop” referring to both desktop PCs and laptops.

    And the Pew Research Center reported in September 2013 that 21% of adult cellular device owners do most of their online browsing via a smart phone. You can view the full report here.

    Mobile users require a different viewing and interactive experience than do desktop users. At the very least, they need to be able to view and navigate content easily. The days of being faced with microscopic type, unwieldy layouts and broken navigation are over for businesses that want to stay competitive. Mobile marketing is here for everyone.

    This means a change in how marketers serve up web and email content to their prospects and clients.

    Only a few years ago, being “mobile-friendly” meant having two websites: one built for desktops and one for mobile devices. You might have identified mobile websites by their URLs having an “m.” as a prefix to the regular URL. Browse eBay with your smartphone and you’ll see m.ebay.com for the URL.

    Simpler websites would have their “m.” sites designed and maintained separately from the main site. You could imagine the pain that would be. More sophisticated sites (like eBay) would dynamically generate the mobile version from a database engine.

    But the fun doesn’t stop there. HubSpot has a detailed blog post describing the SEO problems multi-URL sites can have. Recommended reading if you fall into this camp.

    And then came responsive design…

    Responsive Design is a Good Start

    There’s plenty of discussion about responsive design for websites and email in the popular Inbound Marketing channels.

    Responsive design often uses a combination of meta tags and CSS to deliver content in a layout suitable for the device or media being used. Fonts are larger; menus and links are simplified and optimized for touch; complex, multi-column layouts are reduced to single columns; large graphics are replaced with smaller and/or simpler graphics suitable for the screen size being viewed.

    A responsive website should also strive for faster load times on mobile devices. Again, this means optimizing the layout and graphics to reduce bandwidth demands (smaller images and less complex layouts).

    Here’s a recent blog post of mine displayed on a Samsung Galaxy S3 phone, a Nook 8.9″ Android tablet, and a laptop screen:

    Samsung Galaxy S3 screen
    Samsung Galaxy S3 screen
    Nook Etika Screenshot
    Nook HD 8.9″ Android tablet screen
    Laptop PC screen
    Laptop PC screen

    HubSpot has a very handy tool to simulate how your website looks on various mobile devices. It even lets you navigate your website on the simulations. Very cool stuff. You can find it here.

    My WordPress site (the one you’re reading right now) happens to use a responsive theme that relies on CSS for the mobile-friendly features. A “media query” in the HTML header or in the CSS determines the screen size (usually width) of device you’re using to view the site, then sets style parameters or loads an appropriate stylesheet.

    Here’s an example of an HTML header tag to load a special mobile-optimized stylesheet in the event a small screen is detected:

    <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 500px)" href="small-phone.css" />

    Other WordPress websites might use similar themes and CSS for responsiveness or they might use a combination of theme/CSS and a mobile plugin or just a mobile plugin with a non-responsive theme. There are pros and cons with each of these options.

    And Don’t Forget Email

    But responsive design isn’t limited to websites. In fact, email might be a more critical application of responsive design, especially since the number of people viewing email on mobile devices is rapidly overtaking desktop use. Simple responsive email designs work much like responsive websites do, by changing font sizes and simplifying layouts into single columns. Here’s an example of an email newsletter using a responsive design:

    email example browser
    Email on a desktop browser
    email example mobile
    Email on a phone

    However, some email marketing platforms allow email designers to create completely different emails for mobile users. Chad White, Principal of Marketing Research at ExactTarget and author of the book Email Marketing Rules, writes about how some businesses are making email content mobile-friendly on the Content Marketing Institute’s blog.

    He talks about responsive design, where the layout alters to accommodate smaller mobile screens, but he then gets into “mobile-targeted” design, where elements of the email content are changed to accommodate mobile users. These elements might include mobile-specific offers (“show this coupon to the cashier for an extra 10% off”) and call-to-action buttons (“click to call now”).

    But, before we can create this alternate email content, we must understand how mobile users consume content on their devices. It’s a new dimension to marketing, but one we can’t ignore.

    Next week, in Part 2 of this post, I’m going to explore the possibilities of how marketers might go beyond responsive design. How does “responsive content” sound?

  • Selecting a WordPress Theme for Inbound Marketing

    Selecting a WordPress Theme for Inbound Marketing

    With the re-launch of the Etika Marketing website under a new design, I thought it only appropriate for the inaugural blog post to discuss WordPress theme selection. The theme I’m using for this site is called Good Bones, by Make Design, Not War (MDNW on Themeforest) and available from Themeforest. (9/10/14 update: The Good Bones theme has been pulled from sale at Themeforest after many promises from the developer to update it. A perfect example of why you need to consider developer support of a complex theme or theme framework. Themeforest is not at fault; they are merely the marketplace. I suggest avoiding any themes by Make Design, Not War. I’m now shopping for a new theme for this website.)

    I’m a big fan of using WordPress as a CMS (content management system) for inbound marketing websites. I enjoy the design flexibility, the ease of expanding capabilities through plugins, and its search engine friendliness.

    Clients appreciate the ease of adding content via a familiar WYSIWYG interface. I like to tell newcomers to WordPress that adding a blog post is as easy as editing a document in Microsoft Word. And they don’t need to deal with the technology to perform routine tasks.

    Another huge plus for WordPress sites is the availability of thousands of themes, which allow you to alter your website design with only a few clicks.

    Well… maybe.

    A (Very) Short History of WordPress Themes

    As WordPress has evolved, so have themes. In the old days you had a fairly straightforward collection of templates and CSS (cascading style sheet) files and a limited number of configuration options. It was rather easy to recognize WordPress-driven websites without peeking at the source code.

    If you wanted to modify your theme beyond the out-of-the-box configuration, you needed to delve into CSS and PHP coding to make those changes—and pray the next release of WordPress didn’t break those customizations.

    Then themes like Thesis appeared, giving the more tech-savvy among us the ability to control many design features via dashboard controls. More complicated CSS and PHP customizations were managed via customization files. This made the theme more stable and less likely to break during both theme and WordPress updates.

    Along with Thesis (and later, Genesis) came the rise of “super themes,” called “frameworks.” Frameworks are base themes that allow for much more sophisticated customizations that could be saved as “skins.”

    Not long after, WordPress introduced “child theme” capabilities. Child themes allow users to customize a theme without changing the original or “parent theme’s” files. A child theme is a set of customized CSS files, templates, function files, and images stored in a separate directory. Only the customized files are stored in the child theme’s directory. WordPress will automatically use the parent theme files if a required file is not presentin the child theme.

    When a developer releases a new version of a theme, only the parent theme’s files are updated. Customized child theme files usually need to be updated manually.

    In addition to themes based on frameworks and others based on parent-child relationships, we have hybrid themes that use both.

    What’s Needed in a Theme?

    So what does all this have to do with selecting a WordPress theme for your inbound marketing site?

    Be patient, I’m getting there.

    Today’s WordPress themes can range from simple “old school” themes to hybrid monstrosities with frameworks, child themes, skins, additional settings files, and even special plugins.

    So what’s the best theme for you?

    In the old days you would either pick a theme whose design appealed to you or you would contract with a web designer to create a custom theme for you.

    For now, let’s forget about custom theme development and focus on how to pick an off-the-shelf theme.

    As an inbound marketer, you should have the following elements available in the theme or through third-party plugins:

    • Ability to create landing pages free of distracting elements like sidebars and navigation.
    • Flexibility to customize your sidebars (third-party plugins like Custom Sidebars can provide this capability if your theme doesn’t).
    • Responsive design, where the layout automatically adjusts for the screen size or device type, like desktops, laptops, tablets and smart phones. Third-party plugins can handle some functionality for mobile devices, but it’s far better to have a responsive design built into your theme.
    • Ability to easily add boxes to your pages and blog posts for calls to action. This can also be handled through third-party plugins, like Call to Action.
    • Flexible page layouts, like multiple columns and boxed content, which are easy to create and modify. This allows for more modern and dynamic page layouts.

    How to Shop for a Theme

    Here’s how I shop for a theme:

    • Find several themes that have designs that appeal to me or my client. I usually ask clients to provide several examples of websites they like, then I review those sites with the clients to establish the design elements they want and need.
    • Check to see which themes support my “must have” design elements, like responsive layouts for mobile devices, flexible page design via widgets or customizable boxes, sliders, tables, etc. I also view the theme documentation, if available, to get an idea how the theme works from the inside. Some themes require extensive CSS experience for customizing, while others don’t.
    • Look for active developer support. I want to see recent theme updates–at least within the last six months. And the developer must maintain a community support forum. That’s an absolute for me. A support ticket system is also appreciated. Some themes have a flat license fee with lifetime upgrades and support, while others require periodic license or support subscriptions.
    • Read customer reviews about the theme. Start with the negative reviews first to expose any fundamental problems. Then move to the support forum and view the common user complaints and questions. Not every developer will offer refunds, so do your homework, especially if the theme is expensive.
    • Lastly, buy the theme and test it on a development WordPress installation. You won’t know if a theme is right for you until you try it. You might have to sacrifice the cost of a theme to test it, unless the developer offers a good refund policy. How much you are willing to sacrifice is up to you.

    Regardless of the theme you buy, expect to invest several hours to learn how your theme works and even more time to tweak and adjust your site to your liking. How much time you spend and how much frustration you experience depends on how wisely you pick your new theme.

    The plus side of picking a smartly-designed and well-supported theme is the time you will save after you’ve covered the initial (unavoidable) learning curve. Changes and updates should go much more smoothly—your site will look great—and it will meet your needs as an inbound marketer.