Ah yes, the tired old Moore’s law thing. I’ve been guilty of worrying about that in the past, ever since I was at Volantis. I’ve always overestimated when it’s going to happen, but I think his timelines are a bit off. I’d say we’re probably 2 years off massive penetration of smartphones, based on the normal 18 month refresh cycle for mobile phone contracts. Some people; e.g. app.ft.com are happy to exclude a large percentage of the possible market. That judgement won’t suit all.

Anecdotally, I would say that mobile web developers are better positioned than desktop web developers, since we’ve got lots of experience about optimising (markup / payload / UX) which desktop people will get, but they need to learn it. That’s based on my experience of talking to other developers at conferences. So I would say that mobile developers are better positioned to deliver mobile and desktop sites, than desktop developers to do the same. The desktop web has got fat [1],and that doesn’t work well on mobile.

And so you have to worry about networks. 4G is still a nascent thing and poor 2G reception is still very common. Knowing how to use the mobile network again is something that mobile people are aware of. There is vast body of (mostly undocumented) knowledge here, in which we do stuff which is common sense to us, then someone else writes a blog and a book about it and gets mildly famous as a result.

Providing intelligent solutions for the web – on the desktop, you’re likely to want to browse and shop, whereas on mobile, you’re more likely to want to get to the store locator, etc.

I do see the distinction between mobile web and PC web being dropped over time, but contextual intent will remain a strong differentiator between good and bad web experiences, on mobile versus desktop.

As to having mobile only platforms; yes, I see them going away. Multichannel is going to become more common, and I would expect Apache to incubate something along these lines soon, if they aren’t already

What is it?

Responsive web design is the approach taken to ensure that the website layout adapts to the browsers viewport (the dimensions of the browser window in which the website is displayed, not including the scroll bars and address bars etc).

How is it done?

Responsive Web Design is traditionally made possible through the use of CSS Media Queries, JavaScript can then take this one step further, and can be used to modify the DOM (the structure of the markup)

CSS

These allow for a set of CSS styles to be applied when the browser is in a certain condition.
Typical queries are:

• Width & Height@media screen and (min-width: 400px) and (max-width: 700px) { … }
• Orientation@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }
• Aspect Ratio@media screen and (device-aspect-ratio: 16/9) { … }

Javascript

Using javascript it is possible to detect if the browsers screen has changed size by listening for the onresize() event.

When a screen change has been detected, you can make the required DOM modifications to adjust the layout of your content to the new browser viewport dimensions.

Problems with this approach

Responsive Web Design works best when used in small edge case scenarios, as it able to deliver rapid layout changes, without the backend heavy-weight that is device knowledge. However, when delivering sites outside of these edge-case scenarios, Responsive Web Design may not be the best approach. Particularly when targeting a wide range of devices and browsers. When using Responsive Design with the traditional methods of CSS and Javascript for this, a few problems are introduced:

Page Weight

With media queries, there is much redundant styling that will never get used by the device under any circumstance. All this redundancy dramatically increases the page weight, which in turn slows the browsing experience of your site down.

CSS

While CSS media queries are fast to adapt content upon viewport changes, the actual .css files are fairly hefty as all styling for all eventual layouts are included in the page. So you are potentially increasing the size of your style sheets by a multiple of the number of layouts you are targeting.

JavaScript

Depending on the size of your size, and the amount of DOM manipulation needed, your JavaScript files could also run the same issue as CSS.

Images

CSS can hide/display/resize images, but this does not help with the actual download of the image. If an image has display:none it has still been downloaded by the browser in its original format.

Unexpected onresize() events

When using onResize(), pay caution to the many unexpected events cause the event to trigger. These are the events known to trigger this event:

• User resizes browser window by dragging the corner or edge.
• Users enters fullscreen or window view of browser.
• The orientation of the device switches from landscape to portrait or vice-versa.
• Modification to the DOM which causes the scroll bar to appear within the browser, in effect reducing the viewport.
• When the users scrolls down the page, and the address bar is hidden, this increases the size of the viewport and hence fires this event.
• User changes the zoom level
• The viewport meta changes

Clunky Reloads

A technique that some sites have incorporated is to refresh the page upon a change in viewport. This will reset the users page view progress, and potentially also lose input field information as the page is in effect reloaded.
On smart phones, users tend to browse the site in ‘Portrait’ mode, but when they are then asked to input details in a complex form, they prefer the keyboard display in ‘Landscape’ mode.

Unexpected User Experience

As a user is browsing the site in a ‘Portrait’ mode, and they then switch to a ‘Landscape’ mode, the layout that the user should now see should not be dramatically different. Any adjustments to the navigation may throw the user off, as they will need to readjust their ability to use the site.

Hard to maintain and improve

Having multiple stylesheets for all the possible viewport groups that you wish to support which modify the layout of each, as well as handling the JavaScript interactions and DOM manipulations, can become hard to maintain. Especially when a new feature needs to be imposed on the site that requires specific JavaScript function or CSS styles, ensuring that it does not break on other devices remains a challenge.

Solutions

Many solutions can be derived through client-side javascript that will “pull” content from the server, and manipulate it to display the desired layout. Although possible, this approach has its inherent problems. These mainly boil down to:-

1. Latency
   The time it takes to pull content via javascript over the mobile network. For example updating images from a 240px initial load, to 980px will result in an increased page load.
2. Re-rendering
   The user may see the “lowest denominator” version of the site while content is being pulled and manipulated by the browser, resulting in a “Clunky Reload”.
3. Slow UX
   Javascript intensive pages will slow down the browsing experience, causing lags in scrolling and animations and other navigation elements.

A more practical approach to Responsive Web Design is to integrate the discovery services of device recognition, the processing power of server-side markup manipulation and image delivery, and the final tweaking using CSS media queries and JavaScript.

Using these combination methods, here are some suggestions for Responsive Design Practice to help reduce the known issues identified earlier:

Targeted Responsive Design

Using intelligent capability discovery will, through tools such as device databases, will allow developers to deliver content that is known to be supported by the requesting device, such as:

• Only deliver responsive style sheets to devices that support it.
• Only deliver stylings that will actually get used by that device (i.e. do not deliver a media query of width > 800px if that device can never achieve that width)
• Only deliver JavaScript to devices that can handle it well.
• Only deliver optimized images for that device.

Scale Up

If relying on responsive design, make sure that your page “scales up” to the highest denominator, instead of “scaling down” a PC based site to fit on a mobile.

This not only reduces page weight, but also ensures that the devices that can support the intensive DOM manipulation and enhanced CSS styling, will be using their full capabilities to do so.

Ajax Reload of Selective Content

Instead of reloading the entire window, use AJAX to reload sections of content that are effected by the new viewport. This technique will keep the page weight to a minimum, as content is only loaded when needed.
A great example of this would be to just reload the images when a browser orientation changes from ‘Landscape’ to ‘Portrait’.

Adaptive Personalisation

Users should always be given the option to view you site in Full mode. Some users prefer to pinch and zoom their way around a regular designed for pc website, as they feel that the content is more complete or that they are more comfortable with that navigation technique.

Allowing the user to toggle between the Full site and the responsive site will give that user the freedom. Once their selection has been made, their preference should be saved, and so on subsequent visits, the user will have their preferred view.

Use an onresize() Margin of Error

When using Javascript to adapt the layout of a device based on the onresize() javascript event, build in an margin of error to allow for accidental give and take. A margin of error of 15% should ensure that no DOM modifications are taken when the browser makes slight adjustments to the viewport as described above causing an overuse of DOM manipulation slowing the browsing experience down. Better still, only adapt when the onresize() will cross the threshold between viewport layouts that you have designed.

Benefits

Integrating a server-sided approach with client-sided responsive design has many benefits over choosing one over the other.

No Compromise

When developing a responsive site, you are taking a conscious decision to exclude devices that are unable to handle CSS media queries, javascript, or even heavy pages. Alternatively, development could follow the approach to design for the lowest common device, and so more advanced devices are suffering from lack of inclusion, rendering their technological abilities void.

Server Side Platforms

Integrating with a server-sided platform, these devices can still be treated equally, providing access to the same content through alternative means of navigation, layouts and styling.

Only delivering markup to devices that support it, and also delivering only relevant markup, not only reduces page size, but also reduces the risk of browser hangs and crashes. On mobile devices, it is common for websites with large amounts of Javascript and CSS to cause the browser to crash as the complex queries are too much for the browser rendering engine.

Easier to maintain and enhance

Using Bemoko’s hierarchy approach, breaking down your styles and JavaScript into your defined UI groups will make it much easier to know where changes need to be made, and what will be effected when that change has been made.

During testing, specific devices may throw up rendering abnormalities, and implementing work-arounds for these can be done effectively by targeting the specific device. With responsive design, the ‘work-arounds’ are all included in the CSS or JavaScript which gets delivered to all handsets, not just the devices that require it.

As the capabilities of devices improve, and new technologies become available, dropping these into specific UI Groups will instantly enhance the site. These groups can be targeted to ensure that these will work, and will not break existing functionality on older unsupported devices.

Faster page loads

Page weight is comprised of markup, CSS, JavaScript, and images. Therefor it is evident that reducing page weight will increase page load speeds, the most important factor in mobile web development. Consumers losing patience with the slow mobile web and How Loading Time Affects Your Bottom Line do an excellent job on describing how important page loading times are, and how it can effect business.

Conclusion

Standalone, Client-Side Responsive Web Design works best when the site is targeted to a particular browser or device class. For example, if you only want to support iPhone and Android devices, manipulation of layout via media queries and JavaScript will be a sufficient approach. However, when you wish to develop a site that will work across almost any browser (PC, Tablet, Smartphone, Feature phone, etc) a combination of both intelligent server-sided adaptation and client sided responsive tweaking will be best suited to the task.

So what is the best way to handle this support when developing for mobile browsers?

bemokoLive ui groupings make this easy.  We can define a uigroup in the site-config.xml file for devices that do not support the HTML5 Audio tag:


<!-- iOS 4.x+, Android 2.3+ or PC but not IE 6, 7 or 8 -->
<ui name="html5.audio" expr="(device.vendor == 'Apple' and device.version ge '4.0')
or (device.os == 'Android' and device.version ge '2.3')
or (!device.isMobile and !(device.vendor=='internet explorer'))
or (device.name.contains('xxxblackberry9800xxx'))" />


This ui expression categorizes devices which match as supporting HTML5 Audio.

In the root ui (for basic devices) – we default to not supporting HTML5 Audio and deliver a download option instead:

play.html from the root ui group:


<div><a href="${controller.audioUrl}"><img src="/images/download.png" alt="Download" /></a></div>


We can redefine play.html in the html5.audio uigroup as


<audio><source src="${controller.audioUrl}" type="audio/x-wav"/></audio>


bemokoLive will pick the relevant file for the device accessing the site at run time.

This simple ui grouping and one line file allows us to support all devices, whether they support HTML5 audio or not.

See more on how bemokoLive can speed up multi-channel web development here.

There are a number of ways of achieving this, one is to store all the relevant sizes of an image for later use, another is to store one version of an image and automatically resize it as needed.

Certain images, such as logo’s and images with text on them do not readily lend themselves to being resized as the text can become stretched, so the best option for these is to store custom built images for different size devices.  As these images do not tend to change frequently, the overhead of storing the separate images is not prohibitive.

For product images and other frequently changing media, storing multiple different versions of the image becomes a headache.

bemokoLive allows you to resize images on the fly and looks after caching of those resized images for future use.  The Image Transcoding addon used to be accessed via a Freemarker macro which was OK – but the developers have made it even easier in the latest version of the framework.

Image transcoding is now available as an HTML5 custom data attribute on the <img> tag itself, so transcoding an image in a page is now very simple.

As an example, if I have an image

http://blog.bemoko.com/wp-content/uploads/2009/09/radio.jpg

And want this image to be displayed 100px wide, I can do the following:

<img src="http://blog.bemoko.com/wp-content/uploads/2009/09/radio.jpg" data-rule="100.jpeg" alt="radio"/>

The data-rule attribute allows me to control the size of the image, so I can scale or crop to any size.  If I wanted the image to be 100x200px in size, I would say:

<img src="http://blog.bemoko.com/wp-content/uploads/2009/09/radio.jpg" data-rule="100x200.jpeg" alt="radio"/>

The tag can also be set as a variable, giving the ability to access device attributes, so I could say:

<img src="http://blog.bemoko.com/wp-content/uploads/2009/09/radio.jpg" data-rule="${device.displayWidth / 2}.jpeg"
 alt="radio"/>

To give me an image half the width of the current device.

To see an example of these tags in action, visit the image transcoder demo page.

For more details on the rules available see the documentation

Like many things that have just ‘been there’, we forget the deep seated political and commercial reasons for their existence and like the Berlin wall that for so many years was ‘just there’ so TV is an institution that fundamentally has not altered for over 50 years. Sure the programmes are more fantastic and we now have Dave! and 100 other channels of drivel.  Essentially you have a box in the corner that receives signals carrying television programmes which you pay for… either by paying your licence fee or by being subjected to hard sell advertising for nappies, insurance and mobile phones.  But like the Berlin Wall, this institution is set for huge change and eventual collapse. I am of course rather dramatically talking about ‘connected TV’.

IPTV or connected TV has been talked about for some time.  I visited Amsterdam this year.  I’m not talking about the late night bars and so called cafés. I visited IBC – one of the world’s largest conferences and exhibitions dedicated to ‘everything’ TV. And it was amazing!

I have been in ‘tech’ for more than 15 years and I thought that was pretty switched on, until I saw some of the technology and commercial tie-ups between the network operators, infrastructure companies, media and content owners and hardware manufacturers.  Oh and of course, browser companies and O/S companies, because connected TVs will all have a browser and an operating system, just like a PC, tablet or smartphone.

If you thought that the iPhone changed history, connected TV will almost certainly have as big an impact if not greater.  Quite how is frankly yet to be seen or realised, but the foundations have been laid, albeit there are some blocks on the runway. Interestingly, it’s not the technology that’s the inhibitor nor consumer appetite, it’s the stakeholders of an industry that on the surface are embracing the brave new world but behind closed doors (and let it be noted in some of those bars I mentioned) are resisting hard, as it will mean completely new revenue models will emerge and the collapse of many of the current ones that have long been institutions – like the Berlin wall.

But the wall will fall, and when it does, anyone working in the creative, advertising and digital space will need to be ready.  Which is why we have invested in technology that will allow our clients to exploit many of the opportunities that connected TV will present.

Hands-on training with best practice examples will ensure that delegates are able to get their mobile sites up and running quickly.  The courses will feature mobile UX best practice, optimising sites for smartphones and mobile networks, developing sites in Html5, building app-like mobile sites, Jquery and other JavaScript libraries for mobile.

Delivered by bemoko’s expert mobile web trainers, the courses are regularly held at the bemoko headquarters in Basingstoke, Hampshire.  Alternatively, group on-site training can also be arranged.

All participants will also receive a personal licence of bemokoLive, bemoko’s device aware web application platform, for their laptops. 

Ian Homer, CTO of bemoko comments, “We are looking forward to focusing the next three months on educating and training our valued partners and developers.” 

Phillip Clement, Sales and Marketing Director of bemoko adds, “There has been a lot of recent press regarding retailers and enterprises facing challenges in developing cross platform mobile sites, this training course instantly solves this problem.  It will be great to see the skills that we have honed over 10 years being used by the wider developer community, and the result will be many more really good mobile sites.”

Following a record number of entries, bemoko has reached the shortlist in the following categories:

Most Effective Mobile CRM/Enterprise Messaging Campaign – Nokia/JWT/bemoko – Nokia Source
Most Effective Mobile Site   - bemoko/Macmillan Cancer Support – Macmillan Mobile Site
Most Effective Mobile Charity Campaign/Solution - bemoko/Macmillan Cancer Support – Macmillan Mobile Site

The final winners will be announced at the Awards Ceremony on 3 November in London.

For more information on the Awards visit: http://www.mobilemarketingmagazine.co.uk/content/effective-mobile-marketing-awards-shortlist-revealed

Current demand is increasing for clients to create more engaging and effective user experiences across a wider range of mobile devices, which means that essential testing and tuning different variations of a site is becoming a growing burden.   The latest release of the bemokoLive platform allows site creators to test and measure different variations of their sites across multiple channels such as PC and mobile quickly and easily.

bemokoLive now enables new features to  be introduced in a controlled manner to different user segments and A/B tests can be set up, run and measured; all on one page at the same time.  This allows users to determine the effectiveness of any changes, receive immediate feedback and tune sites quickly, providing the user with essential evaluation of the effectiveness of limitless combinations.

Also included in the new release is a built in scheduling system, allowing site creators to easily schedule regular, timed activities such as SMS blasts or push messaging that can also be linked with and share content with existing apps and websites.  bemokoLive’s new release makes creating dynamic mobile websites quicker and easier with less risk.   Multivariate testing more than one component at the same time can now be carried out in a live environment, ensuring that website owners can get the most out of visitors to their sites. 

Ian Homer, bemoko’s CTO, comments “We see increasing demand for multivariate testing on sites and have added this capability to the core framework to enable this functionality on multiple devices, further enhancing bemokoLive’s capabilities for managing all web mark-up and content in one place for all devices.”

In addition to growing its development team, bemoko is also growing its sales and marketing team with the appointment of Carlie Cohen as Marketing Executive.  Carlie brings a wealth of knowledge from software and wireless components.

bemoko has experienced rapid growth in the past 12 months and is now delighted to be moving to its new UK Headquarters in Basingstoke where it will have the space and facilities to further grow and expand its team.

During the past year, bemoko’s team have delivered over 40 projects, mainly for organisations in the US.  With the UK and European market growing fast, bemoko expects to deliver at least double this workload next year and is currently recruiting for more members of their development team.  Online shopping rose by an astonishing 12.6% in August (BRC-KPMG Retail Sales Monitor for August) which means that more organisations are taking on board the necessity to ensure their mobile websites are able to cater for all of their customers’ mobile device needs.

Sales and Marketing Director Phillip Clement comments, “The demand for mobile web has moved from basic screen scraped sites and landing pages to complex transactional sites that interface with e-commerce platforms and dovetail with existing apps – giving consumers a seamless and complete shopping experience.  bemoko’s USP is its mix of both mobile web development skills built over 10 years.  All underpinned by bemokoLive – our advanced web framework, which enables the development and management of highly flexible and complex websites for all devices in one place.”

bemoko works with some of the most respected agencies in the world – helping them to push the boundaries for their clients and deliver interactive and transactional sites that they have not been able to do whilst using less flexible solutions and partners.  It is this capability that is driving more demand from its customers, both old and new.

2011 has been branded ‘the year of the mobile’ and this is probably true – it is estimated that mobile browsing will exceed PC browsing globally in 2011.  On that basis I think it’s safe to say that mobiles are now a fully integrated part of our lives and will increasingly form a key component in marketing, advertising and engagement.  Giving brands the ability to reach right into the heart of a consumer’s most personal space and form a one-on-one relationship.

Apps, like music downloads, will score highly for short periods and as quickly as they rise, they will fall to obscurity with only a very few gaining the accolade of a classic and remaining embedded in our everyday lives.  Any mobile strategy has to be built around a number of technologies and access points.  Having a really cool app that links to a standard PC website is always going to disappoint so spending huge sums just to ‘get on the band wagon’ is potentially wasted.  What you need is a cohesive, well thought through mix of an app.  Supported by a well-designed mobile website to give the customer a really good experience – fast, effective and relevant to a ‘mobile’ browsing experience, not a cut down version of a PC site that was originally designed for broadband speeds, a big screen, mouse, keyboard, a chair and probably a cup of coffee!

Once engaged, you can offer customers more targeted functionality.  For retailers this is going to be especially important.  Offering an augmented shopping experience is paramount.  Let’s face it, if you don’t, your customers will do it for themselves.  Using the web on their mobile to get the best prices and your store to look, touch and compare.

HP and Walmart launched a fantastic mobile shopping experience designed to enhance the retail environment.  Having researched their consumers, they found that on average shoppers would come into the store up to three times before purchasing.  They concluded that people were going home to compare products and prices before finally coming in to buy.  By implementing a product comparison service delivered to the mobile browser they have increased sales of peripherals by 11.2%.  And this is just the first step – local WiFi will allow customers to browse the web for free while they’re in store which means more data capture.

So it’s no longer app versus mobile web, it is simply ‘mobile engagement’, using all the tools available and carefully weaving them into your sales and marketing strategy.