John Boxall
Evolving Mobify Studio – Part 1
When we started Mobify in the winter of 2008, one thing was clear: websites sucked on mobile. The few that were optimized for mobile looked liked WAP sites that had been subtlety retagged as HTML.
With the iPhone raising the bar for mobile experiences, it wasn’t enough for websites to just “work” on a phone anymore. Navigation, content and forms were expected to be laid out logically to fill screen. Content had to be built from the ground up for delivery over low bandwidth connections to slow devices. Most importantly with the collision of the mobile and desktop webs there needed to be URL mapping between the two so that no matter how a viewer arrived on a page, they always got an experience tailored to their device.
We built Mobify Studio to enables designers to build the fantastic mobile experiences that viewers demanded. Three years later, the fundamentals behind building great mobile experience haven’t changed but the mobile devices themselves have.
Smart phone traffic dominates today’s mobile web. Over 80% of our network traffic could be classified as “Smart Phone”. These powerful devices connect to the web using fast, reliable 3G and Wifi connections. This shift in the device landscape has caused us to re-evaluate the design decisions we made in 2008 while building out current version of Mobify Studio.
Decision made in 2008: The mobile web is not ready for JavaScript.
Mobify Studio’s content optimizations alter the DOM. JavaScript is bound to specific DOM representations. Our modifications subtlety break existing JavaScript in unpredictable ways. In 2008, mobile browsers have incomplete or incorrect implementations of specifications crucial to JavaScript. With the goal of delivering sites with a minimal footprint, we can’t afford to serve JavaScript content to devices only to have break. We designed Mobify Studio to strip JavaScript from pages.
Decision made in 2008: Mobile websites should live at mdot.
To receive a page optimized by Mobify Studio, a browser must make a request to Mobify’s webservers. Sites made with the Studio live at a different domain than the desktop website. Using DNS CNAMEs we made it possible to deploy mobile views to an mdot like m.yoursite.com. This had the helpful side effect of sharing HTTP Cookies, allowing for simultaneous login between mobile and desktop sites. However it also created a need to redirect mobile traffic from the desktop website to the mobile view. To do that we developed three methods for handling redirection at either the webserver, application or client side level.
Smart phone dominance challenges these decisions. In the next post we’ll outline how we’re adjusting our core technology to build the next generation of great mobile experiences.
Mobify Studio homepage circa 2008!
Mobify Studio Update – CSS3 Icons and Brightcove Support!
Hot on the heels of our last release, we have a another batch of updates to keep you up late working on your next mobile masterpiece!
REDESIGNED DASHBOARD
The most visible change is the revamped Dashboard screen. Besides clearing things up and making it lightning fast, we’ve also added cool CSS3 effects to your site icons. The CSS used to create the effect uses border-radius, box-shadow, and radial gradients and multiple backgrounds:
For a stunning result:
FASTER MANAGE
Though you won’t see a difference to the Manage page, we’re sure you’ll feel it as we heavily refractored the backend code to make it much faster for sites with a large number of templates.
IMPROVED BRIGHTCOVE AND VIDEO TAG SUPPORT
We have enabled Brightcove support by default for all paid accounts. This means you’ll be able to see your Brightcove videos on mobile by selecting them in the Choose screen and following the Brightcove mobile setup instructions. Let us know if you need any help!
Also, our video tag support has been tweaked, so that video tags used as fallbacks inside object or embed tags (like the Vzaar embed tag), will be correctly shown to support devices.
