October 25, 2013
by Danny

Responsive design: start from the knowable

As part of my research to understand responsive design principles, I came across this great article by Mark Boulton that explains why designing from the edge of the canvas doesn’t make sense for the web given all the existing screen sizes and the ones that will come in the future.

Few excerpt from the article:

Text that feel connected to the physical form in a binding manner that should make it invisible. It’s about comfort. Creating a comfortable, invisible reading experience.

Grid system design should begin with a constraint. Something that is knowable and unchangeable.

We do that by defining the constraint from your content. The constraint could be derived from an advertising unit, or from a thumbnail image from tons of legacy content. Whatever it is, start there. Don’t start from an imaginary page.

Start designing from the content out, rather than the canvas in.

June 4, 2013
by Danny

Social media strategy: focus

The problem with social media these days is that there are too many of them. If you read the news or listen to the experts, they would tell you that you need to be on all of the popular network.

Publishers/marketers don’t want to miss out on any opportunity to be the next Gangnam hit so they sign up and be part of every single new hot social network ranging from the ones that encompass everything (facebook, twitter) to the niche ones like model mayhem for models and photographers.

I’m one of them.

For our body painting studio, I created a facebook page, twitter profile, pinterest boards, foursquare place, google+ profile, yelp profile, meetup group, youtube channel, instagram profile and model mayhem profile.

To be honest with you, I feel like there’s something that those experts are not telling me. Or… maybe they also don’t know how to work the social media and all they’re preaching are unproven theories.

In any case, the strategy of being everywhere is not working for us.

We can’t adequately build our presence in every single one of those social networks because we don’t have the time and energy to do so. Hiring a staff to do that is not an option for us since we don’t see how the social media traffic convert into sales. This led me to automating some tasks (i.e. connecting my instagram with facebook then automatically tweet my facebook status update).

I’m not against automating these tasks. The problem with automation is that you take out the human from that network. It becomes machine broadcasting messages.

Essentially, social media is about human relationships. Your social network is your community. As a person, I wouldn’t want to be a part of a community where I’m seen as dollar sign. That’s exactly what social media marketing is: seeing your community (followers/fans) as dollar signs.

I had a thought recently, which I’m going to experiment with. What if I focus my energy on one or two networks that I genuinely enjoy being part of and really nurture it. Be present there and focus on generating value for the community as a whole. I suspect that by doing this, my business will naturally benefit the effort.

Having enjoyed the benefit of being part of the community, the members of the community would want to give back to keep that good thing going and simply to show gratitude. This would in turn, generate goodwill for my business and breed real fans: Otakus.

What are Otakus? Check out this inspiring talk by Seth Godin that explains it.

May 11, 2013
by Danny

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

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

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.