Tag Archives: Mobile Web

UI and other network considerations – Embracing the Network lunch’n’learn

Leave a reply

This talk is available in various forms across the web and it’s interesting the difference in reaction it received – with the old team at Haymarket we came up with about two pages of suggested changes to our front-end code and other improvements.

At Mountain Warehouse, a lot less interest – but then the team is fairly back-end focused and never really get to play with the UI.

Note: this is a different video of the same talk as the original has vanished.

SmashingConf 2015 Barcelona: Patrick Hamann — Embracing the network from Smashing Magazine on Vimeo.

8 steps to putting your café on the internet

Leave a reply

I see two reasons for a local business, such as a café, to have an internet presence – discovery and engagement.

Discovery is easier and is the “classic” reason – it’s to help new customers discover your existence and while traditionally that might mean a website, these days it’s going to be more about appearance on map sites like Google Maps. Engagement is to build a relationship with customers outside of the café so that they will frequent you more regularly / mention you to other new customers.

0. (Buy a domain name and sort out an e-mail account on that domain)

I’m not of the opinion that you need a website for a local service like a café as a website isn’t going to be best at engagement or for discovery. But if you’re going to get one, then get one first because nearly every other service you will sign up for will give you the opportunity to enter an address and an e-mail and you’ll save loads of time if you’ve got these sorted already. Just add the simplest page with contact details (including address) and opening times and worry about anything flashier later.

1. Get yourself listed on map services

So that people using them on mobile will be able to see you, and be directed to you if they search for “coffee”. Start with Google Maps, then Apple Maps (you’ll need an iPhone), then Bing Maps. This is approximately in ascending order of difficulty as well – Google is dead easy, Bing is cryptic.

2. Consider TripAdvisor listing

The TripAdvisor app has a great functionality for restaurants “near me now”. If food is a strong point of yours, consider getting listed.

3. Get yourself on any vertical/specialist directories.

For example, if you offer free Wi-Fi then look for websites that list Wi-Fi locations and get yourself listed. (A word of warning, it shouldn’t cost more than a few quid to get on these).

Are you suitable for services like Just Eat?

4. Decide how you’re going to engage with customers outside the café

This is quite critical, because it’s not worth doing anything about engagement if you don’t think you’ve got anything to say and you’re not going to bother saying it. It can be a simple notification about the “sandwich of the day”, or you could do internet-only offers (free upgrade to large if you say today’s password), or first person to answer a trivia question in-store gets a free drink. Be creative!

5. Get Twitter and Facebook accounts

You can keep your work down by linking these accounts – and I prefer setting Twitter to post to Facebook because you can use services like Twuffer to set up Tweets to come out at certain times. If you’re going to post more than 3 times a day, it might be worth keeping them separate though as Twitter users expect more traffic than Facebook.

6. Publicise Twitter & Facebook on site

If you’ve got these accounts, the people you need to start following you are those who have been in at least once – not friends and family scattered across the country! Entice customers by hinting at what you may be posting (offers? events? local news? jokes?)

7. Respond to incoming messages through Twitter / Facebook

Finally, if you do get a following, remember to politely respond to anything they say to you.

8. Build a website – keep an eye on mobile functionality

Finally, build a website! Make sure that it’s going to look good on a mobile screen as users coming from the mapping services are likely to be mobile users. Ensure opening times, location and contact number are prominently displayed. If you’re putting a menu up, remember to keep it up to date or label it “sample menu”. If you’re using Twitter you could put your latest tweets up – although it will look worse if you’ve got a Twitter feed and the latest tweet was months ago…

Scaling websites to mobile screen sizes

Leave a reply

Useful bit of info that it took me a little while to find – there’s a new meta tag “viewport” that you have to know about.

The short story
Take this and play with it – note width can also be a pixel value, just replace with a number:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

The long story

So if you had a nice, simple website with a heading and some text you would expect the mobile browser to find a sensible scaling for that wouldn’t you? Nope – the left is my artist’s rendition of what happens if you just have some HTML and you don’t specify any sizing information at all (and you haven’t got the above meta tag either).

OK, you think, it must have some sort of width that it expects the html element to be – let’s resize that (or body or something) so that we only have 320px worth of content. What happens then?

Well you get this – the mobile browser is basically wasting a lot of space.

This is because mobile browsers are assuming that your website needs somewhere between 800-1000px (depending on device) to display properly, it then renders the page according to that width and then does a pixel-by-pixel scale down so that all the page comes up on the screen. But tiny.

Now when you take out the CSS forcing body / html / top-level div width and replace with a meta viewport tag saying that your site has been designed for (say) 320pixels or to be fluid at small resolutions (device-width) it won’t need to scale it’s calculated website down so far, or at all. And you get the result you’re looking for lovingly rendered by myself to the left.

There’s a very detailed breakdown of what’s going on at quirksmode.