As more people rely on mobile devices to do their jobs, building websites and intranets with mobile-friendly responsive design could significantly improve productivity.
In the past, developers and user interface designers would build the full version of a site for the desktop environment, and then figure out ways to scale it down to create the mobile experience. Now, people are reconsidering that approach. With the popularity of smartphones, tablets and other mobile devices in the workplace, it makes more sense to build a basic yet full experience on a smaller resolution, and then enhance that experience for situations where users have more screen resolution available.
Here are three advantages of designing from a mobile-first, responsive-design perspective.
- More economical than creating specific mobile apps: One option is to create specific mobile apps for each different device type, but it takes a lot of work to keep building and updating these separate tools. With responsive design, you don’t have to think about smartphone users versus desktop users. Essentially, you’re creating a site that automatically presents your content the best way possible within the amount of space available.When you have a larger space to view the site, a larger image might be most effective, but when you load it at a smaller resolution you might want that image cropped into a smaller thumbnail version. For a good example of a responsive site, check out BostonGlobe.com. As you start resizing the browser window, you’ll see the design adjust. When you shrink the window, the content resizes and you start seeing a different flow in the presentation.
- Increases your organization’s mobile productivity: When you set out to create a responsive design, you end up tailoring the interface for types of users that rely on smart devices and tasks they’re likely to perform. Sales reps, for example, are likely to use mobile devices while on the road. To increase their productivity, focus on streamlining the tasks they need to accomplish from the road, versus tasks they are likely to tackle with a desktop or laptop. This helps ensure that the smaller-format versions of your responsive design aren’t just stripped down experiences.
- Helps prioritize content: When you start with a mobile-first perspective, it helps you think about what content and functionality is actually the most important. On mobile devices, the smaller screens and vertical presentation force you to make decisions about content hierarchy and cut out any extraneous information, instead of just filling up the available space. For example, when you open the application’s main page, what are the first, second and third things you see? Do these align with the three most important pieces of content? If not, you may need to rethink your design.
Responsive design is a great way to improve the user experience in SharePoint applications, such as a SharePoint intranet or client extranet. In SharePoint 2013, the “image rendition” tool allows you to create image templates and apply different renditions for the same image, so that users get the most appropriate rendition of the image for their screen environment. This functionality helps automate the task of creating different images for different screen sizes, making responsive design easier for content developers.
In the end, the site content and design need to work in a mobile setting before you take it to a desktop. Too many people take a half-baked desktop design and try to make it responsive, which usually ends up emphasizing the design flaws in the existing site.
Instead, start by doing a content inventory and figure out how your content should work in a mobile context. When you get to your desktop design later, it might not need to be radically different, but it’s better than trying to work backward to a responsive design.
Learn more about creating the right enterprise collaboration strategy for your organization by contacting Portal Solutions.
Contributor: Adam Krueger, Creative Director at Portal Solutions
