“Responsive Design” is the term used throughout the web community to describe how a page can both scale and change based on the screen size of the device on which it’s being viewed. The term comes from how your site responds to different sized devices. It’s extremely important for any website to utilize responsive design because anymore no fewer than 30% of everyone viewing a web page is doing so from a small screen mobile device. What your page displays on a 4” screen is going to be vastly different than what you display on 20” desktop screen, and different yet from what you display on a 10” tablet.
Before We Got Here: “Mobile Sites”
While responsive design is probably the single most important aspect of website design today, it simply didn’t exist as a concept only a few years ago when users had their desktop monitor and maybe a mobile device. And since viewing a site on a mobile device was so rare, many sites simply had a completely separate and different “mobile version” of their page that was presented to smaller screens. This is how ServiceNow’s main UI works today. When you visit a standard instance on a mobile device, the page you’re being presented is similar, but not the same page that is sent when you access the instance from a desktop browser.
Stave makes all our ServiceNow applications available to test for free in a sandbox instance. Notice the difference from viewing that instance from a desktop vs a mobile device:
They look like completely different sites, because technically they are.
How to Test If a Site is Responsive
- Simply change the size of a Chrome window while viewing a page. If the page’s outline changes as you make it more narrow, you have a responsive site.
That’s really all you need to do to determine if a website is responsive. It’s a great hack that simulates the different widths of screens on different devices, all from within your browser.
The Stave website is responsive. Here’s how it will look on the desktop, a tablet, and a phone in simulated Chrome windows:
ServiceNow’s main UI actually has some responsive elements that were introduced in the Geneva release. Here’s the Stave apps trial sandbox again. Notice that when we change the window size, the custom Homepage we built is responsive and scales appropriately, even if the rest of the UI does not.
That’s what a responsive site looks like to the viewer, but what is making these changes occur to the site, and what’s happening behind the scenes?
Welcome Twitter Bootstrap
In addition to their ubiquitous platform to deliver 140-character chunks of knowledge, Twitter has also gifted the world a web technology called, Bootstrap. In short, Bootstrap is a collection of helper code of JavaScript, HTML, and CSS that helps you build websites faster. One of the more-important elements is the concept of their 12-grid layout system.
Essentially, Bootstrap divides every webpage into 12 equal columns. It then defines for you how many columns are appropriate to fit on certain screen sizes, so for example all 12 columns will fit on a desktop monitor, but maybe only 2 will fit on an iPhone. Bootstrap then allows you to shrink and expand columns as it detects the width of the screen. Now, if you did the Chrome resizing experiment above, you saw this happen live, and you realized that Bootstrap is technically looking at the window size, not the device size (but since you can’t resize windows on your phones, it’s the same.) The columns that don’t fit, and the content inside them, can be resized, moved to a different layout position, or they can disappear entirely. Designers determine what happens for each site and configure that within Bootstrap. This is the core of responsive design.
What About ServiceNow End-User Portals?
ServiceNow has always offered a second web UI to access the platform; one that is intended as a simpler interface for users to engage with the business in a friendly way. These portals are customizable and many customers have branded and configured their own portals on the platform that expose all sorts of resources to their users. ServiceNow’s portal engine predates responsive design, but because of the flexible nature of the platform, you’re actually still in luck.
