Mobile Websites

[FunkyBears]

Anyone on the forums have experience of building websites for mobile?

 

[MorphMeUp]

We do! And smartphone apps.

 

[blendwd]

Yes we do indeed if you require any help.

 

[kevin555]

Just looking into this myself - wondering whether to go bespoke or off the shelf.

 

Depending on what the purpose of your website is it could be best to look into 'Responsive Web Design'. A responsive design would mean that rather than having to create 2 separate websites (one for desktops and one for mobiles) you could have just the one website that cleverly adjusts itself to whatever device (phone, tablet, laptop or desktop) the user is using to browse your website.

 

[Esk247]

Depending on what the purpose of your website is it could be best to look into 'Responsive Web Design'. A responsive design would mean that rather than having to create 2 separate websites (one for desktops and one for mobiles) you could have just the one website that cleverly adjusts itself to whatever device (phone, tablet, laptop or desktop) the user is using to browse your website.

indeed. i'm looking at this now

the days of having a separate mobile site are gone, one website to rule them all, it will just adjust text, images, width and height to the screen resolution by the looks of it so it will work on your laptop, your ipad or your iphone.

 

[KingsandQueens]

I do and have some capacity to do some freelance if needed, or is it a more general question?

 

This may be a totally stupid question, but dont most phone browsers just bring up the normal sites now anyway??? even if they dont you only have to download opera mini/mobile???

You're right, but trying to browse normal sites on a mobile often involves zooming in and out as well as having to scroll both horizontally and vertically to read the content. A responsive design is much more user friendly.

 

[astutiumRob]

Anyone on the forums have experience of building websites for mobile?

Yes, and of creating small-screen friendly versions of existing sites.

 

[FunkyBears]

Surely a mobile website is a completely different beast to a website designed for PC use. I watched a great Google video on the subject and these were my conclusions.
Please feel free to add and tell me me where you think I'm going wrong. I've looked at many off the shelf solutions and none of them do it for me



• Understand that mobile sites and mobile landing pages should be optimised with the user experience at the forefront of the design process.
• Realise that aesthetics and design should be aligned with the wants and needs of the consumer.
• Realise customers have an immediate need.
• Design for thumb not mice.
• Keep the layout simple.
• Make sure content is viewable at arm's length.
• Design to prevent accidental clicks.
• Provide an action orientated experience.
• Make search easy.
• Make it easy to convert.
• Keep forms simple.
• Keep pinch and zoom to a minimum.
• Install auto detect so YOUR site knows it is being accessed by a mobile device.
• Ensure YOUR most relevant information is positioned at the top of the page.
• Make the navigation through the mobile site pages, effortless.
• The mobile site landing pages should be easily accessible with simple scroll and Tap to functionality.
• Use vertical scrolling.
• Present content in a single column.
• Make sure fonts are neither too small nor too large.
• Keep your content relevant and to the point with Strong Calls to Action.
• Make sure the titles are short and descriptive.
• Code YOUR Mobile site in HTML5 as it will help your site display properly on all platforms.
• Use Javascript (J2ME) and external stylesheets.
• Use separate CSS files for mobile and on screen rendering.
• Use schemas and rich snippets of micro data so that local searchers will find YOUR business in search engines.
• Use %s for sizes instead of pixels to help ensure that things scale down correctly.
• Hide items in the mobile CSS (cascading style sheets) or re-arrange items to make sure content isn't pushed too far down your mobile pages.
• Produce KML files for Google Maps Mobile.
• Install Google Analytics.
• Make sure you have a mobile site map.
• Encourage opt-in for Location-Based Services.
• Encourage opt-in for GPS.
• Include relevant info for mobile users. Things like phone, address and hours of business in the header and/or footer to ensure every page is local search friendly.
• Make phone numbers are tapable so users can effortlessly tap and call.
• Make sure buttons and links are large enough and are tap to go friendly.
• Use jump links to drive traffic down to content areas on your mobile site.
• Avoid Flash or other custom applications as not all phones will support all plug-ins.
• Understand device rotation is an important part of the mix as it allows mobile sites to be viewed in landscape and portrait modes.
• Keep to WC3 standards.
• Ensure your mobile landing pages are optimised for local search using Google Places and Google Maps.
• Ensure your keywords are optimised for local search.
• Use Google page speed tool.
• Use QR Codes as an enabler to get people to your mobile site.
• Use a QR Code system to track and trace user behaviour
• Use Adwords for mobile
• Encourage sharing on social networks.
• Test, Test and Test again so YOUR mobile landing pages are 100% user friendly, deliver a great customer experience and are compatible with all devices.

 

FunkyBears, the majority of those points are absolutely spot on and I'm glad you're steering clear of 'off the shelf' solutions. The point I was getting is that thanks to Responsive Web Design there's no need to design a mobile version of your site and have to mess around with all that auto-detect stuff. A responsive design will still cover all those points you listed but if anything will do it in a more sophisticated way.
To put it simply, having a responsive design is like having a mobile, tablet and desktop site in one.

You can read a bit more about it and take a look at some examples in this article; http://designmodo.com/responsive-design-examples/

The best way to see how it works is to open one of those sites on your desktop and play around with the size of your browser window, then you can watch how the layout responds.

 

[FunkyBears]

FunkyBears, the majority of those points are absolutely spot on and I'm glad you're steering clear of 'off the shelf' solutions. The point I was getting is that thanks to Responsive Web Design there's no need to design a mobile version of your site and have to mess around with all that auto-detect stuff. A responsive design will still cover all those points you listed but if anything will do it in a more sophisticated way.
To put it simply, having a responsive design is like having a mobile, tablet and desktop site in one.

You can read a bit more about it and take a look at some examples in this article; http://designmodo.com/responsive-design-examples/

The best way to see how it works is to open one of those sites on your desktop and play around with the size of your browser window, then you can watch how the layout responds.

Thanks again Sam I've sent you a PM

 

[kevin555]

Took a look at some of the sites that came up in the search results - alistapart is one of my old haunts.

I see what the sites are getting at but I'm not convinced that simply changing the width of the browser window is the solution with regards mobile design.

For wordy sites / blogs etc no problem - but image based e-commerce needs making sure links / buy buttons etc. work well on small screens and I'm not convinced that RSS is easily adopted using the exact same content.

My thoughts are that the content needs a redesign for mobile - to exclude periphery content and reduce navigation and perhaps increase profile of the search facility.

Either way, a redesign is required - either to make the current site work using RSS, or to make a new mobile site.

 

[altwebdesign]

I do, drop me a PM or call if you would like to discuss your options further.

 

[garyk]

Yep you need to deliver a completely different experience. That said browser detection and using a mobile site template is not rocket science.

Gary

 

[cmcp]

Been building responsive for a good while now, happy to answer any questions. No PMs, post all questions on the forum I'll be happy to answer them.