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
Responsive design considerations
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.