May 11, 2013
by Danny
0 comments

Google content experiment on home page of wp site

This afternoon, I sat down to set up an A/B testing to optimize the home page of my body painting studio site.

I’ve been wondering if reducing the amount of content (and visual stimuli) on the page causes could reduce bounce rate, which would then improve conversion.

I started setting up the experiments on google analytics. If you have no clue how to get started, here’s a good article that walk you through the set up process.

Don’t worry it’s actually pretty straight forward, except for one thing… the URL for the home page variation.

I did a search on google on this and all the experts seem to just repeat the same step-by-step tutorial. All of those tutorials already have the page for the variation set up.

Now the problem with doing this test on a wordpress site (and many other CMS-powered) is that it makes the url structure neat. So where would you add the new page to test the original page against?

I tried adding it to the theme directory, but then all the includes were broken (header, footer, sidebar).

The best solution that I found is to create a new template for a regular page. I called this template “multi-test” by adding the following to the top of a new php page called multi-page.php that I place in the theme folder:
/*
Template Name: multi-page
*/
?>

Then I created a new page called “home” that’s using that new template.

That gives me the url http://denartny.com/home

I hope this could help somebody out there.

May 9, 2013
by Danny
0 comments

Recap of Responsive Web Design Studio

Last week, I attended Responsive Design Studio, a 3-day workshop at General Assembly organized by Rosenfeld Media.

I was really excited about this workshop because I’m currently working on a responsive project and, as we all know, most – if not all- web projects will be responsive projects in the near future.

Rosenfeld media did a great job marketing and organizing the workshop. Unfortunately, I left feeling disappointed because there wasn’t much that I could apply to my job as a UX practitioner.

Overall, a lot of time spent on philosophy and theories, which left little time to do any meaningful hands-on work during the exercises. The exercises were very shallow, particularly on the second day, when we wasted much time discussing irrelevant topics (i.e. should we call ourselves UX or Ux?).

I personally would not recommend this to anyone who expects more than an introduction to responsive design. It was good to be able to focus on this topic for 3 days straight, but don’t expect to be able to design/build an entire responsive site at the end of this workshop.

There are some things that I did learn from this workshop. Here they are:

  1. First day: content

    -Problem with a lot of CMS: content producers don’t have visibility to what would appear on multiple screens
    -Break content into smaller units
    -Use content audit as an opportunity to remove content (optimize, to focus)
    -Understand content goals before content audit
    -Responsive design is a system (of content)
    -Start design process from the element of content instead of the paper/screen size (inside out)
    -See content as objects (similar to concept in Object Oriented Programing)
    -Be direct and use active voice, use human relatable tone
    -Cut vague modifier (i.e. really)
    -Working with stakeholder: get allies before approval

  2. Second day: design

    -Responsinator : a web page that simulates loading your page on various screen sizes
    -Show > tell
    -Progressive enhancement: Horizontal expansion, not vertical
    -Major breakpoints : address with media queries (separate layout/design)
    -Minor breakpoints : use fluid design
    -Short larger text > long small text
    -icomoon.io : create icons using webfont ; only works with flat icons (not 3D)
    -Adobe Edge Reflow : a design tool from Adobe to create responsive layout

  3. Third day: code

    -Adaptive: device capability
    -Responsive: layout
    -Good UX = Good customer service — A magical experience
    -Technology shouldn’t be required to view content, it should enhance the way it is consumed
    -Browsers ignore what they don’t understand

April 16, 2013
by Danny
0 comments

jquery mobile fixed position and momentum scrolling

I’m building a mobile web prototype that requires a fixed top header. For some reason, whenever I add the CSS property for momentum scrolling (-webkit-overflow-scrolling: touch;), the fixed header is lagging and looks broken.

I found suggestions to apply the following CSS to the fixed element and all its children which seems to work for some people:
-webkit-backface-visibility:hidden; -webkit-transform: translateZ(0);

Unfortunately, the above doesn’t work for me.

The solution that worked for me is a bit of a hack that’s actually really simple. Instead of using position:fixed, pull the element out of the container, place it at the very top (or wherever you need it to stay) then apply position: absolute to it.

This work around is nicely explained by Ryan Fioravanti at Google developers site: Implementing a Fixed Position iOS Web Application

Disclaimer: I only test my prototype on iOS, so the above may not work on Android or other devices, but hopefully could be helpful for somebody.

April 9, 2013
by Danny
0 comments

Mobile consumption pattern

FT media consumption pattern: PC vs mobileIt’s becoming very obvious that users access the web using multiple devices depending on where they are and their purpose.

At this point – I suspect this would change in the future – we associate phones and tablets with leisure, while PC/laptop associated with work. It’s obvious now that doing any serious work (designing, coding, writing a report etc.) is not something that we’d do on our phones or tablets simply because we’re still trying to figure out how to use the new devices and coming up with new ways to interact with them.

Now for us who are dealing with this fast-paced evolution, we need to see what the current media consumption pattern looks like and what it means to us.

If us = media company, then we are in luck! This article from Media Briefing talks about laptop/pc vs mobile consumption pattern that FT and The Guardian sees.

March 8, 2013
by Danny
0 comments

Andy Budd’s Seductive Design presentation

Andy Budd – Seductive Design from Build on Vimeo.

Having been designing for big web sites where performance is critical and resources is scarce, I’ve been designing in safe mode.

Along the way, I picked up safe solutions for various design problems that I know would get approved by the dev team and still look decent/professional. This includes using web fonts, making sure the important elements are above the fold, minimize the use of unessential graphical elements, etc.

The problem with the above is that they shape my aesthetics sensibility and create a self-imposed design constraints. For example, I don’t explore typography in the design anymore simply because I know that Arial and Georgia are the 2 safe fonts to use. This is bad.

As the digital experience evolves with the available bandwidth and the support for various visual treatment on browsers, the limitations become obsolete. This means, I need to relearn how to design with the new parameters.

Andy Budd’s presentation above helps me rethink my design approach and aesthetics.