LinkedIn Facebook Twitter bemoko blog bemoko technical pages
Tel: +44 1256 581028 Email: info@bemoko.com

Bemoko blog > fundraising

18

Feb

MC 20131 “Marie Curie Supporters become the focus of 2013 with new mobile site”

London 18th February 2013– bemoko (http://bemoko.com) the leading supplier of mobile web solutions are pleased to announce their latest Charity Sector client; leading National charity Marie Curie Cancer Care.

bemoko were awarded the Marie Curie contract after a competitive tender process – one of the critical success factors was a live launch for Jan 11th – giving just 8 weeks.

The Marie Curie Cancer Care mobile site has a fresh look with content being the key driver for the project. Visitors can now start their engagement with the charity at a personal level, giving them the ability to read and search any part of the site on mobile and tablet devices.

Marie Curie had a significant amount of traffic from mobile and made a conscious decision to build a mobile strategy to encompass key and popular information, funding-raising and donations.

Marc Gilbert Digital Manager at Marie Curie Cancer Care commented” Marie Curie is committed to providing information to all who need it. Mobiles and tablets is a very personal channel of engagement and gives us the ability to connect on a one to one level. The bemoko platform has allowed a rapid deployment on this project across all mobile devices.

Phillip Clement said that “With our success in the Charity sector growing stronger we are very pleased to be supporting Marie Curie Cancer Care, their digital team have understood the value of mobile coupled with our deep mobile expertise and unique technology, we have over achieve on expectations.”

About Bemoko:
bemoko is a leading supplier of mobile web solutions.

We work with clients that see mobile as a critical element of their digital strategy. Clients that want to use mobile as a differentiator, to deliver higher sales and drive stronger customer loyalty.

Through a combination of our deep mobile expertise and unique technology capability we help our clients to become class leaders in mobile

About Marie Curie
“Marie Curie Cancer Care provides end of life care to people in their place of choice. Last year we cared for more than 35,000 terminally ill patients through our Nursing Service and in our nine hospices. Our services are designed to ensure that the best possible care and patient choice is at the heart of commissioning end of life care across the UK.

For more information, contact:
Contact: Alex Holdaway
Job Title: Head of PR
Tel: 020 7599 7702
mob: 07884 311 035
alex.holdaway@mariecurie.org.uk

Contact: Emily Nicholls
Tele: 01256 581028
Follow Me on:@bemoko
www.bemoko.com
Emily.nicholls@bemoko.com

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Posted in: charity web, donations, fundraising, mobile, mobile search, mobile technology, mobile UX, mobile web, multichannel, PC website, third sector

31

Jan

Responsive Design “delving deeper”

Posted By Emily Nicholls Thursday, January 31, 2013. No Comments

With so much interest in ‘Responsive Web Design’ in 2012, we have delved deeper to see if this is the right approach for Web Development moving forward. For many it offers a low cost approach to a write once web development. However, there are limitations and this article tries to explain these, and how the Responsive Web Design concept can be taken to a more dynamic and vastly improved user experience.

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 view port 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 full screen 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 view port.
• When the users scroll down the page, and the address bar is hidden, this increases the size of the view port and hence fires this event.
• User changes the zoom level
• The view port 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 style sheets 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 mark-up 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 styling 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 affected 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 mark-up to devices that support it, and also delivering only relevant mark-up, 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 affected when that change has been made.
Through a combination of our deep mobile expertise and unique technology capability we help our clients to become class leaders in mobile.

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 affect 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.

By Olaf Dunn @olafdunn on twitter

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Posted in: fundraising, mcommerce, mobile, mobile design, mobile search, mobile technology, mobile UX, mobile web, multichannel, responsive design, web optimisation

12

Dec

The mobile evolution, a charity perspective

Posted By Emily Nicholls Wednesday, December 12, 2012. No Comments

Guest Blog from bemoko client Andy Nash -Macmillan Cancer Support

Firstly, we need to appreciate what the mobile evolution is. Nokia phones in the 1990’s connected people and became the mass-appeal, must-have personal gadget for a generation. In the mid-2000’s smart phones were accessing the internet, allowing people to download applications and interact on social media in an immediate way. For most people their mobile device has become the primary multi-purpose, multi-functional device they have with them 24 hours a day. And that is the evolution – mobiles are the turn-to device and sometimes the only device people now use because in one hand-held device that they have with them all the time, they can carry out actions they would have needed several devices for in the past, not all of which were portable.

Secondly, we need to understand how people use mobile devices and what makes this a challenge that is much more than just putting our desktop sites onto mobile devices. There are three considerations here that we need to keep front-of-mind:

• Time spent looking at information on mobile devices
People think of a question, turn to their mobile device for an answer, get it and that’s often the end of the journey. Reading at length and going off at tangents following related links is often not as commonplace as when sat comfortably in front of a desktop machine.

• Levels of distraction
Because the mobile device is with people all the time, people use their devices essentially throughout the entire span of the day. In most cases, they are distracted by other things: getting ready for work; walking; other commuters on public transport; eating; or the TV, for example.

• User expectations
People expect mobile to enable them to get answers, provide those answers in a rich way and make the absolute most of the capabilities of the device – not just serve up text in a web page

We need to guard against seeing mobile as another delivery platform for desktop experiences. Or worse – a cut down version of the desktop website. Yes, mobile devices have smaller screens, limitations in terms of connection speeds and network coverage. But the limitations of desktop machines are vast in comparison, because the mobile is such a multi-functional device. They can’t make calls, send texts, precisely geo-locate, take pictures, or interact in any significant way with the real world. Each of these functions can be tapped into to enhance what would previously have been done on a desktop website. People no longer need to be told “Pick up the phone and call us!” – they can just tap the telephone number on screen. They no longer need to print out a map from a website, they can use the in-built navigation function of the mobile device that is able to be geo-located through its GPS. No longer does a poster have to have a memorable URL printed on it for the causal passer-by to try to remember when they get home. A QR code alternative will enable smart phone users to scan it and go straight to the page whilst still in front of the poster.

The mobile device is already becoming the device of choice for most people. As such, the way organisations are embracing and exploiting the multi-functions available on mobile devices is only set to grow.

So what does this mean for charities? Well we in the charity world have to be careful to spend money donated to us wisely and add value to our services with it. We also have to find ways to show those that donate to us what a huge impact they are making on our behalf. And we have to encourage our supporters to continue to support our worthy causes. The mobile evolution enables us to do all these things and link them all up in a way that we simply could never do via desktop websites alone.

• Provision of information and services can be more easily personalised.
• Fundraising and campaigning can be made much more immediate.
• Enabling supporters to get involved can be much more localised.

But, when commissioning work, we need to have a good understanding of how embracing mobile is not just an editorial challenge, but a technical one as well and that the two are inextricably linked.

Some tips:
• Developing for mobile is not easy.

• There are lots of buzz words and phrases in use that mean different things to different people (mobile first, responsive design, device detection, progressive enhancement, graceful degradation for example).

• Mobile should not just be a cut-down view of a desktop site. Neither should it be the whole desktop site reproduced for the smaller screen.

• Organisations should concentrate on what the core information is that they want to communicate across all their devices. Then look at each individual device type (by grouping similar devices together – for example, feature phones, smart phones, tablets, desktops) and work out how that device type can enhance the core content and provide extra device-specific content.

• Do server-side device detection and use that to determine what to send to the device you’ve detected. Don’t be lazy and send everything to every device and expect the device to sort out what to display (why send a device on 3G any more data than it needs to display.

• Beware full-service agencies that have mobile as a bolt-on to their core business.

Guest Blog by Andy Nash,-Digital Project Manager – Mobile Macmillan Cancer Support
“Andy has worked in the digital arena for 18 years, including both public sector and charity. He moved from desktop web to mobile in 2010 and now evangelises daily on the need for everyone else to join him. He is passionate about user centered design and build”

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Posted in: charity web, donations, fundraising, Macmillan Cancer Support, mobile, mobile design, mobile search, mobile technology, mobile UX, mobile web, multichannel, third sector

9

Oct

Bemoko takes Make-A-Wish mobile with campaign console

Posted By Emily Nicholls Tuesday, October 9, 2012. No Comments

London 9th October– bemoko (www.bemoko.com for new website) the leading multi-channel optimisation mobile specialist is proud to announce its most recent work with the national children’s charity Make-A-Wish Foundation® UK.

Make-A-Wish grants magical wishes to children and young people fighting life-threatening conditions. Since its inception in 1986, it has granted over 8,000 wishes. With technology advancing and with donators and channels moving to mobile and tablet devices via sms , bemoko have developed and provided Make-A-Wish with a Mobile Micro -site Console. This allows information including text, images and video to create a 1 page mobile website “wish”.

We developed the console to allow them to use the mobile pages as part of the fulfilment and on-going relationship development of donors they signed up via street fund-raising.

Katy Pickering – Individual Giving Manager at Make-A-Wish comments “being able to send out wishes and share rich video media and images with people to show them where their donations are going is a great step for Make-A-Wish”, “we were keen to engage with an audience that is not typically responsive to traditional media. Mobile was the obvious platform and with the easy to use console we are able to create our own content with images whenever we need to”.

Philip Clement – Sales and Marketing Director at bemoko said “bemoko understand charities and has a flexible approach which allows us to work in this vertical, our UK development team simply configured and customised the bemoko console to personalise it to the needs of Make-A-Wish and we are pleased to hear that it is already making a difference.

makeawish samsung s3 Bemoko takes Make A Wish mobile with campaign console

bemoko mobile console

About Bemoko:

Bemoko creates an unrivalled mobile user experience from your existing web content – with the crucial operational simplicity needed to meet your business goals. bemoko allows you to quickly gain access to unbeatable performance across smart-phones, tablets, e-commerce, social media and whatever comes next.

About Make- A- Wish

There are currently 20,000 children and young people in the UK fighting a life-threatening condition and this year alone 1,400 children will turn to Make-A-Wish to have their wish granted. The charity needs to raise £6.8 million in 2012 and receives no government funding or lottery grants – so every donation really does count.

For more information contact:

Emily Nicholls

bemoko

+44 844 264 0909

emily.nicholls@bemoko.com

 

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Posted in: charity web, donations, facebook, fundraising, mobile, mobile design, mobile search, mobile technology, mobile UX, mobile web, multichannel, music, press, social, third sector, web optimisation