Here at TCS, we are so committed to quickly and cost effectively developing custom applications for our clients that we developed our own UX Accelerator. Our developers use it in combination with Salesforce to deliver robust apps to our clients. Creating a custom application without tools like Lightening or the TCS UX Accelerator is more difficult. But a custom user experience is still critical. Luckily, there are techniques your developers can use to simplify the process when creating a custom app in Salesforce.
Adopt Responsive UX: The New Mobile Norm
Your application must take a “mobile-first” approach. More people are using mobile devices for day-to-day tasks that they would have historically done via a desktop computer. Pew Research explains, “64% of American adults now own a smartphone of some kind, and 10% of Americans who own a smartphone do not have any other form of high-speed Internet access at home beyond their phone’s data plan.”
A responsive web design approach uses a framework that “responds” and scales your application based on the resolution of a user’s device. Typically, a responsive design serves the same HTML files to every device: desktops, tablets, and smartphones. This creates a single code base that needs to be maintained and, therefore, reduces development time and maintenance. Since responsive design is only meant to give users the optimum viewing experience based on the device they are using, the application should still have full functionality and content available on all devices.
Select a Responsive Framework
There are several HTML5 responsive frameworks, like Twitter Bootstrap and Foundation. All of the frameworks do basically the same thing, but they are slightly different with their unique benefits, preconfigured widgets and components. Review and compare the top 10 responsive frameworks.
Set the Stage in Visualforce
Once you choose the framework that best fits your product, the next step is to ensure that you set the stage in your Visualforce page. Depending on how you want the application to display, i.e., with or without the Salesforce header and tabular navigation, you need to be sure everything functions correctly and does not conflict with standard Salesforce elements. Declaring the Apex attributes sets the initial canvas of what Salesforce displays. For example, if you want your application to display under the standard Salesforce tabs, then you’ll want to be sure you set the showHeaders=“true” and possibly keep the standard sidebar visible.
<apex:page title=”Page name” sidebar=”true” showHeader=”true” cache=”false” standardStylesheets=”true” docType=”html-5.0″>
On the other hand, if you want to have an entirely custom look for an application and have no mention of Salesforce, then set sidebar=”false” showHeader=”false” standardStylesheets=”false” and your application will load and look like it’s completely independent, while still leveraging Salesforce’s functionality on the backend. I normally set standardStylesheets=”false” in all instances while developing a custom application, but you can play with all the attributes to see the differences and what works best for you. It is also important that the viewport is set correctly, so browsers render the application based on the device’s resolution. Think about the last time you had to view a desktop version of a website on a smartphone. It forced you to zoom to read or view content– not an optimal mobile experience.
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1/>
Please plan on joining me at Dreamforce’15, on September 15, from 11:00 – 11:40 a.m. in our session: Why Your Next Customer (and Employee) App Should Be on Salesforce. I look forward to your comments and questions here ahead of the conference and encourage you to join the conversation on Twitter at @TCS_EntCloud.