Responsive Web Design isn’t a silver bullet for mobile Web experiences. Not only does client-side adaptation require a careful approach, but it can also be difficult to optimize source order, media, third-party widgets, URL structure, and application design within a RWD solution. - Luke Wroblewski, digital product design leader, entrepreneur and author/speaker

Innovations in smart phones and tablets have changed the mobile landscape introducing new challenges in design and development. Ethan Marcotte proposed a solution by morphing fluid designs to create responsive website design. Its a milestone in web evolution but we recognize that its not a perfect solution.

People continue to experiment to discover it full potential and fix its imperfections. Experiments however seem to be focused on layout manipulation (based on break points using media queries). Simple layout manipulation is fine for smaller sites with smaller payloads but larger sites will require more forethought and development for responsive design to work.

I’m sure many brilliant solutions were built for the Boston Globe but consider the complexities of sites such as alibaba.com or eBay.ca. There is performance of content management systems, integration with third party API’s, integration with legacy systems and more. Lets combine that with multiple device constraints, maintainability and scalability.

We now take our content management systems for granted, but it wasn’t always this easy for the desktop web. We forget how difficult it was to simply get Apache running properly. During the last big wave of technology, we had a lot of infrastructure to build before we could reliably deliver quality experiences for desktop browsers. We’ve got a similar road ahead when it comes to mobile. - Jason Grigsby, mobile evangelist and web strategist

I’m sure there are smart people working to solve these issues as I write this. I hope we can use those solutions to get beyond simple trickery to master wizardry.

About The Author

Ally Noormohamed

Ally is a UI/UX designer, illustrator and writer. He loves creating for the web, it’s the little things, the details that are often overlooked that he loves.

I buy flowers and gifts for family and friends from an online retailer called Bloomex. I always start on their home page to try and locate an item within my price range.  This task takes more time than it should because the site fails to address basic usability.

I continue to shop from them because their products and service are great but that is not reflected on the site.

Appearance can greatly influence perceptions, and we carry that mental model with us when sizing up a website” – Aaron Walters, lead UX Designer for Rocket Science Group

Improving the home page would be a good start so I decided to propose one possible solution. In this article I will explain my solution and hope to emphasize the importance of making design decisions using proven usability practices and design fundamentals. Lets not forget common sense.

Navigation

The primary navigation is disjointed and buried under the banner. It is most effective adjacent to the main content area. The option for policies is rarely a first choice for people so I grouped it with other like items in the footer. Help can be grouped with other support information (e.g. phone number) and specials can be expanded within the main content area.

A Google search of similar online stores shows common navigation choices for product categories are flowers and plants, and gift baskets. Providing links for about the company and contact information establishes credibility and trust with the company. These options combine to form a navigation that is easy and familiar for people.

Site Utilities and Support Information

It’s important to group like items together such as phone number, live support and help for people to see the similarities, and differences between items. People often lean on search to find what they are looking so I made it larger and relocated it to the top right. I placed the groups at the top of the page because they are often found there on many sites (e.g. eBay and Amazon). Familiarity is usability.

Content

The content does little to communicate the site’s purpose or summarize what the company does. The banner ad is a partial attempt to convey that but many people ignore ads or elements resembling an ad. Revealing a selection of gifts provides a good insight to their products. People will glance for keywords so I accommodate the behavior by providing emphasis on content such as the tag line, titles and links.

Hick’s law of design principle states that the time it takes to make a decision increases with the number of alternatives. By limiting the tasks to a handful of choices there is clear starting point for people.

Shipping, weekly specials and creating your own are ideal choices for valuable tasks on the home page. Bloomex attempts to highlight those choices throughout the site.

The footer can be utilized for additional content and content that doesn’t require prominence. Bloomex packs the footer with SEO content much of which can be accomplished with better content on pages such as meta information.

Design

Visual design influences usability.

It’s shown that beautiful design creates a positive response in the brain, which actually improves our cognitive abilities” – Donald Norman, cofounder of the Nielsen Norman Group

I started by refreshing the existing color palette to provide better contrast and elegance, combined with appropriate white space and borders establishes a harmonious theme.

The theme is not complete without typography. Though Verdana has stood the test of time we now have more options for legible and attractive fonts. I picked two contrasting fonts for emphasis between the tag line (Candara) and other text (Open Sans). Variations in other text can be accommodated by ten different options of Open Sans.

I added icons to create visual cues and enhance content presentation.

Images would have been an alternative. Instead I use them in the carousel, which is the replacement for the banner ad and revealing deeper richer content at a glance. I use a (960) grid to group the elements and widen the layout to complete the harmony.

What about Mobile?

To have a successful mobile site or app, the obvious guideline is to design for the small screen. Sadly, some don’t, and we still see users struggle to hit tiny areas that are much smaller than their fingers. The fat-finger syndrome will be with us for years to come.  The second point is more conceptual — and harder for some people to accept: When you have a smaller screen, you must limit the number of features to those that matter the most for the mobile use case” – Jacob Nielson, usability expert.

I considered these and other mobile usability guidelines when I started to ensure my solution would be scalable for mobile devices. Mobile is no longer an after thought.

Closing Remarks

Before I started I thought about a realign instead of a redesign to fix the fundamental flaws but visual design was part of the issue. Using sound principles I looked at individual components and restructured for a better user experience. Its easy to leap to Photoshop first but that only provides a temporary solution.

About The Author

Ally Noormohamed

Ally is a UI/UX designer, illustrator and writer. He loves creating for the web, it’s the little things, the details that are often overlooked that he loves.

I must admit. I love strolling into my office building’s elevator in the morning completely soaked, holding my travel mug with a smile on my face. You may have seen one of these creatures at your workplace. Apparently we are a strange breed!

Photo: Winston Hearn

Bike commuting is possible all year round. I’ve lived in three different cities with three different climates and rode through drenching rain, ice, deep snow and frigid temperatures.

In this article, I share a few gear and riding tips which I found have helped me through many sketchy weather conditions.

Go Mountain Biking

I highly recommend getting into mountain biking during the summer. I am extremely fortunate to live close to the North Vancouver trail system (North Shore) which offers some very challenging riding conditions. Here, we ride rain or shine and I find my wet weather riding skills come in hand for winter commuting. Mountain biking teaches balance and stability, how to navigate obstacles, how to ride a wide variety of conditions including wet and muddy conditions, and teaches you how to fall properly.

Leave early and don’t over-react

Like drivers, bike commuters should give themselves a little extra time to get to work in adverse conditions. In Vancouver, I find that the road conditions vary all over my route. At my house the roads could be fine, while further down my route I could experience icy or water-logged areas. Taking some extra time can help ensure a safe ride.

Also akin to driving, it’s important not to over-react to the conditions. While some may disagree, I tell people that snow (studded) tires are not necessary for riding snowy conditions. Just keeping a steady pace in snow or slush and making wide turns will get you through. Likewise, in slippy or icy conditions I keep my pace steady and if I experience some slipping, I just make a small correction to my body positioning.

Finally, trust your fears. If you don’t feel safe going down a hill which looks icy, better to walk it. Although that can be tough sometimes.

Don’t be lazy. Maintenance your bike regularly

I’ll admit. This is probably the hardest thing for me to follow. Having a busy family and work life usually means that bike maintenance sessions end up being few and far between. But you are better than me right? Of course you are!

Case in point. Above you can see that my laziness led to overly worn brake pads. The brake pads wore unevenly leading to a metal part of the pad housing digging into my rim. This caused a nice deep groove in my rim which will need to eventually be replaced…once I get around to it.

Seriously though, regular maintenance of the core areas of wear will prevent accidents and costly bike repairs. The amount of maintenance will depend on your bike type. One of the reasons I ride a single speed urban bike is because it requires lower maintenance than other bikes. The lack of derailleur means I only need to change the chain and brake pads most of the time. Once a year I usually re-route my cables and housing.

Dress accordingly

To me layering is an art form which I’ll admit took me a long time to nail down.

When I lived in Edmonton riding in winter meant braving -20°C or so weather (with much much colder windchills!). For the top I usually wore a tight fitting long sleeved synthetic undershirt followed by a thin sweatshirt followed by a GORE-TEX® jacket (shell). On the bottom, long johns and outer shell pants. Since I didn’t have any fleece, the first 5 minutes were uncomfortably cold. However, once I got through those 5 minutes and worked up some heat I was quite comfortable.

In Vancouver, even though it’s warmer, I find myself using the same dressing principle. I wear the minimum amount of clothes to protect myself from the elements (rain and wind). I am uncomfortably cold for the first few minutes but then become more comfortable after I warm up. This strategy works for me because I hate sweating.

It may take a while but eventually you’ll find a system that will work for you.

Last Thoughts

Well, I hope I have shown you that commuting by bike is possible during winter. By practicing your riding skills, reacting accordingly to the conditions, regularly maintaining your bike and dressing appropriately, riding in winter can be fun (yes I said it!). You will also command some serious respect in the workplace.

Have a tip? Please share your winter biking strategy in the comments below!

In this article, I show how to use WordPress’ custom post functionality to create unique sidebar content blocks for static pages which run off the same template.

A non-profit organization I volunteer for recently requested a way to add contextual content to specific WordPress page sidebars. The content could include quotes, donation and course banners and other images which were related to the content of the page.

The website has almost 100 static pages which use page.php as their template. The challenge was to find functionality which could provide page-specific sidebar content that could easily be administrated by volunteers who had a wide variety of technical backgrounds.

I usually try to provide custom functionality for my clients without resorting to WordPress plugins. Don’t get me wrong, I love plugins for a lot of things such as displaying the latest tweets, optimizing SEO and displaying content via light boxes (all of which are used on this site). I just don’t always care for the excessive quantity of poorly outputted code which often accompanies the functionality.

Overview of Steps Involved

1. Register a Sidebar custom post type
2. Create a template include file for the sidebar content block
3. Include the new sidebar template file in sidebar.php
4. Create a sidebar entry
5. Add the sidebar entry to the WordPress static page

1. Register a Sidebar Custom Post Type

In functions.php we would use the register_post_type WordPress function to create the sidebar content post type.

<?php

add_action( 'init', 'create_post_type' );

function create_post_type() {

$labels = array(
    	'name' => __('Sidebar Content'),
    	'singular_name' => __('Sidebar Entry'),
    	'add_new' => __('Add New'),
    	'add_new_item' => __('Add New Sidebar Entry'),
    	'edit_item' => __('Edit Sidebar Entry'),
    	'new_item' => __('New Sidebar Entry'),
    	'view_item' => __('View Sidebar Entry'),
    	'search_items' => __('Search Sidebar Entry'),
    	'not_found' =>  __('No Sidebar Entry found'),
    	'not_found_in_trash' => __('No Sidebar Entry found in Trash'),
    	'parent_item_colon' => ''
      );

$args = array(
    	'labels' => $labels,
    	'public' => true,
    	'publicly_queryable' => true,
    	'show_ui' => true,
    	'query_var' => true,
    	'rewrite' => true,
    	'capability_type' => 'post',
    	'hierarchical' => true,
    	'menu_position' => null,
    	'supports' => array('title','editor','author', 'page-attributes', 'revisions')
      );

      register_post_type('sidebar-content',$args);

}

?>

In the code we have the function create_post_type which runs at WordPress initialization. Inside the create_post_type function we have the register_post_type function which accepts two arguments: a post type name and an array of arguments ($arg).

I’m not going to go into the details of the register_post_type function or it’s arguments as there is an excellent in depth article by Justin Tadlock explaining the function details.

Most of the values in the $args array are defaults. One exception is the supports argument which defines the post admin features (meta boxes, editors, etc) which will be available for the new post type. Here I only need the title, (WYSIWYG) editor, author, page attributes (parent and order) and revisions boxes. There are many more options so feel free to add more to suit your needs.

Inside the arguments is the $labels array which contains strings that will be used to label the sidebar content admin area.

Screenshot of WordPress admin area for adding new sidebar entry. Highlighted are the labels defined in the $labels array

2. Create a Template Include File for the Sidebar Content Block

Next we’ll create a new PHP include file which will generate the sidebar content. I’m going to call the file custom-sidebar-content.php and put it in an includes folder for better organization.

<?php 

/* PART 1: Get the page ID and store in $postID variable */ 

$postID = $post->ID;

/* PART 2: For that page, get the 'sidebar-post-id' custom field value */

$sidebarID = get_post_meta($postID, 'sidebar-entry-id', true);

/* PART 3: If a value is returned set up a WP query to retrieve content of Custom sidebar post */

if ($sidebarID) {

    $sidebarEntryArgs = array (

   	 'post_type' => 'sidebar-content',
   	 'post__in' => array ( $sidebarID )

    );

    $sidebarQuery = new WP_Query($sidebarEntryArgs);

    if ( $sidebarQuery->have_posts() ) :

   	 while ( $sidebarQuery->have_posts() ) : $sidebarQuery->the_post();

   		 $sidebarContent = get_the_content();  /* get the content of the post - what ever is in WYSIWYG editor box and store in variable for output below */

   	 endwhile;

    endif;

    wp_reset_query();

}

/* Part 4: Output the sidebar code in a container with classes for CSS */

if ($sidebarContent) {

?>

<div>

   <?php echo $sidebarContent; ?>
   
</div>

<?php } ?>

I have split the code above into 4 parts which are commented.

The first part retrieves the ID of the current WordPress page storing it in the $postID variable.

In the second part we use the page ID to retrieve a custom field value. Each static page which contains custom sidebar content will have a custom field named “sidebar-entry-id”. The value of the custom field will be the ID of the sidebar entry we want to include on the page.

Here we use the get_post_meta function which accepts three parameters. The first is the post ID (in our case the page ID). The second is the custom field name (“sidebar-entry-id” in our case). The third is a boolean value asking if we want to return a single string (true) or an array of custom field values (false). In this case we only want to include one sidebar ID so we will stick with true.

We have now used the page ID to retrieve the sidebar entry ID which we will use to bring in the sidebar entry content to the page.

In the third part of the script we are creating a new WP_Query object to retrieve the associated sidebar entry content. First we check if we have a sidebar ID value returned from get_post_meta function. If so we use the value in the query arguments, $sidebarEntryArgs. In addition to specifying the sidebar entry ID, we also specify the post type which is “sidebar-content”. Within the loop we use the function get_the_content to retrieve the content of the WYSIWYG editor for the sidebar entry and store it in the $sidebarContent variable.

Finally, in part 4, we output the sidebar entry content within a div which has classes for styling the content with CSS. I use the class “CustomSidebar” to style anything specific to the container and the class “entry” to style the contents.

3. Include the new sidebar template file in sidebar.php

The next step is pretty straightforward. Open up sidebar.php or another sidebar file and paste in the following PHP code where the sidebar content will be outputted.

    <?php require_once('includes/custom-sidebar-content.php') ?>

Again, I put the custom-sidebar-content.php file in an includes folder. You may need to adjust the path of the included file.

At this point we have all the architecture for bringing in the sidebar content to the page. In the next two steps well will create some content for a sidebar entry and add it to the sidebar of a specific static page.

4. Create a sidebar entry

Now we need to sign into WordPress and create a sidebar entry. From the dashboard you should see a left menu item called “Sidebar Content” (see figure above). If you click the menu option you will see “Add New”. Clicking on this will bring you to a new entry page.

For this demo we will use the WYSIWYG visual editor to add some simple content: An h3 heading and an unordered list.

Screenshot of the WYSIWYG editor of an example sidebar entry.

You should be able to embed any kind of content including images, video embeds and text of course. You could also dive into the HTML tab and make some more complex widgets.

You can give the entry whatever title you want. It won’t be outputted so I suggest giving it a name which associates it with the page it will be on. For instance, if this was the beer page, I would give it “Beer page sidebar”

Publish the entry and after the page has been reloaded, note down the ID of the sidebar entry as you will need it in the next step. This will be in the URL on the edit page.

Screenshot of the sidebar entry edit page. The entry ID is highlighted in the URL.

View the completed sidebar entry

5. Add the sidebar entry to the WordPress static page

Finally, edit the page which will contain the custom sidebar content. Remember, the page template should have a sidebar.php (or equivalent) which includes custom-sidebar-content.php (step 3).

On the edit page, scroll down to the custom fields box. Under the “name” field, enter “sidebar-entry-id”. In the “value” field enter the sidebar entry ID you noted in the previous step. Click “Add Custom Field” and update the page.

Screenshot of custom fields box while editing the static page.

Now if everything worked out the sidebar content should be visible on the static page.

View the example static page with custom sidebar content

Notes

Why I chose Custom Post Types

Custom post types have been around since version 3.0. Since then, I’ve used custom posts to get around a number of problems in WordPress.

I really like how one can tailor the custom post admin to the type of content. For example, instead of having to call a content type a “post” which is far too generic, it can be called “Slide”, “Movie” or “Listing”. Calling a content type something other than post doesn’t really matter to WordPress developers, but it makes a big difference to a client or the person who will be administrating the website.

The website of the non-profit organization I designed this system for also has a blog so I didn’t want entries for sidebar content mixing with the blog items. I realize I could have used a normal post along with a specific category or tag as a filter but I didn’t want to have to modify the queries on the index.php, archives.php, and other archive pages. Using a custom post type automatically excludes it from the blog post listing. Also, adding the category or tag is another step in the process of creating a sidebar entries. I wanted to keep it as simple as possible.

Limitations

As I mentioned this demo is tailored to adding custom sidebar content to static pages. However, I will try to eventually make the code more general so single post pages and other archive pages can have custom sidebar content. In the meantime, please feel free to extend the technique.

Generation of Custom Post Types

It should be known that plugins exist which make it easier to register custom post types such as Custom Post Type UI by Brad Williams