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
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.