Posts Tagged ‘Mobile’

Imagine Ireland Mobile site

January 10th, 2012


Developed a mobile version of the Imagine Ireland, with property searching. Wireframes by Charles Meaden, Digital Nation

Why Responsive Design Actually Begins on the Server

December 1st, 2011


There is a very interesting presentation at http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server . It covers the challenges in responsive mobile site creation, and proposes a hybrid solution of device profiles to solve it.

The first half of the presentation is worth showing anyone who does not understand the challenge of developing a mobile website that works well on multiple mobile devices, not just on the latest and greatest iPhone / Samsung / HTC.

It’s strongest point is that many people (especially in this current financial climate) will not have the latest leading edge device. In fact, your cutting edge, state of the art device from 2 years ago (read iPhone 3/3G) is now old and destined for the mobile device rubbish heap. However many people will not automatically upgrade, but will keep them, and thus there is a great proliferation of devices which don’t support the latest HTML5, slower Javascript, etc.

Added to this is that the word ‘smartphone’ retains a nebulous definition, and in fact today’s ‘cheap’ devices contain most of the features that a smartphone has (e.g. touch screen, browser), however their ability to serve the web may not be as perfect as Apple’s Mobile Safari.

This is the reason that content adaptation has had a number of solutions, via examples such responsive design, server-side detection and adaption, etc.

The solution proposed in this system is not a simple solution. It proposes an aggregation of device information (e.g. from DeviceAtlas) on top of a default device profile, stored in cookies, sent via Javascript to the server to analyse. To implement it for a client, I for one would hope to see a library to help achieve this without the larger development cost, so I will be watching closely.

There are also some interesting suggestions at the end of the presentation about some potential options for the future, e.g. changing the <img> from having one source file to having multiple source files (similar to the way the <video> tag is currently done). I would be interested in this option, however the reality is that the HTML change process is long and tortuous and thus I won’t be holding my breath.

Dansmart.co.uk mobile theme

May 5th, 2010


When viewed by a mobile device, this site will be displayed with the dansmart.co.uk mobile theme, rather than the desktop theme. This has been made possible by the Mobile Smart WordPress plugin which is under development, and available in the WordPress plugin repository.

The theme will undergo further development over the coming weeks, in concert with the development of the Mobile Smart plugin default theme, and the Mobile Smart content transformation functions (allowing automatic scaling of image content to fit the device viewing the site).

<h3 class=”standout-header”>Mobile Smart Plugin for WordPress v0.2</h3>
<p>With Mobile Smart you can have a selection of tools to enable your theme to work better with mobile devices. Download it from the WordPress Plugin Repository: <a href=”http://www.wordpress.org/extend/plugins/mobile-smart”>http://www.wordpress.org/extend/plugins/mobile-smart</a></p>
<br/>
<h3>Comments/Support</h3>
Add your comments / support requests to:
<ul>
<li>Comment on the <a href=”http://www.dansmart.co.uk/2010/03/released-mobile-smart-plugin-for-wordpress-v0-2/”>Release post</a></li>
<li>Contact me via the <a href=”http://www.dansmart.co.uk/contact/”>Contact form</a></li>
</ul>
<br/>
<br/>
<h3>Description</h3>
Mobile Smart currently contains the following functionality:
<ul>
<li>Switch your theme to a mobile-ready theme if a mobile device is detected</li>
<li><strong>New: </strong>Manual Switcher – to allow your user to manually switch between desktop and mobile versions. Available in 3 versions: widget, option to automatically insert into footer, or template tag.</li>
<li>Template functions to help determine which tier of mobile device (touch/smartphone/other) is viewing your site, to allow conditional content inclusion.</li>
<li>Adds device and tier specific CSS selectors to the body_class, to allow conditional CSS (e.g. so in the same way you have “.single” that you can target “.iphone” or “.mobile-tier-touch”.)</li>
</ul>
<p>See the Frequently Asked Questions for guidance on how to use the plugin.</p>

<p>Note: More functionality will be coming over the coming weeks. <br>
On the Roadmap:</p>
<ul>
<li> Mobile theme – to get you going without needing a theme designer.</li>
<li>Admin – user added Mobile Devices</li>
<li>Mobile Device Log – for you to track which devices are using your website</li>
</ul>
<br/><br/>
<h3>Installation</h3>
This section describes how to install the plugin and get it working.
<ol>
<li> Upload the `mobile-smart` directory to the `/wp-content/plugins/` directory</li>
<li>Activate the plugin through the ‘Plugins’ menu in WordPress</li>
<li>Go to Settings-&gt;Mobile Smart and choose your theme to display when a mobile device encounters your page.</li>
</ol>
<p>See the Frequently Asked Questions for guidance on how to use the plugin.</p>
<br/>
<h3>Frequently Asked Questions</h3>
<strong>= Does the Mobile Smart plugin work with other mobile plugins =</strong>

It would be advisable not to use other mobile theme switching functionality with this unless theme switching is turned off (go to Settings-&gt;Mobile Smart to disable).

This has been tested with the WordPress Mobile Pack transcoder and is noted to be compatible, though the list of mobile devices are different between the two.

<strong>= Does the Mobile Smart plugin do domain switching =</strong>

Not currently, though that is on the roadmap.

<strong>= How do I enable unique handset body classes =</strong>

To enable the CSS body classes, ensure that in your mobile theme you have the body_class() function included:
<pre lang=”php”>
<body class=”<?php body_class(); ?>”>
</pre>
<strong>= How do I change stylesheets dependent on device tier =</strong>

How do I use the body classes?

If you have a style that you only want a specific tier of device (e.g. touch handsets like the iPhone) to use, then use the body class CSS selector in your CSS file as follows:

Example:
<pre lang=”css”>/* for all links */
a {
color: black;
}
/* increase padding on anchors on touch handsets to allow for big fingers
.mobile-tier-touch li a {
padding: 20px;
}</pre>
= How do I change stylesheets dependent on device tier =

You would do this if you prefer to split out each device tier CSS into separate files. Be aware that this creates an extra function call though.

Use the following PHP code:

<pre lang=”php”>
<?php
/* add additional stylesheet for certain mobile types */
global $mobile_smart;
// add stylesheets dependent on header
if ($mobile_smart->isTierTouch() == MOBILE_DEVICE_TIER_TOUCH)
{
wp_enqueue_style(‘mobile-touch’, get_bloginfo(‘stylesheet_directory’).”/css/touch.css”);
}
else if ($mobile_smart->isTierSmartphone())
{
wp_enqueue_style(‘mobile-smartphone’, get_bloginfo(‘stylesheet_directory’).”/css/smartphone.css”);
}
?>
</pre>

Note: these functions do not test for the Manual Switcher. To test for the manual switcher (in case you are using
these template tag functions in a desktop theme), you should call:

<pre lang=”php”>
<?php
/* add additional stylesheet for certain mobile types */
global $mobile_smart;
// find out manual switching state
$is_manual_switched_to_mobile = $mobile_smart->switcher_isMobile();
?>
</pre>

<strong>= Can you add xxxx-device to the <strong>the Mobile Smart plugin </strong>? =</strong>

Please email me with details of the device that is not yet supported by Mobile Smart, and I will add it in, and endeavour to release an updated version within the week (if timescales allow).
<h4>= How do I use the Manual Switcher? =</h4>
You have the option of the following:
<ul>
<li>Mobile Smart Manual Switcher Widget – go to Appearance-&gt;Widgets and drop the widget in an appropriate sidebar. If you’re a theme developer, you can create a new ‘sidebar’ in the appropriate location, e.g. the footer bar, if you don’t want this option in the standard sidebar.</li>
<li>Enable Manual Switcher in footer – if this option is enabled (via the Options-&gt;Mobile Smart page), this adds the Manual Switcher link into the wp_footer() call, which means it will be displayed at the bottom of your page.</li>
<li>Template tag, see below:</li>
</ul>
<pre lang=”php”>
<?php
// get global instance of Mobile Smart class
global $mobile_smart;

// display manual switcher link – requires Manual Switching to be enabled
$mobile_smart-&gt;addSwitcherLink();
?>
</pre>
The Manual Switcher displays the switcher link in a div with an id of *mobilesmart_switcher*

<strong>= Where can I get a mobile theme from? =</strong>

Try the WordPress Mobile Pack for a good example of a theme that is compatible with XHTML-MP.

<strong>= What’s on the roadmap? =</strong>
<ul>
<li>Admin interface to allow adding of user agents</li>
<li>Domain switching of themes</li>
<li>PHP and Javascript helper functions</li>
</ul>

Usability: Above or below the fold

March 22nd, 2010


I’ve just read Scrolling and Attention, the results of usability research by Jakob Nielsen. It shows some interesting results that influence how web designers position content above or below the fold.

The fold and scrolling

The “fold” is the cutoff line of the bottom of your browser window, where you have to scroll down to see content “below the fold”, and any information/data/content that you do not have to scroll is “above the fold”.

He notes that although users much more willing to scroll than back in the 90′s, there is still a hierarchy of information that a user takes in above others.

He summarises that “most important for the users’ goals or your business goals should be above the fold. Users do look below the fold, but not nearly as much as they look above the fold. “. However, he also notes that the middle content tends to be viewed less than the bottom content, if there is something worth grabbing the user’s attention. This is probably due to the user looking for elements of importance.

It means that a website home page, or any key page should ensure that the most important information should be at the top, but that we shouldn’t be afraid of scrolling.

Also it means that there should be some ‘call to action’ towards the end of the page also, to keep the user’s interest.

Pagination

One interesting thing is that he notes that paginating content can help reduce the lack of focus on the middle content, however it can also turn the user off continuing to the next page, whereas just scrolling reduces the effort the user has to do. The user should be given motivation to move onto the next page.

Mobile devices

This information is relevant to mobile devices, where a user spends a lot more time scrolling than perhaps on a larger screen. The mobile site should still have the most important information at the very top, but give calls to action. The temptation with mobile devices is to paginate everything to reduce the size of the download, however that initiates another download, which requires the user to continue being interested. It seems there is a trade off between download size and keeping the user’s attention.

Any thoughts?

Released: Mobile Smart Plugin for WordPress v0.1

December 9th, 2009


Updated 22/12/2009: plugin is now hosted on WordPress.org plugin repository.

I’ve just launched the first of a suite of plugins to aid mobile site development in WordPress, called Mobile Smart.

Download through the WordPress.org plugin repository: http://www.wordpress.org/extend/plugins/mobile-smart/ (note: link will open in new window/tab).

Mobile Smart currently contains the following functionality:

  • Switch your theme to a mobile-ready theme if a mobile device is detected
  • Template functions to help determine which tier of mobile device (touch/smartphone/other) is viewing your site, to allow conditional content inclusion.
  • Adds device and tier specific CSS selectors to the body_class, to allow conditional CSS (e.g. so in the same way you have “.single” that you can target “.iphone” or “.mobile-tier-touch”.)

Any feedback gladly welcomed.

How to detect a Mobile Device – Part 2: Detecting multiple devices

September 24th, 2009


Introduction
This is the second in a series of tutorials explaining how to detect mobile devices and so direct a user to a mobile optimised page.

Who is this tutorial for?
It will be helpful to have read the first in the series: Part 1: The User Agent String.

This tutorial assumes an intermediate level of PHP and xHTML

The Problem of Multiple Devices
In the last tutorial, we looked at how to detect one platform, by grabbing the user agent string, comparing it against the text for ‘iphone’ or ‘ipod’, and then redirecting to an iPhone-optimised web page.

However, there are a myriad of mobile devices in the world. Each mobile device has a browser, some of which are the same (e.g. Opera Mini, or a standard browser for Nokia Series 40), but many are different, and therefore return different user agent strings. It’s also worth noting that sometimes re-releases of the same handset will modify the user agent string slightly.

Read

How to detect a mobile device – Part 1: The User Agent String

July 23rd, 2009


This is the first in a series of tutorials that explain how to detect mobile devices, and so direct a user to the appropriate mobile-optimised webpage.

This tutorial assumes a intermediate knowledge of PHP and HTML.
Read


Switch to mobile version