UXmagazine is an Italian resource for User Experience lovers. It publishes monthly articles concerning a wide range of subject although the topic is always UX.
I believe this project is very interesting and professional, so I asked the editors to have a little chat and share with you this short interview. You’ll find some clever suggestions and thoughts.

DB: when do you had the idea to create UXmagazine and with which purpose?

UXmag: The idea of UXmagazine born in november 2008, aiming to create a channel of communication and insight for whom wants to get to know user experience in a simple way, through articles and a dedicated network.

DB: I know behind UXmagazine there’s Sketchin, a design studio focused on UX. Is this project helping you to grow in a cultural and professional level?

UXmag: right now we’re still in an initial stage where investments are greater then revenues as to human effort, but the magazine is giving us a chance to share ideas and experience with a lot of new people, and is also becoming a place where experts like to gather.

DB: you always feature high quality articles, maybe even more academic than on the easy-going style of blogs. Did you choose to adress an audience of UX professionals or do you think UXmagazine is also a good starting place for newbies?

UXmag: Actually we would love that print editions could be also a starting tool for whos not familiar with this subject.

DB: I noticed you have lots of authors and you’re always open to contributions.Has it been difficult to “recruit” at first or did you get a lot of sponteneous enthusiasm from the community? Do you have any suggestion for whom would like to join now?

UXmag: UXmagazine it’s open to everyone, a bit like basecamp is, because we believe confrontation is at the very basis of new ideas and therefore innovation.That’s why we don’t accept only material from experts, but from anyone who wants to share a specific experience of use, a case study, something useful for the community, as well.

Recruiting authors hasn’t been difficult, many came spontanously, others that we thought could add interesting incentives at the community accepted our invite to join.

DB: I’ve got a feeling that agile design is something you truly believe in and want to promote. Am I right? Any suggestion for us?

UXmag: that’s actually our biggest challenge, we’re including it in all our internal projects and towards our clients.
We promote it because we’re testing its abilities daily and we know it adds a value in the dinamic and creative italian market. Moreover it has the potential to be replicable in many contexts.

DB: you showed interest towards government sites, suggesting even a series of articles on that. Right now, UK’s government issued a guide to use twiter for it’s workers.
Do you think institutions are finally taking seriously their web presence according to their recent interest in a decent esperience for users and a better understanding of communications through social media?

UXmag: there’s the opportunity but it’s not adopted yet in our market other than as a trend.
We think it’s important not only to give the tools to the user but also show which are positive and negative consequences this brings. Institutions need to understand languages and applications for a correct use in singular cases.

DB: in several articles (TagMyLagoon, Progettare Apps per Iphone, Mobile e Interazione Precarie) you spoke about mobile design an the application tht could come in this field. Do you consider “mobile” as the keyword for the future of internet?
How do you see user experience spread from the web to real spaces?

UXmag: yes, we believe the trend is increasingly towards mobile and we think at a future of adaptiv and iperlocal interfaces.
In the medium-long term a good share of the value generation online will go back to locale and not global. An iperlocal web would be a web tailored on the needs of a particular city where people, services, infos would be highly contextualized by place and time, giving the possibility to visualize contingent interfaces and infos with a high informative-level for the user.
Nevertheless the possibility for users to meet.
You can read about this also in Un Web Iper Locale è Possibile and in Strutture e Interface Adattive (slideshare).

DB: UX is often misunderstood as a singular step in the design process while we know it’s more of a flow, a concept to consider and cover in every step of the project.
By your experience, today, how do behave singular professionals involved in a team regarding UX, giving everyone different task and background?
Has the culture of user experience been adopte in Italy?

UXmag: Unfortunately in Italy isn’t much clear that UX is the sum of all the aspects of a service in use by a user. Therefore everyone who’s involved (marketing, design, communication, development) is doing UX and should have some know-how of what he’s doing. That’s absolutely misunderstood in many european markets (and it’s actually what I talked about at EuroIA).

DB: On UXmagazine even if you’re focused on one subject you already covered many topics. There’s something you’re looking forward to write about?

UXmag: the integration between phisical/digital products and also the integration among digital/phisical architecture.
We’re open to submissions on these topics :)

DB: do you think to switch also to a printed version any time soon?

UXmag: we already two versions, one which is printable on Scribd and one printed on request that you can find on Lulu.

DB: Are you satisfied with how the magazine grew till now? Do you have any surprise for the future?

UXmag: Yes actually, we’re very satisfied because we keep going and we constantly receive suggestions. Right now we’re trying to create something special that embraces both UXmagazine and UXconference.

DB: your last advices for the readers: a couple of books someone who starts to study UX should read? A couple of experts and inspiring people to follow online?

UXmag: as to inspiration we suggest Morville and Pabini, while Designing Web Navigation by James Kalbach, Usabilità dei Siti Web by Michele Visciola, Web Usability by Jakob Nielsen, and Designing Interfaces by Jennifer Tidwell are the book I recommend.

Here I’ll show you how to plan a site for any mobile device. At least the theory, then obviously, since the huge number of models and their differences you’ll always have to adapt something, but that’s the whole point: creating a mobile site that it’s good for old cellphones and stunning for iPhones.

why a mobile site?

The same way some years ago businesses realized internet was a big thing and it was important to have a web presence, today is becoming clear that adressing to the mobile audience is the new must.
There are more then 3 billions mobiles, 4 times the PCs. The number is increasing, but most important, old phones are replaced with new one which means that a growing number of people have access to internet on their mobile devices.


source:BoxUK

Normal sites are rendered decently on latest handsets that have a web browser similar to the desktop version, but they are a usability nightmare. On older phones instead they probably don’t work at all.
Trust me, something specific for cellphones it’s not a waste of time.

what we are dealing with

When cellphones first got a technology to access the internet they were using an old set of web standards called WAP, which contained its markup WML and the protocol to serve it (WTL, WTPS). WML is based on XML and it’s widely adopted and although it’s “outfashioned” it’s not deprecated, so you can consider to code a version of your site with this markup as a “safe mode” The evolution of wap was WAP 2.0 which adopts xhtml-basic/MP and the common TCP/IP HTTP protocol of communication. xhtml-MP is very similar to xhtml and renders the same, it only has some more features useful to mobile devices.
The first version of wap didn’t have styling options, but WAP 2.0 introduced Wireless CSS (WCSS) which is a subversion of CSS 2.1 to integrate styles to xhtml-mp. it’s similar to css 2.1 but has less attribute and to be sure that it’s cross-browser stick to simple. It doesn’t work on wap 1.0.
Today last devices such as the iPhone, Andorid, etc that have the same web browser as the desktop version, render and accept the same mark-up you use for web sites.here’s a couple of link to a guide on xhtml-mp and on wcss.

how to get started

What do we learn from this bit of history?
That is not difficult to build a mobile site that renders well on all phones with some sort of progressive enhancement.My best advice is to code in XHTML-MP and use different stylesheets. WML is additional, you should check your metrics to be sure but generally if people have such an old phone they don’t use it to browse now that there are alternatives.Before I show you any code snipplet let’s consider some paper work.

i. web strategy:

Why you need a mobile site? Are you really offering something useful for a mobile user? Do you offer a specific service? Do you help a task?
Don’t get me wrong, it’s not all about utility, you don’t need to build an iPhone app to have a mobile presence, internet is also entertainement. Think at someone in a coffee shop who decides to browse your blog killing time. What I mean is that you should get rid of everything is useless or not suitable for this kind of device. Heavy graphics or pages of pictures are a bad choice.
So think about your business goals, why it matters for you to go mobile. Think about your users goals, how they’ll benefit from your mobile site. Consider the technology available and its limits.As this is the step from which you’ll plan your interaction design later, it’s a good moment to understand which will be your audience. It may help you to know in which circumstances they’ll use the site and – very important, which kind of device they’ll use.One last question: are you considering to create a separate site for mobiles or you simply want to use some techniques to adapt your current websites to be rendered on mobiles?

ii. information architecture:

keep it as simple as possible! Avoid long chains of pages, think about “click investments” because even on 3G it always take time to load a page so the patience of mobile user it’s quite short. Cut everything that isn’t relevant and use well labeled links or categories: if the user knows what he is waiting for he is more likely to wait for it. Basically limit the choices and categories, don’t get the user lost in a labirynth. The fewer levels the better. It might help you to create a “click stream” to visualize how the content will be navigated.

iii. mobile web design:

there are a lot of things you have to keep in mind designing for mobiles. First of allscreen sizes vary a lot but what mostly matters it’s the width so my best advice is to create a fluid layout. Use percentages intead of pixels. you can learn more about it on A List Apart.
A liquid layout helps you as well on iPhones and other devices with the orientation features. However, for older phones that have only a portait layout it’s a good choice to style your content accordingly, like how you should display info and break text into smaller chuncks.

Navigation is another aspect that should be reconsidered. Even in multi-touch devices it’s a bit awkward to navigate and it couldn’t be less on other phones with the limited pad.
A good idea is to use lists, always, and keep links to a max of 10 per page possibly adding accesskeys (these last ones won’t be useful on multi-touch devices).
Avoid multi-levels links because on small screens won’t show properly.
Provide escape links to home, next, and previous section, at the end of each page so the user won’t need to scroll back to top.

Resources and bandwith are 2 of the biggest limit of mobile phones. Avoid object and javascript when possible because they are not supported on old phones and on the new one they drain the battery.

Limit also the use of images because they add weight on the page, plus you need to consider which would be the right size for them. If you want to play safe stick to the minimum which would be 120px wide. Another option is to use the size of the bigger screen you expect your site will be browsed (let’s say 480px, the width of an iPhone in landscape orientation?) and then apply this technique to let it adapt at the screen like your liquid layout. Obviously it’s not a “best practice” because the browser should anyay download the big picture. The right way of doing it is to use images with fixed dimensions and resize it on server side if you have to. When you can, always use sprites for images (if you don’t know what I’m referring to read this article on ALA). As usual, don’t forget the “alt text” in case the image isn’t loaded.

I mentioned the page size, my advice is to stay between 10kb and 25kb. I’m talking about the basic devices, for smartphones it’s ok also 50kb and for touch phones even 100kb but it’s better to stay low and it always depend on the quality of the connection.Caching is also something that can help you a lot with loading time, try to avoid common resources to be always downloaded and control caching
<meta http-equiv="Cache-Control" content="max-age=300"/> . Fun fact: Safari on the iPhone caches only files under 25kb, so zip all you external files like the stylesheet and try to stay within that weight with your images sprites.

When you style your fonts I suggest you don’t specify sizes in pixels, rather use “small/medium/large” because every device knows what’s right for him.

let’s talk about links: on mobile phones there’s no mouse so no hovering, forget about the attribute “hover”. Something fun instead is that if you use “tel:” or “sms:” in links you can actually activate those function on the phone, which would be pretty coolin your contact page as by clicking a link they can call you. here an exemple

<a href="tel:43802948">call us</a>
<a href="sms:12125551212">Send SMS to 1(212)555-1212</a>

Getting a bit more technical the first rule for your site to be rendered correctly on mobile devices is to use the right doctype (XHTML MP), character encoding (utf-8), and MIME Type (application/html+xml).

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" 
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Site Name</title>
<meta http-equiv="content-type" content="application/xhtml+xml" />
<meta http-equiv="cache-control" content="max-age=300" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

For what concerns the structure of your body try to build semantically (in the order things appears) and avoid tables or frames.It’s best if you validate your markup, limit the link to external resources and please, don’t use popups.

detecting and addressing specific devices

Ok, what I told you till now was true for any device, but you may want to add something special or simply focus on specific devices that you know are using your site.
How can you recognize the devices and then adapt you content accordingly? First of all remember what I asked you during the planning stage: do you want to build a mobile site or adapt a web site to render on phones? if you decided to do everything I suggested in the designing process I assume you’re going for a mobile site (good boy) but if for any reason you want only to adapt, the easiest way is with CSS. Add a separate stylesheet for mobiles

<link href="screen.css" rel="stylesheet" type="text/css" 
media="screen" />
<link href="mobile.css" rel="stylesheet" type="text/css" 
media="handheld" />

@media handheld {#image1 {display: none}}

in this exemple we decided to don’t display an image with that id on mobiles and could be really useful if you’re adapting your web site. With the same technique you can address some particular devices by their screen resolution:

@media only screen and (max-device-width: 480px) {}

In case you want to be more specific in your adaptations and you need to know the models of phones that are visiting your site you can identify them by the infos they share in their http header, the “user agent”. Online there are several databases that contains all the infos about every user agent. For instance you can use the WURFL database which in an opensource project and shares an API that you can use in your server side code to adapt your site content and presentation to the specific device. Another database is DeviceAtlas which also shares its API and has various tutorials like this one to implement it in your PHP code.

iphone

Yes, I know there’s a lot of hype around it and i didn’t forget it. Here are some tips specific for this device.
The best advice is to keep the user experience close to that of the iPhone throughout your site. This doesn’t mean to avoid originality. What I mean is rather to use lists for your menus and keep buttons big enough to be tapped, this is a touch phone.As it runs Safari 4 you can code in xhtml and use CSS. Actually the fun part is to use all those CSS3 rules that aren’t supported elsewhere and the most common it’s obviously the rounded corners:

 div {  
     color: #bcbcbc;  
     padding: .5em;  
     -webkit-border-radius: 6px;  
     -moz-border-radius: 6px;  
     -khtml-border-radius: 6px;  
     border-radius: 6px;  
     } 

Start by adding in your the viewport in order that the page will fit nicely:

 
<meta name="viewport" content="width=device-width;
 initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 

Second step is to hide the address bar as we already have so little space for our content. We simply need a bit of javascript:

 
window.scrollTo(0, 1); 

Create a Springboard icon that represent your site if someone decide to bookmark it in their home screen. It has to be 57×57 pixels and you should add<link rel="apple-touch-icon" href="icon.png">
Something I think could be very useful is a small function that once detected an iPhone visiting your web site pop-ups a small window asking if they want to switch to the mobile site. A tutorial can be found here.
As an alternative, if you think a pop-up is too intrusive, you can simply show a message to inform a visitor that the mobile site is available. It simply detects the user agents as I explained before, but read more in this quick tutorial.After these first steps it’s up to your creativity. Remember to use big target areas in your links and buttons because users should be able to press it with their fingers. Use lists for menus and links, use columns for text and breaks it in chuncks. Actually keep in mind everything I said in the first part of the tutorial and apply it also to the iphone even if here you can push things a lot forward. Read the official safari web guide to learn about best practices and system limits of the iPhone. It’s short and it helps a lot.

If you need some help with the interface you can use some frameworks and tools. Check this resources:
Dashcode
iUI
Yahoo stencils for the interface

testing

To test what your sites the ideal option is always real devices but in case you don’t have them or that you’re working locale there are some other tools. For the iPhone is better to work on the SDK from Apple if you have a Mac. If you’re on windows test your results with MobiOne, a very nice emulator I use as well.
For other devices you should check if there are specific emulators, otherwise the MobiReadyvalidator by dotMobi is a very helpful resource to check how your site would render and rank in speed, weight, etc, on many handsets.

wordpress

In case you are running a blog on wordpress and you simply want it to render decently on mobiles I found a couple of interesting plugins:
iWphone it’s thought for the iPhone and basically adds a theme thatworks well on that device;the dotMobi Wordpress Mobile Pack is more complex and complete, it actually fully mobilize the blog making it xhtml-mp compliant, adding specific themes, it integrates with the DeviceAtlas database, and so on.

resources

There is the usual list in the enu below the article, but it was important to give some relevance to this particular resources that helped me a lot and could do the same for you:
the web developers guide from MobiForge, which contains everything you need to know.
another guide on developing mobile sites, more sinthetic then the previous one and with happy graphics.
MobiForge, the entire site it’s th best place to start your education on mobile sites.
At iphonmicrosites.com you’ll find some very useful tuts, eventhough they obviously focus only on the iPhone.
Speaking of iPhone, check on Nettuts the tips by Paolo Ranoso or the indepth article on Webdesignerdepot.

Sox, Director of User Experience at vimeo has kindly accepted to answer a few questions to better understand his work.
He tells us how to plan a new project, how to have a good start in this business, and what happens behind the curtains at Vimeo. Plus, he has some good advice about wireframes that you can’t miss if you read Wireframes and Concept.

DB: First of all, welcome Sox and thanks for your time. Let’s get straight to the questions.
what’s your background? are you self-thought or did you attend specific studies?

Sox: I am completely self-taught. I did not study related fields in school. I bought few books but everything i’ve learned came from simply watching and doing. I am big fan of reverse-engineering. Seek out what it is you want to do, understand how it’s done, now try doing it yourself. there will always be people who are better than you at what you want to do. watch and learn from them.

DB: when did you start working?

Sox: I’ve started fairly early. In 1995 i got my first job out of school as a web designer for a small garage interactive agency in connecticut. Over the years i’ve worked at streaming Media Corporation, Priceline, Fotolog, and Vimeo. I have also worked as a consultant at few different places in between.

DB: could you explain to us what your job is and what it consist of?

Sox: I am the director of user experience at Vimeo. My daily responsibilities consist of overseeing and engineering the overall presentation and experience at vimeo.com. I perform product development ideation, user experience and design auditing as well as some design and coding work as needed. The main objective of my position is to keep vimeo as simple to understand as possible, as easy to use as possible, and as fun to experience as possible.

DB: How do you usually start a project? And do you have a method you usually follow throughout?

Sox: it all depends on the nature of the project. If it’s an enhancement task then the work starts from gathering as much user feedback as possible and making the necessary improvements that align with our overall objectives. For a brand new project, the entire cycle from ideation to delivery requires much more time and effort. Typically it starts from identifying an area of our service where we could add as much value as possible to our offerings without compromising our overall objectives (simple, easy and fun). We bring in all the stakeholders to discuss the project and come to a decision whether to move forward or not. Once the project gets a green light, then the hard work begins. Our working process at vimeo isn’t all that different from other product development cycles. We prototype, design, develop and then wash it through several iterations until it’s ready for polish and testing before it rolls out to the users. Perhaps the real unique part of vimeo process is just how agile and iterative the product development cycle can be.

DB: For someone who is just starting what are the most important advice you would give him?

Sox: learn by doing. Question why before how. Find your own reasons.

DB: What can you tell us about wireframes? do you use’em a lot? can you share some advice or technique with us?

Sox: I sketch a lot. For me it’s helpful because i cannot not think visually. They also help me examine the requirements and identify the limitations of work that needs to be peformed. Always keep the margins free. If you are not bumping against questions that need answers or problems that need solutions during the prototyping phase then you’re either extremely lucky or you’re not doing it right. Keep those questions and answers in the margins as you work. They’re far more important than anything you’ve already drawn.

DB: What does inspires you in your work? and there’s someone on the online world who had a big influence on you?

Sox: solving problems is immediately gratifying and addictive. I see most web sites as a sculpture. You have a vision of what it should ultimately look like. everyday you are adding or taking away a little bit of clay, shaping it a step closer to the ideal image you have in your mind. Then one day you look at your sculpture from a different angle and realize new questions, new problems and new possibilities.

There are many people whose work had inspired me over the years. Off the top of my head i would mention Jesse Garrett, Dan Cederholm, Douglas Bowman, Jeffrey Zeldman, and the folks over at Stamen Design.

DB: What is it like to work at Vimeo, what’s happening behind the courtains?

Sox: it’s fast paced and fluid. We have a very flat structure to our organization and everyone is working on their daily tasks or thinking about what they will be working on next. No one gets micromanaged and we trust and depend on each other to get stuff done. Everyone is tapped into an internal IRC system where we keep an eye on the health of various sub systems of our site and exchange ideas.

DB:There’s a difference in your job between working on a small site and a big one?

Sox: i’ve been on the both sides of the fence and i must admit i much prefer working in a small to medium sized group. In a larger organization, i’ve typically experienced more hierarchy and more stakeholders with varying or conflicting interests that stymied good projects from moving forward with energy, focus and speed they deserve.

DB: What you feel was the most challenging thing about Vimeo from your point of view?

Sox: in the beginning it was all about correctly assessing the vibes of the service and its community. I need to understand it and feel it resonate in my bones before i can start contributing. Taking this first step the right way is always important to me and it requires time. More recently, i’ve been spending more time focusing on the scalability of my ideas and how it would impact the general performance of the site (the most important part of any user experience work).

DB: What are the tools you couldn’t live without?

Sox: honestly I don’t think it matters all that much. I would probably say a good pen and some blank papers. The applications i use heavily on daily basis are Textmate and Firebug. We also rely on several internal admin tools to check, monitor and debug our work.

Your 5 favorite sites online?

Sox: you mean other than cycling related sites? Let’s see… google, gmail, google reader, tumblr and flickr.

If you want to take a look at some of Sox’s design and wireframes he has a stunning portfolio on Flickr. It’s also a good chance to check how Vimeo was created.