Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm working on redesigning a 90's ecom website - the goal is to make it mobile phone/tablet friendly and we have decided to go the mobile first way because the website has more mobile visitors. My first deliverable is a set of wireframes. Are there any best practices resources that I can refer to before I get started. Most of the info available online highlight the importance of having a mobile friendly website or delves a lot into css. I would appreciate any inputs on how I can get started.

share|improve this question
1  
Hi Tara, As it stands now the question is quite broad. Maybe you can tell what you've been looking at so far and ask a bit more specific? –  greenforest Sep 17 '13 at 21:18
    
Thanks for your response. I'm looking for some guidance on <b> how <b> to start the design process for the mobile website. Where do I begin? What do I look for? If I need to design for small, medium, large screens at the same time. How do I decide what's visible/hidden in each screen? In the discussion with the devs, what should I be concerned about? I'm not sure if this is detailed enough. –  Tara Sep 17 '13 at 22:39
    
"Where do I begin?" = determine the objectives of the site. Design from there. –  DA01 Sep 18 '13 at 0:18
    
There is no room for unnecessary things on mobile so start to strip away until it hurts, and then strip away some more. –  kontur Sep 18 '13 at 19:54
    
There are best practices out there, but you have to decide what applies to your particular project. You can either start doing some sketches until you hit specific problems, or you can look at some design considerations and base your sketches on that. There is no right or wrong way to start, it is just based on how much you know already, and how much more you need to find out. –  Michael Lai Sep 18 '13 at 22:29
add comment

2 Answers 2

up vote 3 down vote accepted

There are so many considerations, and if you looked up any articles on responsive versus adaptive design for the web/mobile you will come across most of the common ones. I have listed some here to get you started (sorry I don't have the exact references):

Mobile device considerations

  • Device orientation (optimized for each orientation or consistent look and feel)
  • Display resolution (creating high detailed icons and graphics for retina display)
  • Display dimension (adaptive or responsive design to cater for variations)
  • Operating system (backwards compatibility and version control)
  • Touch and gesture interactions (optimized for OS and device or consistent look and feel)

Responsive design considerations

  • What grid framework suits the content to be displayed?

  • Impact of using media query to determine device type

  • Designing scalable images and implementing them in the design

  • Maximum and minimum display widths supported

  • Are there logical breakpoints independent of physical constraints?

  • What are the key breakpoints when layout design need to change?

  • What do major templates look like at each breakpoint?

  • What do the header and footer look like?

  • Will content vary at different sizes/resolutions?

  • Navigation strategy at smaller display sizes

  • Table structure and content presentation at smaller display sizes

  • Browser compatibility issues

CSS considerations

  • Browser: Is the look and feel consistent and usable with the most current and popular browsers? Is it usable on older versions of various browsers?

  • Platform: Does the design work on PC, Mac and Linux machines?

  • Device: Does the design adapt to low-resolution and mobile devices that have full resolution?

  • Screen resolution: Does the design work for various window widths? Does the design does adapt to extremely narrow or wide viewports (e.g. by using the min-width and max-width properties)?

  • Font sizes: Does the design account for different default font sizes, and when the font size is changed?

  • Color: Does the design make sense and is the content readable in black and white? Does it work for color blind users or people who cannot distinguish low contrast details?

  • JavaScript presence: How will the page work without JavaScript?

  • Image presence: Is the content comprehensible without images (either background or foreground)?

  • Assistive technology: Is the page screen reader friendly? Is control/navigation possible with no mouse?

Some responsive design related articles:

Tools and Resources:

Let me know if you find any of it useful.

share|improve this answer
    
Thanks. This is very helpful. –  Tara Sep 18 '13 at 16:15
    
The question is admittedly broad, but this answer is about as useful as searching online 'mobile first'; it doesn't give an answer, but links to possible answers. –  kontur Sep 18 '13 at 19:52
add comment

Worth looking at prototyping tools such as Axure or Proto.io which support mobile quite well. The latest beta of Axure 7 supports basic responsive layouts for mobile also.

Also worth keeping in mind, particularly with a mobile first solution is to keep it simple, keep the customer focused on one task at a time, and make tap zones large (7mm is a good guide as it's the typical width of a humour finger tap and isn't dependent on resolution). Also, allowing for those larger tap zones will force the design to simplify - and will make itself more amenable to porting, particularly to lower resolution Androids.

Before getting too caught up in responsive (or indeed more sophisticated adaptive design), it's worth asking whether responsive design is applicable for the user. Is the user actually performing the same tasks in a mobile context to what they're doing online? Nowadays it's better to take a multi-channel approach to modelling user behaviour and designing online and mobile offerings to compliment each other. It's worth looking at diary studies / qualitative testing etc to find out what it is that customers want to do on mobile ... and "are there other things that they'd expect to do online" ... this might help frame the conversation when discovering user needs. This is far more important to the success of the product than worrying initially too much about device compatibility etc - those discussions will come later.

With respect to creating "high detailed icons" - that's now becoming unfashionable particularly with the launch of iOS7 ... skeuomorphism is a thing of the past ... thing flat and simple. Also, this trend is also the norm / expected for Windows mobile and is also becoming increasingly common on Android devices also.

Other considerations include whether the mobile solution will be an app, a webapp, a shell-app - e.g. an app housing a web solution etc. A webapp, with a shell-app for appstore presence may be a good approach depending on the nature of the product.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.