Mobify Weekly (10/21) - Mozilla Proposes Open Web App System


Hello and welcome to the new issue of Mobify Weekly! Below are some cool links that we've run across during the week.

Half of Web-enabled phone owners have shopped from their handset: study Consumers are getting much more friendly with shopping on their mobile devices. Are e-Commerce sites prepared for what the upcoming Holiday Season has in store?

A look at Blackberry's numbers (apps, devices, Web usage, etc.) With the new BlackBerry devices around the corner it's interesting to see some stats on how the previous line up has performed. Fun metrics like "29% of BlackBerry users are considering switching to Apple smartphones" inside!

Mozilla Proposes Open Web App System Mozilla is considering rolling out its own answer to Google's Chrome Web Store. This news, coupled with its last week's announcement, is making us wonder what they are up to.

What jQuery Mobile Means for Developers We are super excited about this announcement and are happy to welcome jQuery to the mobile space. While still very early stage, jQuery Mobile has a tremendous amount of potential.

Opera CEO Lars Boilesen predicts the future of the web A couple of optimistic points about the future of mobile all pointing to the idea that the move to the mobile web will make other factors such as OS or proprietary technologies irrelevant in the near future.

Mobile Web browsing to outstrip desktop A good overview of the current state of mobile web, including comments from Windows Phone team. "Over e-mail, Wong explained that the WP7 Web browser is designed so that it can be independently upgraded from the rest of the Windows Phone 7 firmware. He added that this "opens up the possibility of rapid frequent updates of the Web browser in Windows Phone 7".

Mobile Web Performance Matters More Than Ever, According to New Research at 4G World 2010 Recently announced report ranks the top 48 mobile websites and gives an in-depth analysis of each. The results of the "Best of the Anywhere Web 2010" study will be unveiled at a live conference this week.

Have a fantastic rest of the week and see you all next Thursday!

Optimizing blogs for mobile with CSS3 and Mobify Studio


  • Tutorial Details
  • Topics: CSS3 'nth-child' Pseudo Selectors and Mobify Studio's CSS Filter
  • Application: Truncating blogposts for mobile use
  • Difficulty: Moderate
  • Estimated Completion: 15 mins

Hi, my name is Nico and I'm a web designer at Mobify. After spending the past four months designing dozens of mobile sites with Mobify Studio, I have come across many useful CSS techniques for optimizing mobile sites. In this blogpost, I'll be covering how to truncate blogposts on your mobile site using 'nth-child' CSS3 pseudo selectors.

Blogs are very popular on mobile because they have frequently updated, snack-sized articles which are often shared on Twitter and Facebook. When mobifying a content-heavy blog, we need to decide what content from the desktop site is relevant for mobile.

The majority of blogs display full-length blogposts on the homepage, which is fine for desktop but people browsing from their smartphones are looking for a snack, not a full-course meal! Showing full entries of all the blogposts on the homepage of your mobile blog can sometimes be too much for mobile users.

before-after

TRUNCATING BLOGPOSTS WITH NTH-CHILD CSS3 PSEUDO-SELECTORS

Instead of showing the full entries on the homepage, hiding the content and displaying only the title and metadata of blogposts makes it easier for mobile users to scan the content. The simple way to do this is by selecting and hiding the portions of content you do not want to display. For example, if blogpost in a blog was marked up like this (let's pretend there is content in between the tags):

  1. <div class=”blogpost”>
  2. <h3 class=”title”></h3>
  3. <p class=”metadata”></p>
  4. <p class=”content”></p>
  5. <p class=”content”></p>
  6. <p class=”content”></p>
  7. </div>

The CSS to truncate the blogposts would consist of the following:

  1. .blogpost .content { display:none }

By applying the CSS above, we end up with all the blogposts truncated:

truncated-blog

But what if you only wanted the older blogposts truncated, and the 4 newest entries to be shown in full? Fortunately, there is a way to specify exactly which blogposts are truncated on a given page.

  1. .blogpost:nth-child(n+5) .content { display:none }

What the code above does, is select and hide the content of all the blogposts except for the first four. The CSS selector used is called an nth-child pseudo-selector. I highly recommend the following articles at Sitepoint and CSS-Tricks which both do a great job of explaining how nth-child selectors work. Below is a reference table borrowed from Sitepoint that may help put things into perspective:

nth-child-table

Using nth-child selectors can be confusing especially if you are a visual learner. When I first started using nth-child it didn't make much sense to me either until I started using this handy CSS3 structural pseudo-class selector tester by Lea Verou, which can be used to visually calculate and test pseudo-class expressions.

CAVEATS

Unfortunately, a large number of older mobile devices are equipped with browsers that do not support CSS3 pseudo-selectors. This means some older Blackberry and Nokia devices will not be able to display truncated blogposts and paginators as shown above.

Another important thing to keep in mind is that when elements are hidden with display:none, the assets from the hidden content will still be downloaded by the browser. This is a major problem because when optimizing a site for mobile, we definitely do not want any unnecessary assets to be downloaded.

MOBIFY "CSS FILTERS" TO THE RESCUE!

One of my favourite features of Mobify Studio is the amazing CSS Filter, which is essentially a server-side display: none. Since the display:none is applied on the server-side before the mobile site is served, it has two major advantages:

​1) Allows any elements to be hidden with CSS3 selectors such as nth-child, even if the device it is being served does not support CSS3.

​2) Prevents the mobile browser from downloading assets which should be hidden, saving the mobile user time and bandwidth.

For a detailed explanation of how to hide content with Mobify's CSS Filters, please have a look at this thread in the Mobify Community Forums. From there you will also be able to have your technical questions answered by our staff.

CONCLUSION

Careful consideration of the mobile user's needs means taking extra steps to make your mobified site more scannable by removing unnecessary content and options. The same technique we used to truncate the blogposts can also be applied to truncate other elements of a mobile site, such as paginators or menu lists. Combining the power of nth-child pseudo selectors with Mobify's CSS Filter allows for greater control of the mobile experience.

Taking WordPress Mobile - Watch the Mobify Webinar


For those of you who missed our webinar last week, here is the recorded version where we show how easy it is to take a WordPress site mobile using Mobify.

Stay tuned for more details on our next webinar and don’t forget to follow us on Twitter (@mobify) for the latest updates!

Closing the Gap: Media Queries & Mobile Web Apps


A recent article by James Pearce started a great conversation in the mobile web technology circles. Are media queries, a CSS technique for optimizing desktop content for multi-platform display, sufficient for day-to-day mobile web design? Or should mobile web apps, with brand new interfaces powered by Sencha or JQueryMobile, be adopted more broadly? Media queries are faster to use, but the mobile context isn't addressed well. Mobile web apps take longer and don't integrate nicely with the desktop website structure, but can produce a truly "mobile" interface.

At Mobify, we've been thinking about these tough questions for a while. One of our fundamental beliefs is thatweb links are sacred - content, functionality & advertising should be usable on one URL for all platforms. If a mobile web app is built from scratch, it should know exactly what the user wants depending on the link they clicked, not load its homescreen every visit. Doing this right takes time - time which web designers around the world often don't have.

Our goal with Mobify Studio is to make the mobile web beautiful for everyone. Everyone should get a chance to quickly mobify their content much like media queries do, then grow the mobile experience with functionality such as new HTML blocks, JavaScript widgets or mobile ad tags. It's very likely that 99% of the new websites made in the last 24 hours had no mobile optimization whatsoever. If a year from now this number comes down to 95%, we'll all be better off.

So go ahead, try the Studio (the Basic tier is free) and tell us what you think!

Mobify Weekly (10/14) - Yahoo beefs up mobile search


Yahoo beefs up mobile search Mostly aimed towards the iPhone and Android, the new update to Yahoo's mobile search implements the latest HTML5 technologies. There is no question that the company is taking mobile search very seriously.

Internet Ad Revenues Break Records, Climb to More Than $12 Billion for First Half of '10 New PricewaterhouseCoopers report shows staggering growth in online ad spending in the beginning of 2010.

Adobe: Users favor mobile web over downloadable apps Impressive numbers from Adobe/Omniture study on the behaviour of their users.

Mobile commerce: ten reasons to choose the web over apps Beginning to think mobile first is a growing trend in e-commerce. One that we warmly welcome.

Global Retailers Struggle to Keep Up With M-Commerce Demands - Global News - Advertising Age Mobile commerce is growing at an exponential rate blurring the line between desktop and handheld.

comScore Release First Comparative Report on Mobile Usage in Japan, United States and Europe Interesting stats show many things among them Japan dominating in total mobile connectivity and US leading in social networking activity.

Mozilla launches Firefox 4 beta for Android This news is interesting considering that Mozilla has just signed with Microsoft to include Bing in their search box. Only time will tell how this will develop.

QuickBooks 2011 gets mobile, Web access New QuickBooks offers mobile web experience to its customers specifically tailored to the iPhone and Blackberry. We applaud the move.

Android to Add Next 500M Mobile Web Users in India? We've previously covered how Nokia is set to capture a large market share in the East and now there's someone new on the block going after the same target with attractively priced phones.

Windows Phone 7 Gets Nov. 8 Release The new Microsoft phone is poised to bring a couple of innovations to the already saturated market, one of which is the "social approach" to organizing your information. Will this be enough to set it apart from the rest of the pack?