Limitations of a web app (and why we did rather than app store) are for a much longer post maybe later but, after building the app we had about 16+ iPads to set up and get ready for the presentation package. Thinking we’d have to sit there and preload the apps add the wallpapers etc was going to be a task in it’s self.

Enter iCloud

We set up one iPad2 (iOS5) with one email address, set the backgrounds arranged the icons add the app etc. Then backup to the cloud!

Open brand new iPad number 2 – start up and restore from iCloud back up with the same email and password! Job done. Ok they still need turning on etc, but it really helped with cutting down amount of time and you could do it anywhere in the world.

What I’m looking for is the level care and code base has been applied to the project, if it upto current standards (what ever they are) then you’re lucky but more often than not it looks a mess, full of tables for layout etc. The question is why, I do ask in person, but in these situations its often someone new has been put in charge or can’t remember when the site was first built etc.

So has the site been built six months ago and looks like a dogs dinner because the dev wasn’t any good, or was it built 10 years ago and that was the current standard for websites.

Enter humans.txt

James Young pointed me in the direction of humans.txt – a place to keep any human readable text, so put in anything in there that is related to project, such as last modified, or a project start date – the team etc.

Could be quite useful to find out a back story of the site for better evaluation in future. Go check it out.

Just good housekeeping in the end

So talking to Katie on the way home was good to get some user feedback from her, she is a very typical internet user, with habits like most – she doesn’t use the internet like I or a web designer would.

I was sat on the bus and text my brother what he wanted for christmas and he told me with a link to amazon, so I clicked on it, got the mobile version clicked add to basket, it remembered all my credit card details and ordered it a few seconds

The power of thinking about the user and having a responsive website will likely get you more business

I am using Expression Engine for HuddsDigitals and have added a few plugins – one of which is RSVP which means people can register them selves for events. I had previously been using Facebook events, which is really easy to set up and send out invitations, problem is not every one checks facebook or need make sure you are friends with everyone to send invites. So I wanted to take it ‘in-house’ which both has its pro’s and cons, one is trying to get people to register and RSVP.

When people do use it

If we do get people to use the website, so updating their profiles (when that comes) and rsvp to the events they attend then we can use this data how ever we like and it belongs to HuddsDigitals. (Yes, we could start using existing API’s to bring in data, and might suggest this in some cases – but keeping it simple for now).

Calendar Sync

One thing I’ve enjoyed creating is the calendar sync – You can use microformats to show calendar information on a web page of which I do use, and can sync with desktop calendars quite easily but causes problems with mobiles – iPhone in particular.

This is where webcal:// comes into play and creating a dynamic iCalendar file and just replacing http:// with webcal:// of the place on your server will do the trick.

First I created a feed for the events which in Expression Engine looks like this:

BEGIN:VCALENDAR
PRODID:
X-ORIGINAL-URL:http://huddsdigitals.com
X-WR-CALNAME:HuddsDigitalsFootball
VERSION:2.0
METHOD:PUBLISH
{exp:channel:entries channel="events" show_expired="yes" dynamic="off" show_future_entries="yes" order_by="date" sort="asc" limit="99" status="open|hidden" disable="category_fields|member_data|pagination"}BEGIN:VEVENT
SUMMARY;CHARSET=UTF-8:HuddsDigitalsFootball
LOCATION;CHARSET=UTF-8:{cf_venue}
DTSTART;VALUE=DATE:{entry_date format="%Y%m%dT%H%i00"}
DTEND;VALUE=DATE:{expiration_date format="%Y%m%dT%H%i00"}
URL:http://huddsdigitals.com/events/{url_title}
DESCRIPTION;CHARSET=UTF-8:{cf_caption}
END:VEVENT
{/exp:channel:entries}END:VCALENDAR

Perfect! People could sync their calendars to the url and new events would be added to their calendar.

I kept digging in the documentation and realised you could add Attendees and since I was trying to push people to RSVP on the site, how could we use this?

Recently added to iOS5 was to view people attending events or invite people to attend (I don’t know how to use this effectively yet) but figured out I can show who has RSVP’s on the site in the diary entry.

Why?

We are a group of professionals and all have different skills and often use each others expertise or pass on work and need to contact each other easily. Yes, we probably maybe exchange numbers or business cards when meeting, but after the beer is flowing or at football when people are tired and want to go home we can see who actually attending the event and as long as there is a contact email associated to the persons HuddsDigitals Account and RSVP’d you can find that person on your phone, from you calendar or on the website.

Here is the final current code being used, (using RSVP add-on) if you are interested. You can subscribe to the feeds on HuddsDigitals site.

BEGIN:VCALENDAR
PRODID:
X-ORIGINAL-URL:http://huddsdigitals.com
X-WR-CALNAME:HuddsDigitalsFootball
VERSION:2.0
METHOD:PUBLISH
{exp:channel:entries channel="events" show_expired="yes" dynamic="off" show_future_entries="yes" order_by="date" sort="asc" limit="99" status="open|hidden" disable="category_fields|member_data|pagination"}BEGIN:VEVENT
SUMMARY;CHARSET=UTF-8:HuddsDigitalsFootball
LOCATION;CHARSET=UTF-8:{cf_venue}
DTSTART;VALUE=DATE:{entry_date format="%Y%m%dT%H%i00"}
DTEND;VALUE=DATE:{expiration_date format="%Y%m%dT%H%i00"}
URL:http://huddsdigitals.com/events/{url_title}
DESCRIPTION;CHARSET=UTF-8:{cf_caption}
{exp:rsvp:attendance entry_id="{entry_id}" limit="200"}
ATTENDEE;CN={attendee_screen_name};PARTSTAT=ACCEPTED:{attendee_email}{/exp:rsvp:attendance}
BEGIN:VALARM
TRIGGER;VALUE=DURATION:-P2D
ACTION:DISPLAY
DESCRIPTION:Football is in two days
END:VALARM
END:VEVENT
{/exp:channel:entries}END:VCALENDAR

Yea, Media Queries are great, and using them comes down to the cliche of

With great power comes great responsibility

which in alot of cases is not followed. There are right and wrong times to use media queries, and especially when entering the mobile platform or should mean small screen, as what does mobile mean!? I take it is mobile phone = small screen, but that is changing as new technology is invented all the time.

A Laptop is mobile? A tablet device is mobile? But they are connected to wifi so are they? We can’t test connection speed effectively yet so we have to assume alot of things which makes it difficult to measure some of the points below.

What annoys me is how some can add a media query style sheet to a website that moves a few things around (in a straight looooong scrollable line usually) and call it ‘Mobile’.

It’s not f**king mobile!

There are always exceptions to the rule, such as the initial code is so light first that it doesn’t really mater, and probably some more.

What I am talking about is taking the same mark up, with a javascript library, plug-ins, large images that have been designed for a wide screen and broadband connection.

Here are just some things you have to consider when designing for ‘mobile’.

• Screen size
• Connection speed
• Type of device
• Their data plan
• Why are they visiting on a mobile
• Location
• What do would they want to achieve

So how can we design for ‘mobile’ with these things in mind? Not easy right.

We all have 3G reception with about 1.5mbs connection so it’s not that big a deal!? I was starting to think like this, until my recent holiday where the connection I was blessed with was GPRS at something like 0.1mbs (it got better whilst out in the towns etc but), I was trying to find things in the area to visit and do but frustrating connection speeds and large download sites left me angry(over exaggerating). Google loaded in seconds and google places helped, but you want to see the website and get a feel for the place.

This cemented my ideas of how I should approach a ‘mobile’ site. I want it to be fast as possible considering that list above.

Case Study: Taylors Hairdressers

We recently designed Taylors & Co and gave them a single mobile page as we thought about what customers might be looking for in a hurry whilst out and about maybe looking for somewhere to get their hair cut passing through on business, pleasure or just out shopping?

We identified that what they are looking for are phone number, and opening times, they cut hair right, so they know that already. I made sure the site was as light as possible and the page is around 30kb in size compared to 208kb on the ‘desktop’ version. Not a huge difference, but it is if you start looking at peoples data plans, and speed, getting that info 5 times quicker is surely a good thing?

If I was to slap a media query on the main site, It would not be truly ‘mobile’. There are other things that would help it be mobile such as geo locating and much more, but the project scope was that we could only do what we have done for now.