Discover how groov View, a simple, user-friendly HMI building tool, makes responsive web design easy.

I’ve had the line “Don’t it always seem to go, you don’t know what you’ve got till it's gone” from Joni Mitchell’s 1970 hit Big Yellow Taxi rolling around in my head the past few weeks.

I've been working on building web pages for a personal project I will use on my PC and my smartphone, so they must be responsive.

Because I’ve been working with groov View for so long, I’d forgotten just how really, really hard it is to use standard web design tools to build responsive web pages with graphical elements. There is so much HTML and CSS development required to get a single webpage to display nicely on both a PC-sized screen and a smartphone-sized screen (and everything in between).

With groov View, you don’t have to write a single line of code—it's all just drag and drop!

I’ve been building demo and production screens in groov View for so many years and never once needed to stop and think, “Is this page for a smartphone or a 70-inch TV in a factory?” I’ve never once needed to consider what HTML or CSS code the browser or server will use to "automagically" size the content to fit the screen on which it's being viewed.

Our software engineers have baked many powerful features into groov View to enable frictionless responsiveness, so it is hard to call out just one of them to the forefront. That said, I am leaning toward the fact that you're building two distinct views at once in groov View. They are Desktop & Tablet and Handheld.

They are for exactly their namesakes. The web browser running on the client simply picks which of the two views to use based on the browser’s screen size. You can sometimes see this in action on larger smartphone devices when you rotate the screen between portrait and landscape orientation.

You have a few different methods to build responsive pages, but let's look at just two: 

Off Canvas—For small screen sizes, you can move less useful objects off the canvas (into the stash area). Hiding them saves trying to fit everything on the smaller screen, which usually means lots of vertical scrolling.

Fluid Design—groov View makes powerful use of this method and will smoothly resize all the objects on the webpage, so it looks great no matter what device the web browser is running on. SVG for the win here.

Let’s examine these methods and show how spoiled I am, along with other groov View users.

By the way, if you want to see the turbine page I am referring to here in this blog, log into demo.groov.com with the following credentials: username: trial, password: opto22.

In this screenshot, the red box highlights the top part of a typical stash area.

Off Canvas. The stash area is on the right of every groov View page, visible only when you are in Build mode, and its use is exactly as per its name. You stash any elements you don’t want to show on that screen size view. Everything in the dotted stash area is simply not displayed to the end-user when they interact with that web page in View mode.

The stash area is there for both views, so I can select exactly which gadgets are shown to the operator for any size device. In this case, I decided that the mobile user did not need to see the PLC Data Trend or the station number, so I just moved them off to the side, and thus stashed them.

My tip here is mobile first. Start your design process with the smaller “Handheld” screen. What critical graphical elements must be on this small screen to monitor and control your process? What order, top to bottom, do they need to be in?

Once you have those locked in, you can add the nice-to-have elements (or gadgets) that help flesh out the bigger picture when you're in front of a larger browser window.

Reminder: You can use the front display of the groov EPIC to view any mobile page in your groov View project. This is a compelling feature that a LOT of customers use to great effect.

Fluid Design. groov View uses SVG (scalable vector graphics) extensively. As such, every element on the screen just seamlessly grows and shrinks with zero pixelation! iPhones with retina display resolution, to large 70-inch LED TVs/monitors, and everything else.

I started at full-screen width on my 4K monitor to make the animated GIF below and resized the browser to a smartphone-sized box.

If you missed the gif the first time, refresh this blog webpage to see it play again—it plays twice and then stops.

The compressed gif is a bit jerky, but you get the idea. Every single object—from the text objects to the turbine image to the trend to the live camera view—scales smoothly for the different browser viewport sizes. And remember, I did not have to write a single CSS section to make any of this happen!

Once the viewport narrows, the browser running on the client switches and shows the Handheld view cleanly, just as I built the page to be viewed. There are no surprises with squashed or overlapping page elements.

My next tip is to check out the free Opto22 SVG library and use SVG images in your build process wherever possible.

Responsiveness reduces errors

Having the same gadget look and feel between the two main screen views reduces operator training time and mistakes when switching between devices. It also saves the builder time from constantly thinking about juggling graphical elements. Just drag and drop each to put them where needed, connect them to the device tags, and you're done.

Sure, it takes some up-front time to learn how to lay out your project; don’t be afraid to experiment and get feedback from your operators. Like any new skill with any tool, it will reward those who put the time and effort into learning its strengths and weaknesses.

Responsiveness ROI

Lastly, our customers have found that building responsive web pages with groov View lowers development costs over the application's lifetime. In 2-3 years, when a new display technology comes out, or foldable cell phones become the norm, groov View will fluidly resize to fit with no changes.

If an operator upgrades their laptop, tablet, or phone, no redesign will be required; just open the browser on the new device and pick up where they left off.

In my case, the pages I built on demo.groov.com were created some years ago, and they still look great on today's devices. Since day one, I have not had to spend any time rebuilding any of them.

So if you want to get up and running with groov View, you have two ways:

• It comes free of charge built into every groov EPIC. Just navigate to its menu and get building.
• If you want to test or run it on a Windows PC, download the groov Server for Windows free trial and get started. It's a fully featured version, but times out after 2 hours. No problem, You can restart it manually indefinitely. If you like it, buy a license, which will run as long as needed.

It’s really true: When I had to build some responsive pages on a platform that wasn’t groov View, I didn’t realize what I had until it was gone!

Till next time.

Cheers Mate,
-Ben