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.
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
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?
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.
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.