Monthly Archives: May 2012

Responsive Design – Minutes from the 3rd team meeting

As mentioned in the previous blog this meeting was attended by Dr Mike Wald, Yunjia Li and E.A.Draffan – Gary Wills sent his apologies.

Responsive Design

It all started on the white board where Yunjia explained how he was adapting his design to fit with the problem of 7 inch plus screens versus the average smart phone screen. He demonstrated the ever narrowing of the viewing area and how the video, annotation and transcription windows could shrink and eventually offer access via tabs. But when it came to mobile phone users there was a need to rearrange the view to be totally linear. In other words two versions of Synote mobile but with changes that would happen automatically depending on the metadata received.

Here are four views of Synote mobile on the different sized screens

Screen size 1200 pixels and above

screen size 980 to 1200

screen size 768 to 979

screen size 480 to 767

It will be very important to gather the metadata from the media so that the correct view and player can be selected. At present there are 3 useful approaches for this demonstrator – ffmpeg and YouTube has an api with metadata such as title, resolution etc and finally the link to the file format itself offers metadata which can be drawn out by a commercial service and this would need to be re-created if we did not want to pay for the service. The minimum amount of data needed is the duration of the media, the format and coding and whether it is video or audio.

It just so happened that there was a blog on this subject that fitted the discussion around screen size issues. Titled “What’s next for mobile now that adaptive design has failed?” it seemed like an appropriate article to read before the meeting.

“Desktop web browsers, tablets, and mobile devices are fundamentally different and are used in very different ways. Across our properties at CBS Interactive, we have experimented with a variety of adaptive and direct designs and are learning the hard way that a one-size-fits-all solution delivers a subpar user experience.” Peter Yared (VentureBeat MobileBeat blog)

Annotations / Captions

Captions can be displayed on a desktop with the video but there appear to be no standards for displaying captions within web pages across all tablets and mobiles alongside transcriptions and annotations.

At present if someone is deaf they have to read the caption and watch the video and then scroll down to the note taking mode. It is not possible on the iPhone to display both the transcript window and the video due to the size of the screen. However, it will be possible to capture an image from the video and annotate this as part of the note taking process.

3rd Team Meeting – Wednesday 23rd May, 2012

This month seems to have gone by rather quickly and this team meeting will be a small one with Dr Gary Wills away at the moment. Dr Mike Wald, Yunjia Li and E.A Draffan will meet to hear about Yunjia’s “responsive design for Synote Player and the pages he will be presenting using wireframework’.

He has set the discussion going with the following statement:

“This project will use basic principles of responsive web design to create a new mobile HTML5 version of Synote, able to replay Synote recordings on any student’s mobile device capable of connecting to the Internet.”

Item 2 will be how this is achieved on the various sizes monitors such as those offered on the iPad, Galaxy Tab and iPhone etc.

Item 3 will include the issues that have arisen with the player and being able to read annotations simultaneously whilst watching videos.

As Dr Mike Wald said in a recent email to the team “One issue with captioning overlayed on the video (as suggested for Synote Mobile) rather than in a separate panel (as we have currently in Synote) is how can a hearing impaired person read the captions when the video is a thumbnail or not displayed at all? There needs to be a way the captions can be displayed separately … Matterhorn designers are now thinking about ways to do this …

Beautiful mobile applications, beautiful user experiences Part 3

Whilst exploring issues around the look and feel of Synote Mobile Mike sent me this blog, which is one of three from The Computer Weekly Application Developer Network

“In part three of this guest blog for the Computer Weekly Developer Network, Sybase technical evangelist and mobile evangelist Ian Thain discusses the new mobile application landscape characterised by new and more beautiful user interfaces.

Links to part one and part two of this series.

There are a few mobile design guidelines that should never be far from your thoughts.

To take a few as examples :-

The initial screen should be kept as clear as possible to act as a launch point, because first impressions count – Synote has always gone for the minimalist approach!
Keep the main/primary controls in the thumb ‘hot zones’ at the edge of the screen and keep the most important content at the top, with controls at the bottom – this is particularly important for screen reader users who often track their fingers around the edges of phone screen to catch menu items.
Be generous with the space on the screen, do not crowd and avoid scrolling where you can. Reducing clutter helps everyone but in particular disabled users as does the following point.
Stick to proven navigation models, which can be used in combination, use flat pages for simple applications, and if possible make use of a tab bar that switches between the app’s main functions, and/or a tree structure for drilling down through a hierarchy of content.”

Please read the rest of the actual blog if you are interested.