Development for a website used to mean thinking about compatibility for specific devices. Developing for the desktop experience is still pretty straight forward, since there are only a handful of desktop browsers that cover 98% of the market share. Mobile, however, is an entirely different scenario. With nearly 5,000 different mobile devices currently on the market, its not enough just to make sure the website is displayed properly on device X, Y and Z. We need to make sure the site looks good across all those devices. To accomplish this, we can rely on device size and screen resolution to give the user the most appropriate experience.
Instead of targeting specific devices, we design mobile experiences around device width. So no matter what type of device the user has, the site displays according to what size device they have. We typically think of three cases, mobile phone, tablet, and desktop. The first step is creating and developing a responsive design for mobile phones that ensures the user has a great experience on their handheld device, in either portrait or landscape mode. From there we develop around the tablet sized devices. Using CSS media queries, we target any device that falls between the large size mobile phones and the full desktop experience. The last step is to create the design for the desktop, full version of the site. Using this ‘mobile first’ approach, we are able to develop a user experience for each type of device, regardless of specific make and model.
A website’s mobile experience should be based on more than most common device types, it should be based on the most common device sizes. So regardless of type, the user see’s the experience that’s best formatted for their screen resolution. Of course, its important to allow them to be able to choose their experience as well, if they prefer a specific format. Using these techniques, we can make sure the user receives the responsive layout for the site that is most relevant to their screen resolution.