Evangelizing Mainframe
Print Email

Hamburgers, Ghosts and Infinite Space

I haven’t written about website design or code for a while now and things have changed hugely in the past three years. So I thought I’d put together some thoughts just to catch up.

I can remember, around 2009, designing Web pages that were no more than 600 pixels wide, so that people with smaller older screens would be able to read the important information these mainframe-using companies were giving them. I also had to create numerous separate pages so that the information didn’t go too far down the page—‘below the fold’ as we used to say in the days before everyone got used to scrolling down-and-down on their smartphones.

Now, I design pages that spread all the way across the page, no matter how big the page is going to appear on the device looking at it. Responsive websites work on computer screens, smartphones and tablets. You simply design once and cater for all the device sizes in one go.

Responsive Menu

The obvious problem with this is the menu that usually sits at the top of the page. As the page size reduces, the menu items get closer together and then start wrapping around making the layout look really rubbish. So, what’s the solution? It’s the hamburger icon. If you’re not familiar with the name, the hamburger icon is three short straight lines, one above the other—metaphorically representing the top bun, the burger and the bottom bun.

Typically, when you click on the hamburger, the menu appears and drops down over the page. Many sites are now hiding the menu at the side of the page, so when you click on the hamburger, the menu appears from the left or right side of the screen and slides across. Other alternatives are available, for example some sites are using sticky menus; these stay in position, no matter how much scrolling through the site takes place.

There are estimates quoted that more than half of all website traffic now comes from phones and tablets. That means that your page length can be quite long because users are happy to scroll down-and-down the page to find the information they want (and not too bothered about not clicking).

The other advantage of having a long scrolling page is that you can make the landing page look fantastic. You can use an impressive photo or some video as the background, and then put very few words in a giant font on top. This makes the landing page look like a movie or TV advert (if you’re using video), or like a book or catalogue (if you’re using a graphic). For the technically minded, the HTML5 <canvas> element is generally used for these visual effects. A canvas is a rectangular area that, by default, has no border and no content. By using JavaScript, the canvas area can be filled in many different ways. You can extend the idea by using scrolling or mouse movements to animate elements on the page. An interesting twist is to break the front page up into two areas—equally important, but showing different sides of what a company is about.


Another interesting take on Web page design with multiple platforms is the concept of cards. Cards are, in effect, packages of interactive information, presented in the shape of a playing card or rectangle. They provide information quickly in a condensed format, and they provide opportunities for engagement, e.g., social media likes or posts. One of my favorite sites for using this kind of design is the Ahh Coca Cola site. And, of course, with designs like this, you can fade-in content and you can scroll content—so you’re delivering more information to a limited amount of real estate—on the home screen.

Ghost Buttons

I like ghost buttons because they are not too obvious on a page (affecting the overall look and feel), but they do provide an easy way to navigate round a site. So what is a ghost button? Basically, it is a transparent button with a thin line and some text in the middle (in a sans-serif font). They’re not usually calls to action, just helpful navigation.

Focus on Modern Design

There are lots of other things that I could talk about, such as using left or right scrolling as ways of changing a large part of the home screen and providing lot more information to potential clients. There’s the use of modern colors that make a page stand out more from older pages. There’s on-screen animation, where parts of the page are animated on mouse over or after an event.

The days of the proscenium arch with a small space for content are long gone. The days of top menu, large slider and then two or three-column content are numbered. For any site using a mainframe, you need to make sure that what your users are seeing when they log on to use your Web services is dynamic and as responsive as any vendor’s site, because that is what people will be comparing it with.

Even if you are a bank or similar mainframe-using business that wants to ensure you have a very professional, trustworthy-looking website (as opposed to a more fun site), there’s no need to look out of date, you perhaps just want to take a slightly less funky approach.

Trevor Eddolls is CEO at iTech-Ed Ltd, an IT consultancy. A popular speaker and blogger, he currently chairs the Virtual IMS and Virtual CICS user groups. He’s editorial director for the Arcati Mainframe Yearbook, and for many years edited Xephon’s Update publications.

Posted: 6/16/2015 12:00:04 AM by Trevor Eddolls

Print Email

Join Now!