Responsive web design: What goes around…

“Responsive Web Design essentially indicates that a web site is crafted to adapt the layout to the environment that it is being viewed in.”1

At Generation X it has always been a first principle to consider the wide variety of user platforms when designing websites. Cross browser compatibility and varied browser resolutions have always been tested as an inherant part of the design process since I first began designing websites in 2003, so the concept of responsive web design is not new to me.

The term responsive web design, however, first came to my attention last month when I read an article by James Pearce entitled Not a mobile web, merely a 320px-wide one2, orginally written in October 2010 in response to Ethan Marcotte’s seminal article3 on A List Apart.

Proponents of responsive web design seem to fall into two camps – the purists and the adaptives. The distinction lies in whether exactly the same information is presented across all platforms – the purist arguemnt – or whether the design should respond to different platforms by delivering “different content and services altogether – or, at least, a differently prioritized version of the default desktop experience”.2 As is so often the case, both sides of the argument have much to recommend them.

Allied to the concept of responsive web design is that of Mobile First,4 whereby web applications and websites are designed for mobile devices first, rather than the mobile version being adapted from the desktop version. The case for Mobile First is argued in the book of the same title, by Luke Wroblewski.

I should point out that responsive web design principles have (not yet) been applied to this WordPress blog.

1 Responsive Web Design, Wikipedia
2 Not a mobile web, merely a 320px-wide one, by James Pearce
3 Responsive Web Design, by Ethan Marcotte
4 Mobile First by Luke Wroblewski

Object hyperlinking: Meta-objects meets metaphysics

Object hyperlinking is a neologism that usually refers to extending the Internet to objects and locations in the real world, by attaching object tags with URLs as meta-objects to tangible objects or locations which can then be read by a wireless mobile device and information about objects and locations retrieved and displayed.

Object hyperlinking will make it possible to link comprehensive and editable information to any object or location. The opportunities presented by this are vast, although what has emerged so far is a mixture of social and commercial applications.

http://en.wikipedia.org/wiki/Object_hyperlinking

“The future is already here — it’s just not very evenly distributed.” William Gibson

f-Commerce: The Rise of Social Commerce

It is widely contended that f-Commerce transactions will exceed Amazon’s annual sales over the next 5 years.

f-Commerce, also known as Facebook commerce and f-comm, refers to the buying and selling of goods through Facebook. f-Commerce is a subset of Social Commerce, the use of social network(s) in the context of e-commerce transactions. These transactions can be completed either on the  Facebook, or off-Facebook using their Open Graph Protocol1, which enables the integration of Facebook-enhanced features on external websites or ecommerce shops.

As an f-Commerce developer the first decision to be made is how to deliver products and content within the Facebook environment. f-Commerce pages can be presented using either iFrames or Facebook Apps, each offering advantages and disadvantages.

1 Open Graph apps enable the developer to deeply integrate into the core Facebook experience, including Timeline, News Feed, and Ticker. See http://developers.facebook.com/docs/opengraph/

 

QR codes, mobile tagging and hardlinking

QR code containing VCard contact information for Simon HibbottThe QR code on the left contains my VCard contact information.

QR Codes are a type of matrix (or 2-dimensional optical) code consisting of black modules arranged in a square pattern on a white background.

QR or Quick Response codes have been around since 1994, having been originally developed as product tracking tools in the automotive industry.  I first came across them a variation of them a decade ago while I was working in the Pharmaceutical Industry, in the form of DataMatrix or Intelligent Product Codes.

There are currently around 70 types of code, mainly used in logistics. However, they have more recently entered the zeitgeist because they can be used by mobile applications, known as mobile tagging. Mobile tagging was developed in 2003 and has since been used in several fields of mobile marketing or advertising.

For mobile tagging the codes are restricted to around a dozen types, many proprietary. QR and Datamatrix codes provide a widely supported open source format and are the most widely used for optical reading using a mobile. QR reader software is freely available for most mobile platforms.

QR codes storing addresses and Uniform Resource Locators (URLs) are more frequently appearing in magazines, on signs, on buses, on business cards, or on almost any object about which users might need information. I’ve recently seen them on T-shirts and coffee mugs. Users with a camera phone equipped with the correct reader application can scan the image of the QR code to display text, contact information, connect to a wireless network, or open a web page in the telephone’s browser. This act of linking from physical world objects is termed hardlinking or object hyperlinking, which sound delightfully like they come straight off the pages of a William Gibson novel.

I noticed one used as a Twitter avatar a few months ago – something I’ve now duplicated on a couple of business Twitter accounts, and was recently given a business card by a colleague containing his contact details in a QR code.

QR codes can be used for a variety of uses, broadly divided into commercial, public and private tagging. It is their use in mobile tagging across all of these application areas, and in particular commercial tagging, that most catches my imagination.

I’m currently completing a Mobile App project, and will use QR codes to provide a direct link to the Android Market and iTunes store – an example of the kind of enterprise solution which will enable codes to be monetised and customised for business and commercial use. With this in mind I’ve also been looking at the process of branding by adding a logo to QR codes, something which is considered vital by many for commercial tagging.