There are approximately 250 odd unique screen sizes in mobile itself in production (the smallest being a Nokia phone with 94×44 screen size). Add to this all the sizes available in desktops and laptops, why stop, include TV sizes too as people adopt to “smart”TV.
So where do you start, what size do you build the site for, how many sizes do you plan to test the site in?
Life was easier a couple of years back. The moment the statement is read- break the project into two- UI for desktop/laptop & UI for mobile devices. If the project is in SharePoint, then that translates to 2 sets of UI components, but the challenge still was in identifying and accurately redirecting the user to the appropriate set based on the device. Microsoft worked “hard” and have included the device channel feature in the latest release SharePoint 2013. Does that really solve the problem at hand.
Device Channel in simple term- when a user browses a SharePoint site from a mobile device, the mobile browser submits to the site an HTTP GET request that includes a user agent string. This string contains information about the type of device that is trying to access the site. Based on that device sub string, the device browser can be redirected to a specific master page view which will have its set of css which optimizes view for the user (additional reading). This takes care of the questions- where to start but we still need to plan and create master pages and device channels for the possible screen sizes. This is a very open ended scope. Sure you can do your analysis to identify the most popular sizes and identify the sizes specifically in scope of the project, but that means crappy experience for the select few (like me) who have not upgraded to the latest and greatest. The fact that there are new mobile devices releasing every month with different screen resolutions makes this approach good but not the best.
Whats a better approach, you ask, RESPONSIVE DESIGN.
Responsive Web Design (RWD) adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images,and CSS3 media queries and pushes a client-side solution presenting an entirely different page structure to different devices, with some original elements hidden or moved around. The key is to keep all elements size relative. Easier said than done in SharePoint, as you have to bring in the responsiveness to various components (navigation, ribbons, layouts…). Plus you have the main issue of rendering images in multiple sizes too.
How to make your life easier. Try below mentioned suggestions
- Use 3rd party front end framework that supports RWD e.g. Twitter Bootstrap, SimpleGrid, Zurb etc.
- Test the design and layout for various sizes using simulators like Responsinator, Adobe edge inspect
- Use responsive image rendition feature of SharePoint 2013.
- If you are not happy with the native feature, you can try 3rd party tools like adaptive images to help you with rescaling images for screen size.
If you need elaboration on any aspect of RWD or SharePoint 2013 Consulting, get in touch with us
