Roughly half, if not more, of your website’s traffic is likely to be on devices other than desktops or laptops, such as smartphones or tablets.
Your Social Pinpoint site is built on responsive web design principles. Responsive web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. That means as the user switches from their laptop to their iPad, the website they’re viewing should automatically switch to accommodate for resolution, image size, etc.
This eliminates the need for a different design and development phase for each new gadget on the market, and it’s why websites often look quite different on your phone to how they look on your computer. Responsive web design means that when you design a page on Social Pinpoint, what you see on your computer screen is not necessarily what all your users will see.
For instance, your image banner will look different on a mobile screen due to the different orientation, and users won’t see the same image details as desktop users.
Common differences - desktop vs. mobile
If you are using the common right sidebar template, that entire sidebar will reorganize itself under the main body content area. This means content which is sitting at the top right-hand side of your computer screen will be moved right down to the bottom of the page so that it is sitting under the main body. If you have a long main body area, this means mobile users could miss this content, unless they scroll to the bottom.
Example - project page on a laptop computer.
Tabs will appear differently on mobile or tablets. If more than two or three tabs have been created, they will need to be scrolled from left to right on a mobile device in order to be viewed. If a tab has a long heading, it may obscure other tabs, and the user may not have any way of knowing that those other tabs are there, meaning they won’t scroll, and much of your content may never be seen.
⚠️ Mobile devices often run on limited data plans. If you are using high-definition imagery that has not been optimized for the web, or are posting large documents and PDFs, mobile users may not be able to load pages properly, and certainly won’t be able to access those large documents. This can result in unsightly pages that don’t work properly, and crucial information being out of reach.
How to optimize your pages for all devices
- Select images for all banner orientations - when selecting an image for your banner, choose something that will look great on mobile as well as desktop. That generally means not using images with words in them that will be cut off or won’t make sense in a different orientation (and are also not accessible), and not choosing images where all the detail is on one side of the image.
- Use mobile preview - when reviewing your page layout in draft, always refer to the mobile preview. This is a feature in your page's settings that allows you to preview your page within a mockup of a real smartphone or iPad model. This allows you to see exactly how your page will appear to mobile users, allowing you to catch potential issues early and address them and optimize your layout for mobile users.
- Get to know your templates - mobile preview will help you with this. Before you even start adding content to your page, you should have a page plan. This is a document where you have laid out all of your content, detailed which tools you intend to use and in what order and/or layout. This means when you come to adding tools to your page, you already have everything laid out and it is merely a case of copying and pasting onto the page, adding assets like images and configuring your tools. By developing an understanding of how your different templates behave on mobile devices (particularly the right sidebar template), you will develop better page plans and anticipate the various visual issues your page's responsiveness will throw at you.
- Limit your tabs - try not to use more than two or three tabs and keep their headings short and sweet. In fact, ask yourself: are tabs the right tool for the job? Would an accordion look better? Would this content look better on project sub-pages, tied together with an attractive feature grid for navigation? You’re not bound to just one page, so explore your options.
- Optimize files and images - this is an elementary point mentioned above, but it bears repeating. For fast loading pages that look great on all devices, keep your images to 72dpi (web resolution) and no more than 2500px wide. In the case of most images, this will be larger than necessary. For documents and PDFs, aim for less than 2MB. However, as a guiding principle, try not to lock all your information up in documents and PDFs. They are not web-friendly and they certainly aren’t mobile-friendly.
Rather, you should always try to be pulling all your key information out of these documents and representing it directly on the page. Social Pinpoint has a wealth of content tools that are perfect for communicating the content of your publications in rich and engaging ways, so make use of them and give your users an experience that leaves them better informed, engaged and glad they visited your site. Unlocking information from your publications and putting it on the page is also much better accessibility-wise.