Blog

Considering Responsive Web Design When Posting Content to Your Utility Website

In printed media, you know the exact size and shape of the document you are designing. It doesn’t change and you can depend on it to be the same for every viewer of your document. Every copy of your poster is the same size. Every copy of your newsletter is essentially an exact replica.

The web is not print

Web pages used to be more like this. When the web first emerged in the 90s, it was universally viewed on desktop style screens — either a CRT screen on a desk or a flat laptop screen. Screen sizes and resolutions tended to fall within a small range, allowing web developers in those days to design sites with essentially a fixed size and layout.

Things began to change in the 2000s. Screen sizes and resolutions began to diversify as larger screens became more common. Mobile devices with web browsers started to hit the market. Web designers could no longer depend on their document “canvas” being roughly the same size for each visitor.

Even as screens grew larger, this offered people the choice to resize their browser window and view it side by side with another app instead of taking up nearly the whole screen with web browser, as tended to be the case when screens were smaller on average. This all created the need for a more flexible approach as the size of screens or browser windows visiting sites continued to diversify.

The web browser as the interpreter

While web pages were significantly limited in design and layout in the beginning, they have always offered the advantage of a certain level of abstraction.

A printed material is static. It is simply an image. There is no adjustment. There is no ability to dynamically adapt.

On the other hand, web pages have always been interpreted. Pages are constructed out of coding languages called HTML, CSS, and JavaScript. Web browsers are the software website visitors use to receive this written language (behind the scenes) and turn it into a visual.

This means the visual appearance of a web page is dynamically generated, allowing it to appear differently under different conditions.

For example, in the past there was significant inconsistency in how different web browser software displayed pages because browser makers didn’t strictly follow web standards. Fortunately, things have come a long way and modern browsers give remarkably consistent results to each other. These days, a difference in appearance of a website between different devices and browsers is down to one primary factor: the screen size of a device or of the browser window.

Getting flexible

The need for website layouts to adjust gracefully and intentionally to the window size of the web browser they were being viewed on exploded following the iPhone’s introduction in 2007. People quickly started to have the expectation of effectively browsing essentially any website from their mobile phone.

At the start of this period, many websites had no accommodations for adapting to a screen that was only three and a half inches across.

You would often load a website and receive a layout that looked like a desktop style layout, just scaled down greatly. You practically needed a magnifying glass to read the page like this. The work around was a lot of swiping and pinching to pan around and zoom into the page. Suffice to say it was not a great experience, although novel at the time.

Today, visits from mobile phones often make up around 50% of total visits to our clients’ websites, making it incredibly important for our websites to be first class citizens on mobile web browsers. This is doubly important when considering that mobile visits to your website considerably increase if there is an outage in your service territory. It’s key for the website to be easy to use on a mobile device for these visits that are driven by people seeking information about the outage.

Just like most websites today, we use responsive design techniques to adapt the layout of the website depending on your screen size. On a desktop site, you might see a large column of page content and a sidebar menu on the side. On a mobile phone, you would likely see that sidebar menu instead at the bottom of the page, below the content

One of our demo sites showing a page on a desktop screen.

 

One of our demo sites showing a page on a desktop screen.

So what do I need to do?

Just as the structured layout of the website can’t count on a desktop sized screen, neither can individual pieces of content. For example, if a promotional banner is designed with a desktop screen size and landscape orientation in mind, it will be scaled down significantly on a small, portrait orientation mobile phone, making the graphical elements and/or text in the promotional banner nearly impossible to discern for many viewers.

A large promotion banner image with text inside the image.
The same promotional image on a mobile phone screen. In this screenshot several mobile screens heights are stitched together to give you a view of more of the page. The large promotional image is scaled down on the mobile phone. It does not account for the layout of the mobile screen and some text is too small to comfortably read.

One of the key things to think about in a responsive web design is that text on the web page is not in a fixed size or space. Changes in browser size will change how the text is laid out. For example, an article that might appear to have 50 moderate length lines of text on a desktop screen would have the same text appear on several times that many lines on a mobile screen, each of them much shorter.

It’s important for website content to be adaptable to different screen sizes.

This is one of the reasons we offer our suite of Web Apps standard with each new website. These provide a standardized way to input text information and decorative images and then create web pages out of this content. This essentially allows for a separation of concerns. You think about what to input, we think about how to output that structured data in a way that is consistent and looks great at all screen sizes.

Flexibility and practicality

The web is not at a fixed visual size. Let’s learn to be okay with that and even celebrate the opportunity to cater to a diversity of needs. Remember — your web page is displayed flexibly. Avoid creating graphics or other content that relies on a large screen size.

Taking responsive web design into mind helps you align with our STAR Standard. Keeping your content as basic, flexible, standard text on a web page allows it to be:

  • Searchable: can be seen be search engines and the internal site search tool included with your utility website.
  • Translatable: can be read by an automated translation tool and translated on demand.
  • Accessible: can be seen and read out loud by screen reading software to assist visually impaired users to see the content. Also allows for the text size to be easily increased by web browser zoom settings while retaining a crisp appearance.
  • Responsive: allows text to “reflow” at different browser sizes (see the comments about line length) instead of being stuck in a rigid layout.
The same information from the promo graphic above is laid out as text on the webpage and a complimentary graphic.

 

On mobile, this text based layout for the promotional content scales down and is now readable. In this screenshot several mobile screens heights are stitched together to give you a view of more of the page.

Because we are dealing with a canvas we don’t control, it’s best to accept that your content can’t be as absolutely laid out as a traditional graphically designed printed material.

By accepting the trade off of a lack of absolute design control with your website content, you can quickly deploy your content to your utility website using the tools we provide in our Powerful platform.

That’s not to say that web technologies aren’t capable of very complex, yet flexible layouts that can still capture the feel of a traditional graphically designed piece of content. This simply requires technical web design and graphic design skills to implement this type of complex design.

If you have a marketing campaign or similar that needs a totally custom page layout on your Powerful utility website while still adhering to responsive web design principles, get in touch with support@powerfulweb.com and we can discuss your needs. The trade off is that this will naturally require more time and cost more to develop than using the standard tools available on your Powerful website.

We provide a system built on top of WordPress with our custom suite of apps to enable you to easily post content in various structured / predesigned ways that meet the needs of the cooperative utility industry. We are working all the time to consider improvements to these tools or choosing new ones to build out.

These tools allow you to get your content up on your website quickly and easily without any extra expense.

The more you can stick to the structure and tools that already exist to get out your messages, the faster and less costly it will be.