Targeting the Mobile Web

Given the rise of mobile computing on phones and pads, web developers can no longer think of the sites they develop as living in the world of the desktop browser. Thankfully, things are much easier than they used to be. Developers no longer need to focus on arcane reformulations of specs wrapped in TLAs like WML, but are now free to utilize current technologies with a lot less agony — if they do it right. To that end, the following presenters outline some best practices for web developers as they bring their talent to the mobile web.

Andreas Bovens

Andreas Bovens led a mobile web development workshop in July at the Mobile 2.0 Conference in Barcelona. Since I couldn't attend, and something tells me neither could you, he has provided his presentation as an 18 minute screencast. In it, he outlines three approaches to mobile web development:

1. Do nothing: For the most part, this works fine in modern mobile browsers. Liquid layouts tend to work best.


2. Create a separate mobile site: Rely on user agent detection to shunt users to one or the other site while still offering a link to override.


3. Create one site that works for all: Let one site adjust its layout for different devices.

The use of the viewport meta tag is covered along with media queries. Watch the video to see all the details.

Bruce Lawson

Bruce Lawson presented on the broader topic of web development in the new world of HTML5, CSS3, mobile, and all the things that come along with those new standards and technologies. He has posted his Over the Air 2010 talk along with a great list of reference links.

Sadly, the Slideshare doesn't work on that page, but you can view it below. Jump to slide 42 for the information on the mobile web.

Bryan Rieger

In this presentation we see a simple argument espoused by Luke Wroblewski, among many others, which is to design for mobile first (Luke Wroblewski on Mobile First). Start with the mobile platform, and then add in support for desktop browsers, building the site up instead of tearing things off. A simple concept that not everyone seems to understand.

You can see some of the same points in this set of slides, with a focus on the trends instead technical implementation discussions. This one is handy for explaining the rise of mobile to non-developers.

Tim Berners-Lee

Widely credited with inventing the world wide web, having Tim Berners-Lee weigh in on developments in mobile computing certainly adds an interesting perspective on these trends. At Nokia World 2010, Tim Berners-Lee detailed four concerns about the future of the mobile web:

1. Privacy: Specifically discussing location-aware devices, he thinks we might all have to adjust how we think about privacy as a core concept.


2. Accountability: As companies learn about us more and more, including our location, we need to have methods in place to ensure they aren't abusing our data.


3. Neutrality: Net neutrality is a topic he discusses a lot, and this is a great opportunity for him to argue that net neutrality should exist for all web platforms.


4. Access: With so much of the world unable to afford computers or mobile data plans, sites need to be diligent about smaller pages and low cost data plans need to be developed.

How his concerns will bear out, along with the technical implementation techniques outlined above, will be quite interesting to watch in the near and far future. If you are a web developer, you should be asking if you'll be helping or hindering.

Read More

Buffalo Launches Social Media Club Chapter

Last night marked the official kick-off of the local chapter of the Social Media Club. If you haven't ever heard of Social Media Club, you should take a few minutes to visit its site and familiarize yourself. Failing that, here is Social Media Club's mission:

Social Media Club's mission is to connect media makers from around the world to advance media literacy, promote industry standards, encourage ethical behaviour and share the lessons they have learned.

In short, the social media club is the professional organization for a new industry. Just like there is an American Advertising Federation for agency professionals, and Legal Marketing Association for legal marketing professionals, Social Media Club is taking a similar role for professionals in the world of social media. With a speaker directory, education programs, regular events, and all the other benefits you might expect from a professional organization, it is becoming a resource for those in the industry and those looking for help.

Buffalo has a healthy supply of social media professionals and advocates, along with people who are being dragged or pushed into that responsibility (just like any industry). Given the success of the first social media meetup on June 30, and then its successor on July 27, it was pretty clear that Buffalo had an interest and a need for a professional support community.

And so began the planning and ultimately formation of the Buffalo Social Media Club chapter. And to bring that back 'round to the beginning, last night was the kick-off event to welcome new members, prospective members, and the curious. Unlike previous social media events, this one saw a lot less tweeting on the fly as people took some time to get to know each other and talk about how they use social media professionally or casually.

The Buffalo News covered the event and wrote up a story: New club aims to help enthusiasts learn how to cash in on social networking. From the article:

Nicole Schuman, president and co-founder of Social Media Club Buffalo, said the club is open to all kinds of savvy users of online social media outlets, like Kin, whether they’re media professionals who use Facebook and LinkedIn to enhance their business connections or simply new social media enthusiasts.

"This event itself was only advertised through Facebook, Twitter, Foursquare [and] LinkedIn. We’re going to have over 100 attendees in the area just because people passed along the information to one another. It’s just a new word-of-mouth," Schuman said.

Skunkpost also showed up and interviewed some attendees. While I managed to dodge the camera (by hiding behind my own), you can see my tweets at 0:51, sandwiched between interviews with guys with hair:

Given how dark the venue was, it may be some time before I have my photos posted. Until then, enjoy this dark photo from my phone showing off some food and watch for the photos later.

Learn More...

• Social Media Club, Buffalo Chapter


• Social Media Club Buffalo on Facebook


• Social Media Club Buffalo on Twitter


• Hobbled version of this post at Social Media Club site.

Read More

Location-Based SM Examples in the Real World (at evolt.org)

Whenever I speak about social media I usually field a few questions related to the location-based social media services. These include Foursquare, SCVNGR, Gowalla, Brightkite, Loopt, and now Facebook Places. The questions revolve around who is using them and why. While it's possible to see and explain the potential in these services, sometimes tangible examples are needed, and usually more than just explaining how awesome drink specials can be once you're the "mayor" of a venue. I wrote up some examples for evolt.org, and the article is now live on the site. The examples I use:

• The Ferris Bueller's Day Off Movie Experience


• NFL


• National Post at Toronto International Film Festival (TIFF)


• Universities


• STD Testing

Of course, the day after I wrote this article, more stories came out about location-based services and real world applications, but I'll save those for a follow-up article. Now go read the article: Location-Based SM Examples in the Real World

Read More

IE9 Beta Getting High(er than Expected) Marks

It's kind of hard to avoid all the coverage of IE9 this week. There are some rather in-depth reviews and analyses out there that take it apart and try to outdo each other with intricate detail in coverage. I don't care so much about that. I'm interested in the general mood of the developers who will build for it, and the general user who just wants to surf. And that will take time to suss out.

If you are looking for a review of the browser as a whole, including its new interface (Google Chrome, anyone?) and features for users, then you should spend some time reading through ZDNet's article, Internet Explorer 9 beta review: Microsoft reinvents the browser. Take some time to scroll through the screen shot gallery, too (A closer look at the Internet Explorer 9 beta). You'll see an interface that is borrowing from Chrome for messages, Firefox for download management, and even Windows for its ability to turn web site bookmarks into desktop icons reminiscent of applications. In short, there's a lot that's familiar.

IE9 has the benefit of coming to the market well after other browsers have been wrangling with how to deal with CSS3 and the incomplete HTML5 spec. IE9 only scores 96/300 at HTML5test.com, though that's up from 37/300 for IE8. Chrome 5 scores 217/200, Firefox 3.6 scores 139/300, and Opera 10.6 scores 159/300. IE9 does score an impressive 92/100 (or 95/100 if you believe the screen shot on the IE9 Test Drive site) on the Acid3 test (IE8 got a 20/100). Read up on more of the results at SitePoint, The IE9 Beta Review.

During An Event Apart in DC this week, there were multiple unsolicted (and seemingly surprised) tweets from the crowd that the audience was applauding IE9's CSS support. That's a huge leap forward from how IE has been treated in the past, and is certainly a better reception than most had expected.

That's not to say that Microsoft is off the hook yet. People will be paying close attention to every aspect of the browser and its progress as it nears a final release. In Microsoft, Please Stop This Madness, Kroc Camen takes IE9 to task for the HTML it generates for a jump list. While it's not a big issue, it's the kind of thing people will be trying to find. Given that this is only a beta, at least there's a chance these things can be cleaned up before final release.

Related

• How do we test a Web browser? (one year after) at W3C

Read More

Google Instant and SEO/SEM (at evolt.org)

Written this past weekend and live today, my latest article at evolt.org is available: Google Instant and SEO/SEM

There's quite the potential for change that this seemingly simple user interface change could have, both on user behavior and money spent on SEM/SEO. The next few weeks may prove to be very interesting.

If you are new to Google Instant (what's that, you're in one of those corporate environments that standardized on IE6 ten years ago and you cannot upgrade?), you can get an overview at the official announcement on the Google Blog, or you can watch the (self-congratulatory) video Google provided.

Read More

Twitter's Big Change

Twitter has started rolling out its new web interface to users. You may wonder why this is such a big deal, but according to Twitter, 78% of Twitter users access the service through the web site, making it the perfect place to go about reinventing itself. While there are a lot of overall differences between the old site and this new one, there are four key features which Twitter outlines when discussing the changes:

1. Updated design that provides space for all its other features and eliminates the "more" button to see additional tweets.


2. Media is now embedded right in the page when someone links to a YouTube video, Flickr photo, or videos/photos from more than a dozen other sources.


3. Related content based on the tweet you've selected, such as a map or list of tweets from that user.


4. Mini profiles are now shown when clicking a username, bypassing the need to go to another page and lose your place.

This video from Twitter shows the changes in action, sans explanation. You may want to jump to 1:06 in order to bypass all the intro music and hipster aesthetic.

Most of these features are already available through third-party Twitter clients (TweetDeck, Seesmic, Echophone, etc.). Users of these tools may be unlikely to start using the web interface partly because some of these tools offer additional features, such as scheduled tweets, multiple account management, shared tweet-tracking across desktop and mobile platforms, and other features that just aren't available on Twitter.com.

The 22% of users who don't use Twitter.com (taking Twitter's numbers) probably reflect the power users, the ones who use Twitter for more than casual tweeting. I would certainly be more interested in seeing the breakdown of tweet per client (to see if that 78% holds true for web site activity), not a breakdown of users who logged in at least once a month (the current measurement). I suspect those numbers would go far to ease the concerns of Twitter clients that perhaps their market is collapsing.

Nowhere in this discussion from Twitter do I see anything addressing how this will affect the mobile interface. Up until I got my Android phone, I was using the mobile Twitter interface in Opera Mobile on my Windows Mobile phone (that's a lot of instances of the word "mobile"). I still use the mobile site because the Twitter app for Android isn't terribly compelling. If Twitter can update its mobile app to account for some of these new features, then it might be on par with the mobile third party clients. I somehow doubt Twitter will be trying too hard to update the mobile interface for the web site.

Looking at the new Twitter interface, I can see similarities to Facebook at a very basic level, and I can also see where they can start to slot advertising. Now I wonder what the next steps will be and how far in those two directions they'll go.

Related

• Here Comes the New Twitter.com at Mashable.



• More on the New Twitter.com at USA Today.



• New Twitter unveiled: Read the reviews and send us your own at The Washington Post.




• TechBytes: Twitter's New Look at ABC News.



• Twitter Fixes Its 'Bad' Homepage: The Critics Weigh In at PCWorld.



• New Twitter Features: 11 Things You NEED To Know (SCREENSHOTS) at The Huffington Post.



• Twitter as broadcast: What #newtwitter might mean for networked journalism at The Nieman Journalism Lab.



• The New Twitter & Search, An Illustrated Guide at Search Engine Land.



• The Best Subtle Things About New Twitter at TechCrunch.



• Twitter Aims to Duplicate YouTube's Success at Read Write Web.



• Brightkite Changes Direction (I wrote it last night, and it's an interesting view of something that could have been a Twitter killer)

Read More

Brightkite Changes Direction

Brighkite has rolled out a new home page today, and for those of us familiar with its old home page, gone are the sample check-ins and photos from your area. Instead, the home page is pushing its group text feature.

In a blog post announcing the change, Brightkite acknowledges that the check-in has become a standard and expected feature of some services, and nearly all services are offering some sort of location tie-in.

Brightkite says it will focus on the following:

Improving mobile messaging

Text messaging hadn't altered for 20 years, but we've changed that. A principle focus is to push the boundaries of text messaging with groups, location, images and more.

Sharing location

Location is the foundation of Brightkite and remains a core focus. You will see location in everything we do — from product to local discounts and promotions. We allow you to share your location broadly to your social networks and with Group Text privately to a hand-picked group of friends.

Places

We will continue to ensure that we snap you to the right place — making sure that we have the broadest, most accurate selection of places and can propose the right place(s) based on your location and location history.

Brightkite also says it will now partner to provide these services:

Social graphs

We don't have ambitions to become the latest social graph. We believe that you carry around a great social graph in your pocket (your phone's contact list) and recognize that you've spent a lot of effort building out at least one other social network (for many of us this is Facebook). So, we wont require your friends to join Brightkite to use the service and we’ll leverage the networks of friends you’ve already built elsewhere.

Check-in

We pioneered the check-in several years ago, but as we've said believe it is now a commodity. Expect to see less and less emphasis on checking in on Brightkite, and associated streams of user content. Where appropriate, we'll support checking in to third party services like Facebook and Foursquare. This is an extension of the philosophy we started with check.in in the Spring. Keep a look out for some great new Brightkite features using the Facebook API for check-ins.

My primary use of Brightkite over the last two years has been to track my location through photos. The fact that Brightkite always did what Twitter does but also natively supported photos and location made it a natural choice as I bounced around the globe, tracking my journeys on maps in real-time for friends and family (ok, mostly just family). The fact that I could do it all from my sad little mobile phone via a mobile browser and email made it all the more appealing. Seeing comments on each photo from various people as I went, before I even had Facebook, made it somewhat interactive as well.

I've watched Brightkite try some new things, including the Brightkite Wall, Group Text, Photo Tips, Badges of their own, sponsored Badges, Check.in, and even augmented reality integration. I've also watched them struggle with spam, a highly problematic upgrade, and a drop in its user base (probably to other services).

Brightkite gives no indication that the core location-based photo service on which I rely is going away, but if or when that does, I will be sad to see it go. Thankfully I've done a good job of pulling the KML feeds of my trips to local files, along with the images. At least I wouldn't be losing anything I've done, just my ability to continue. And my friends would no longer be inundated with my food photos.

Related Articles:

• Why We Check In: The Reasons People Use Location-Based Social Networks (my Brightkite use is referenced in the article)


• Travelogues, Places and Meetups


• Brightkite Tries Another Angle


• The Future of Check-ins at evolt.org


• Mapping Location-Based Social Media at evolt.org


• Real World Hyperlinks at evolt.org


• Don't Let Social Media Get You Robbed (or Stalked)


• Enjoying Thanksgiving with Social Media


• We are thankful for... at the Brightkite blog

Example Maps Fed from Brighkite

Pardon the constricted boxes, these maps look much better with a much wider layout than this blog template allows. Just drag around in the boxes to see more.

Read More

IE9 Beta Coming, But Microsoft Just Wants You to Dump IE6

We're a week away from Microsoft's beta release of Internet Explorer 9 (public beta, not just a preview release aimed at developers). This release promises extensive support for another "beta" standard, the incomplete HTML5 specification. IE9 is also supposed to come with broader CSS3 support, SVG support, and even embedded audio and video support. All of these are to be expected, however, given how long it has been since the browser was updated and how long we typically wait for new versions. You may want to visit the Internet Explorer 9 Test Drive page to see see how it fares in the Acid3 and CSS3 tests.

Within the last two weeks Microsoft has been posting and updating content in its guide explaining how to take sites that support primarily IE6 and convert them to support IE8: Addressing Application Compatibility When Migrating to Internet Explorer 8 at MSDN (build date: 9/2/2010) and at Technet (updated August 25, 2010). This is driven by the push to get business users and IT shops to upgrade to Windows 7, something many organizations resist because of the forced upgrade to IE8 from IE6. Given how many organizations built IE6-only proprietary support into their intranets and internal applications, their reluctance to rebuild those applications makes sense. Microsoft's browser-specific features from 10 years ago are holding up adoption of its latest operating system.

Let's quickly recap the timeline of Internet Explorer's release dates, and perhaps you can marvel at IE6's staying power, or probably just recognize that this geriatric browser exists in the wild solely because of Microsoft's push to get people to code specifically for it a decade ago (I lump IE4 and up into that push).

Internet Explorer version	Release Date
IE4	September 1997
IE5	March 1999
IE5.5	July 2000
IE6	August 27, 2001
IE7	October 18, 2006
IE8	March 19, 2009
IE9 beta	September 15, 2010

I am wondering how long before we get an IE8 to IE9 conversion support guide from Microsoft, and how long before the key message in that document is to just use web standards.

Read More

Google Doodle: Bouncy Balls Aren't HTML5

When Google changes its logo in honor of a holiday, someone's birthday, or just for the heck of it, it sometimes gets some chatter. When Google created the Pac-Man logo, articles appeared of people trying to figure out how it worked, or commenting on tech support calls within organizations from users who blamed their own IT team, or even notes about lost productivity.

Today's Google Doodle has gotten a lot of traction in the web standards community and even sites that sometimes talk about web standards, like Mashable (Google Logo Turns into Animated Particles) and New Scientist (What's Google's mysterious doodle?). Those aren't the interesting bits of coverage, however.

Not HTML5?

Christian Heilmann took the time to reverse engineer the code and discovered that the balls were nothing more than divs with a border radius using script to move around the page (Google goes bubbly – interactive logo today on the UK homepage (plus source)). As he notes, the effect isn't exactly HTML5. The script moves and resizes the divs, but that isn't unique to HTML5 and could be done in HTML4 and support IE6. While CSS3 is used to create the balls, that could have been done with other techniques, and CSS3 is still not HTML5. Interestingly, Google blocked Opera in its browser sniffer, which Bruce Lawson explained could be bypassed by telling Opera to report itself as Firefox.

HTML5 canvas

Rob Hawkes wasn't impressed, primarly because Google did not use HTML5. He set about rebuilding the Google Doodle in the HTML5 canvas element, and did so in just a couple hours (Recreating Google’s bouncing balls logo in HTML5 canvas). If you have a canvas-capable browser, check Rob Hawkes' version.

SVG

Robin Berjon borrowed (stole?) Rob Hawkes' code to use a base for re-creating the effect using SVG (Google's Bouncy Balls, in SVG). See the SVG version in all its (somewhat chunky) glory.

Who Called it HTML5?

When New Scientist tweeted its article about the Google Doodle, the tweet read: "Could the Google doodle herald HTML5?" They could be forgiven simply for not being a web-focused magazine. Pocket-lint reported it was written in HTML5, but they are also not dedicated to web development. It seems the rumor started in multiple places via multiple tweets via multiple users, and probably owing to the HTML5 doctype on the page, which implies HTML5 but doesn't actually make it HTML5.

If you didn't get to see today's Google Doodle, or you prefer to surf in Netscape Navigator 3.04, then check out this screencast lovingly stolen from Christian Heilmann:

If you haven't tried it yet, try moving the browser window around and watching the balls react.

Update (Sept 9):
AreGooglesBouncingBallsHTML5.com — Need I say more?

Read More

Google, Arcade Fire Confused on HTML5

In case you haven't seen the Arcade Fire video, The Wilderness Downtown, you should take a look at it. Google and Arcade Fire got together to show off what Google Chrome could do with all the new gee whiz technology out there, and if you listen to all the major tech media outlets, it's an awesome demonstration of the capabilities of HTML5.

Except it's not HTML5, at least not the main pages that drive the site.

Google announced the video effort on its blog on Monday with the post Arcade Fire meets HTML5. To quote Google:

The project was built with the latest web technologies and includes HTML5, Google Maps, an integrated drawing tool, as well as multiple browser windows that move around the screen. [...] "The Wilderness Downtown" was inspired by recent developments in modern browsers and was built with Google Chrome in mind. As such, it’s best experienced in Chrome or an up-to-date HTML5-compliant browser.

I loaded the site up in Google Chrome first, figuring I'd try it out in the best circumstances. As it played, I took some time to peek under the hood at the source code. The main page of the site, the one that starts the ball rolling, has this as its DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

That is not HTML5. But this page was just the launcher, not the page that's the workhorse (the URL seen in each pop-up). That page is container.html. Here's what I found when viewing its source code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Now that is definitely not HTML5. I also checked the drawingtool.html page and found the same DTD. Yet the meta content for main page of the site even claims that it is HTML5:

<meta name="keywords" content="Arcade Fire, Chris Milk, Chrome, Chrome Experiment, HTML5, Javascript" />

<meta property="og:description" content="Check out Arcade Fire's new interactive HTML5 music experience, “The Wilderness Downtown”."/>

I went into this experimental site expecting to see very basic HTML5 with a great deal of CSS3 and script. Typically when someone talks about how awesome their HTML5 site is, it's not the HTML5 (unfinished spec), it's the CSS3 and scripting that they are really bragging about (I'm looking at you, Apple).

It is this kind of confusion between HTML5 and the completely distinct (though related) CSS3 specification and scripting that continues to confuse people who aren't in the code regularly. These are why developers are told to "build something in HTML5," and have to translate in their heads that the request isn't driving from a desire to use a certain specification, but instead that the request is motivated by the "gee whiz" factor that comes from the styles and interactivity.

If you think this confusion isn't an issue, that anybody with a little tech savvy could figure it out, the headlines on these posts certainly would indicate otherwise (I cherry-picked for tech-savvy outlets):

• Arcade Fire's Experimental New Video Shows What's Possible with HTML5 at Mashable.



• Google Chrome Shows Off What HTML5 Can Do With Arcade Fire Video at TechCrunch.



• Arcade Fire HTML5 video is awesome — but no Flash killer at MSNBC's Technoblog.



• Arcade Fire, Google Create First HTML5-Powered Music Video at PCMag



• Google and Arcade Fire Team for HTML5 ‘Experience’ at Wired.

To be fair, I am certain the dynamically-generated pages use the HTML5 video element at least. This post isn't about the project itself — I think it's very cool and I am glad to see Google is pushing the envelope (even if it does work very slowly in Safari, which Apple touts as HTML5-compliant). I take issue with the lack of distinction between HTML5, CSS, script, and even poorly-coded (because they are not HTML5, but two other specs instead) launch pages. And if any of these other organizations carrying the story had done the tiniest bit of fact checking, they might have noted that as well.

Related (at this blog)

• Does Your Browser Really Support HTML5 and CSS3? July 12, 2010.



• HTML5 and CSS3 Confusion, June 22, 2010.

Read More