The web design and development industry tells us that websites need to be created with mobile first. Start with your smartphone, designing for the mobile format, then move on up in platform size and scale to the desktop. At CommonPlaces, we have found success with both approaches: Desktop down to mobile, as well as mobile first.
One problem, two approaches
Taking the desktop first approach can be more difficult. Developers need to always consider the ramifications of sizing for mobile later on. Experience with mobile, therefore, is critical. We ask ourselves how this will look when sized down. While we've never encountered any insurmountable problems with funky widgets or complex drop down menus, we may have to alter the functionality in order to make everything more mobile friendly. The desktop version may have certain features within view, while mobile features are hidden, and vice versa. Too much of this can present a performance hit to the website, and needs to be balanced with Design and User Experience.
The project dictates which approach we'll take. It's important that we know our clients. Who are they trying to reach, and what specifically are their needs? It certainly pays to have knowledge of their buyer personas. As mobile devices increasingly become a part of our daily lives we want to cater to that need. However, for example, industrial pump manufacturers may have less of a demand for mobile devices such as smartphones, since their audience is primarily engineers using desktops at work. The user interface, therefore, is more important with the desktop version of their site.
We all have preconceived notions and opinions, and sometimes we have to convince a client on the necessity of investing in a responsive design. Someone might come to us and say that smartphones are a fad which will be replaced by something else, or that their website will only be accessed by a desktop at work because that's what they do. However, by pointing out that a glance at their analytics proves that 25% of their web traffic is coming from mobile devices, and that trend is likely to only increase, should convince them that responsive design is the way to go.
Mobile design presents two common challenges which perfectly illustrate what developers face when making a website responsive.
Ecommerce
Usability and site navigation on most ecommerce sites pose the same concerns in web design and development as any other website would. However, larger ecommerce sites with huge inventories, multiple shopping carts, and product menus that stretch out forever, offer unique challenges. Most products have thumbnails, which need to be displayed when you hover over them. When you design for mobile you need to change how that is being displayed. The Hover interaction needs to be carefully considered. Each category may require additional sub-categories. Clients need to be aware that you may need to introduce multiple clicks in order to display everything properly.
Scrolling
Scrolling menus always need to be considered. Devices handle this feature differently. Between Android and IOS, different Java script will create problems between the two types of devices. We've seen issues arise in swiping the two types of devices. They simply don't react the same way, so it's vital that you take the differences between the two devices into consideration. Mobile devices make long lists much easier, for example. You can scroll down as much as you want. It's the side swiping across that can create some headaches. Most plugins are optimized for IOS, from my experience, and can cause User Experience issues on Android.
Mobile devices have certain challenges. How will objects shrink down? Does proportion change? If there's text with the image, will you be able to read it on a smartphone? We may need to create a different mobile version of a client's website concept, in order to keep it responsive. All we ask is that we are given the chance to take our own look at a project, in order to provide the responsive design that we believe is crucial to any website's success.
Are you part of a web development team? What obsticles do you face in creating responsive websites? We'd appreciate your feedback.