Mobile Designers: Antonio Lupetti

August 28th, 2009 by Igor Faletski

Antonio Lupetti is a renowned web designer and blogger based in Rome, Italy. His blog at http://woork.blogspot.com/ covers a variety of web design topics and has several thousands of Twitter followers. Recently Antonio created a mobile view of his blog available at http://woork.mobify.me – here’s a short interview about his experience:

What was the reason you decided to go mobile?

In the past months the traffic of my blog increased steadily. More and more regular readers of Woork asked to me to develop a mobile version in order to browse my blog using their mobile devices. So I decided that it was the right moment to go mobile. The only problem has been to find a good platform to develop and host the mobile version of Woork (my blog is hosted on Blogger). When I discovered Mobify.me I found an excellent service to do it easily and the final result has been really impressive!

How long did it take to mobify your site?

Mobifying my blog required less than a hour. The Mobify dashboard is very simple to use and extremely powerful. The only thing you have to do is to pass the mouse over a section of the site you want to mobify and select it. Then you can add header and footer and customize CSS code using the “Design View” that allows you to see every change you make on your mobile template in real time and using several mobile devices.

What mobile device do you have and how do you browse the Web from it (bookmarks, search, Twitter links, feeds)?

I have an iPhone 3G and I use it mainly to maintain contact with my readers with Mail, share links with Twitterrific, check the daily traffic with Google Analytics and browse the web with Safari.

New Design Screen

August 24th, 2009 by Igor Faletski

We’re very excited to announce the most significant interface change since the launch of Mobify – the new Design Screen. It’s been completely rebuilt based on your feedback and our recent usability study (big thank you to everybody who participated).

For the majority of web designers using Mobify, most of the time is spent working with Mobile CSS. To make that task easier, the CSS editing area was doubled in size. Control and help buttons that used to be on the right side of the screen are no longer necessary as their functionality is merged into Block controls (shown in the lower screenshot). No more header & footer – instead any block can be made Sticky which will show it on every template. Template selection is now done via a drop down list next to the preview window. Your mobile views should be automatically adapted to the new controls, but check them out just to be sure!

Let us know what you think – the Design Screen will evolve further in the next few weeks.

Design Screen – collapsed

200908240957.jpg

Design Screen – expanded

200908240959.jpg

Mobile Designers: Michael Angeles of Konigi

August 21st, 2009 by Igor Faletski

Konigi is a fantastic resource for user interface designers. Recently Michael Angeles, founder of the service, took the time to mobify his website, creating http://m.konigi.com. We caught up with Michael to find out more about his vision of mobility, design and Mobify in particular.

Mobify: Michael, what was the reason you decided to go mobile?

Michael: I think certain sites are better suited to delivering a mobile interface, whether it’s via a mobile stylesheet or completely different mobile experience, e.g. a different skin. Sites like mine, with multi-column layouts work well on iPhone, but it can be tiresome having to zoom and pan. Konigi also degraded well when the layout falls back to stacked blocks without CSS, but lots of interface elements could have been optimized. Navigation, for intance, could be moved out of the way, and adding simple tweaks like padding, horizontal rules, and simpler type rules would work better.
I came across the Mobify version of A List Apart, and noticed that it was being delivered through Mobify. I had demoed several iPhone mobile delivery options that simply served IUI versions of pages. They worked ok, but none were as simple to set up as Mobify. After living with the m.konigi.com version, I’m happy with much simpler it is to view, and there’s always the option of jumping out to the full view if necessary. The added bonus of having a usable version for other devices is just gravy to top it all off.

Mobify: How long did it take to mobify your site?

Initial set up was maybe 10-15 minutes with 3 templates, but the sections of my site differ from each other, so I’m planning on creating a few more templates so that all of the pages work well with interior navigation. I also had to add the CNAME record with my webhost. But the Mobify experience was perfect even for my first time lazy implementation. Will be even better when I take more than 15 minutes to work on it. :)

Michael: What mobile device do you have and how do you browse the Web from it (bookmarks, search, Twitter links, feeds)?

Mobify: I have an iPhone 3G. I follow links in mobile Safari primarily from Twitter and search, but occassionally I’ll also browse my Fever feed reader or go to sites via email. I also use the bookmarks on my home screen to go to frequently used sites.

Big thanks to Michael for taking the time to answer our questions!

Mobile Workflows of Tomorrow

August 16th, 2009 by Igor Faletski

Quite often we meet publishers and web designers that have previous experience with mobile web publishing. Usually this means that a basic mobile version was created out of an RSS-feed, perhaps in addition to a simple landing page. Due to lack of traffic and exposure these skunkworks projects from circa 2006-2007 are quickly forgotten, with mobile traffic organically heading to the desktop version of the site.

Due to the way Mobify works (linking the mobile view to the main, desktop version of the site) our customers treat mobile as something that is tied to their web presence. After a major redesign (introducing new theme, data feeds, functionality) it is normal to spend a few minutes adjusting the mobile view in order to reflect the updates on the small screen version. In the beginning having to consider mobile in major design decisions might seem an inconvenience, but quickly it becomes apparent that to stay competitive, a web publisher must treat mobile as an ongoing workflow.

This is the Web mentality at it’s best. Release often, iterate quickly, stay on the edge. Compare it to today’s coverage of the Facebook 3.0 by TechCrunch titled Facebook 3.0 For iPhone Submitted. Now Let’s Count The Days Until It’s Available – is the future of mobile really tied to long release cycles and approvals by third parties? (disclaimer: we absolutely admire Joe Hewitt’s work!). At Mobify, we’re committed to let every web designer define and implement their own vision of mobile – as quickly and efficiently as the rest of their iterative processes.

Let us know what you think the right mobile workflow should be and how Mobify can help make it better.

Templates and Blueprints

August 2nd, 2009 by Igor Faletski

One of the most powerful features of Mobify is its template matching engine. We still get asked whether it’s necessary to mobify every single page on one’s site (the answer is definitely not). Let us take this opportunity to share some details about how template matching works.

Most web publishers have a lot of content pages (blog posts, articles, news) that accumulate years of information. However, most of these are based on several core templates (one for the front page, one for an article, one for category listings). It makes sense to apply the same mobile design decisions to all pages based on a template and Mobify does exactly that. How does it know what template to apply? By looking at the URL patterns and HTML structure.

Take A List Apart, for instance. The “Unwebbable” article by Joe Clark has this URL: http://m.alistapart.com/articles/unwebbable/ . It shares the same page structure as all other articles:

http://m.alistapart.com/articles/the-inclusion-principle/

http://m.alistapart.com/articles/introduction-to-rdfa-ii/

http://m.alistapart.com/articles/visual-decision-making/

…and many, many others. See how all the links are similar? Mobify detects this instantly, applying the web designer’s content and style choices to any A List Apart article.

In order to mobify all pages based on a certain template, past and future ones, it’s only necessary to choose mobile content for one page based on that template. This is key to the entire workflow of Mobify – figuring out what the templates are and quickly going through the Choose process for one page (we call these “Blueprints”. If you’ve no idea what templates your site has, check out the “Templates” tab in Manage for some suggestions). This also works for GET-based URLs – check out the recent http://smoothon.mobify.me as an example. It’s no coincidence that most of our showcase sites are powered by some kind of CMS – all of them generate clean URLs.

Is it necessary to have perfect URLs like these? Not really – Mobify’s engine is built with flexible regular expressions, controls to which will be exposed in an upcoming release. Even if your URLs are complex, you’ll be able to quickly adjust the template rules and mobify even the biggest sites in a matter of an hour or two.