Getting user input
An area that shouldn’t be overlooked when
designing for mobile devices is user input. In those instances that you’re
asking a user to enter data into an input box, remember that they’ll be doing
so with a less extensive keyboard, and so specifying the correct “type” with
the <input> tag is important to ensure the correct virtual keyboard is
presented to them. By now, all tablet users will have experienced the
irritation of web pages that ask for an email address, but which fail to
present a virtual keyboard that has the @ symbol. As a result, they must press
Shift to find the character, then switch back to the default for the rest of
the address.
Another area that’s tricky to manage on
mobile devices is the dropdown selection box, because trying to select from a
tiny dropdown with your finger can be frustrating. One way around this problem
is to use techniques such as the jQuery Mobile select menu to present a form
that’s easier to use on a small touchscreen.
JQM
select menu. jquery-mobile
If you search the web for adaptive designs,
you’ll see many references to various frameworks that claim to make the task
easier, together with plenty of talk about creating a grid with CSS that will
allow your content to flow correctly when browsed in a variety of devices. I
must confess that currently I’m more than a little sceptical about this
approach, since it introduces extra <div> tags that make the layout more
difficult to read. As someone who’s been building websites right from those
early days when we had to use tables to implement all but the simplest and most
linear of designs, my relief at finally being able to place objects where we
wanted to and have them flow and resize through the means of a common style
sheet was considerable. It also meant that HTML pages lost unnecessary code and
implementing site-wide style changes became easier. This move towards finding
the ideal CSS implementation of a grid seems to be reverting to the bad old
days.
The current HTML <table> tags are
great for the purpose they were designed for displaying tabular data. Using a
table or a grid to control the display layout seems like a retrograde step to
me, and I’m sure it will end in tears. If you take a look at the Foundation
Framework, for example, a small sample of the HTML on its own website shows how
it’s implemented. The grid is built using <div> tags such as the
following:
<div class="row">
<div
class="tablet-padding">
<div class="three columns
property"
id="zurbApps">
Some text
<div class="row">
<div class="six
columns">
A list
</div>
<div class="six
columns">
Another list
</div>
</div>
</div>
And so it goes on until it starts to look a
bit like the sort of unreadable mess that we used to see:
<table>
<tr>
<td>
Some Text
</td>
</tr>
What’s wrong with:
<div class='mystyle'>
Some text
</div>
I wait to be convinced otherwise. Google
has officially recommended responsive web design as its preferred method for
building mobile websites. I have a big issue with a software company that
builds an internet search engine and then tries to enforce ways of designing
sites so that its own engine can index them properly.
Google
has officially recommended responsive web design as its preferred method for
building mobile websites
In a perfect world the search engines
should do the job properly and correctly index any site, irrespective of how
its HTML is structured. But as we all know, this is an imperfect world, with
the world of web design more imperfect than many other areas of it, so if we
want to be found we’re stuck with having to fettle our code so as to help the
search engines to do their stuff. So if you’re planning for mobile users to
access your site, then responsive design is the way forward.
Azure Media Services
In a previous column I wrote about the
imminent release of Microsoft’s Azure Media Services, which promised to offer
full live streaming from the cloud. This could be of interest to anyone who has
a need to deliver video streaming, but who doesn’t want the expense of building
and configuring their own streaming servers (to say nothing of paying for large
amounts of bandwidth that will probably get used on only a few occasions). This
new service from Microsoft could be very useful.
Expression
Encoder for Azure Media Services: must try harder
I say could be, because before anything
else it has to work, and work easily. Sure, you can develop your own code to
access the SDK in Visual Studio 2010, but for a lot of uses you want to take a
video source and publish it to Azure in a simple and quick way. For this you’re
told to use Microsoft Expressions Encoder 3 or 4, and you’ll also need to
install the Azure Media services plugin. Once you’ve done this, you can take a
video file and encode and publish it on your Azure media area. What I wanted to
do while at the World Bridge Championships was a simple live streaming
broadcast, but it seems that you can’t currently take a live source and publish
to Azure via Expressions Encoder in the same way that you can with IIS smooth
streaming services. I have to say that Microsoft US has been very helpful in
trying to sort out this issue, but to no avail. I’ll be returning to this in a
future column once it becomes more usable; at present it’s a huge
disappointment that really spoils the usefulness of this new service.
More and more we’re seeing extremely clever
back-end technologies from Microsoft being let down by incomplete or unreliable
front-end tools. The view seems to be that because it’s possible to use a
technology from code, then that’s all that’s required. I’d take issue with
this: give us ways to deploy these technologies easily and we can save the
coding to produce our custom solutions if necessary. Sorry, Microsoft, but if
you intend to charge for this service, then you need to get it working first.
“If you want mobile users to access
your site, responsive design is the way forward”
Error!
Even when using Expression Encoder to
publish a video file, I found that the system would sometimes throw a cryptic
error message that prevented publishing. This turned out to be caused by
Expression Encoder not generating two of the files necessary for correct
streaming.
