Your Business on the Big Screen!

November 20th, 2013 by Vincent Lai

Computer technology has come a long way over the years, and with each generation of increasing screen sizes, web designers everywhere have taken up the challenge to best take advantage and utilise this new screen real estate.
With some screen dimensions now topping out at 2560 pixels wide, it’s no wonder that the old 1024 pixel websites now look dated and unprofessional. An easy and aesthetically pleasing way to combat this issue without compromising on content is to introduce full screen or full bleed imagery.

Full bleed imagery has been used in the past by print designers, in magazines, brochures and newspapers. However, with the rising popularity of responsive websites, full bleed imagery is now being used on screens, and with great effect. Two great ways to use full bleed imagery include a full bleed background, or using a full screen width rotating banner.

The full bleed image background is useful for websites that wish to have an overarching image that sums up the feel of their whole website. With this concept, content would usually scroll back and forth over the background, leaving the image static and unmoving. To best use this style, the image must be uncluttered and have a definite theme, whether that be a panoramic photo, or a person modelling the latest product. Secondly, the image must allow for content. In some cases, if an inappropriate image is used, it will disturb the readability of the content, and you will subsequently lose users on the website. Make sure you have a defined contrast between the background and the foreground. This can be achieved in many ways; by changing the image to black and white, blurring the image, adding or decreasing the brightness of the image or even using box between the content and the background. Here’s an example of a website that uses the background element as the full bleed image:

The second option of using full-width imagery for rotating banners is more suited to corporate websites that want impact without being too flashy. The use of a full width rotating banner allows the website to showcase a variety of things as opposed to one singular theme. Whether it be your company values, or special deals that are available, a full width rotating banner never fails to grab the attention of your audience. The other advantage of using this method is that it allows the rest of your website to sit within the 1024 space without it looking old fashioned. Using a straight 1024 pixel layout will make your website look blocky, and less engaging. A wide spread image at the top draws the eye and attention of your audience, breaking the rigid structure, which then follows through, making the rest of the content easier to absorb. A good use of this style should give impact and simplicity to your website’s main message. A good idea for image selection for this purpose are images that have a wider angle, and preferably a space for a short message. Using portrait photos limits the amount of what is visible, and using something too cluttered will compete with the impact of the text you choose to place on top. Here’s an example of a website that uses the scroller as the full bleed image: toll transitions Defence Website

Either way, applying large scale, full screen imagery now has a place on the internet, as screens get larger and wider. Using up that screen real estate has never been more important in sending your message to your consumers and clients.

Vincent Lai

Facebooktwitterredditpinterestlinkedinmailby feather

2 Responses to “Your Business on the Big Screen!”

  1. Paul Says:

    I wonder how many “normal” users (as opposed to designers and web developers) actually operate their browsers in full-screen mode on large screens. I have not just one but two humungous wide screens attached to my computer for an extended desktop, but the purpose of having big screens is not to make everything big, it is to allow me to have several things open at once. So on one screen I have my email, Skype and other chat programs, all in the foreground at the same time because the screen is big enough for that. On the other screen I have my web browser and, for example, Word. Word is at a size so that I can see a single A4 page at 1:1 scale, and my browser is next to that taking up the rest of the screen. This means that actually my browser window is still only roughly 1100 pixels wide. If I maximise the browser window it is just awful. Who wants to look at a website that large? Who wants to work on anything at that scale, except designers who need to zoom in?
    I’m not criticising techniques to fill wider windows. I think it is a good idea to do it with some sort of bleed that works well no matter how wide the window. But I also think it is important to continue to make the actual content fit into a smaller space. For Mac users, at least, the standard effect of maximising a browser window is to go full-height but nowhere near full-width, and this makes complete sense to me.
    I’d be very interested to know how many other users of big screens work like this, and how many actually go full-screen with their browsers. Perhaps there is a split down the Windows/Mac fault line.

  2. Vincent Lai Says:

    It all depends on the user, their computer knowledge and their intentions when using a computer. A user with more advanced computer knowledge may choose to take advantage of larger screens when they are multitasking on projects or work. However, the average computer user who is browsing the internet for leisure may not have the need to do this, and will therefore most likely view websites in full screen especially when they are engaged in things like online shopping or viewing media online. All of this is based on screens that are roughly 1920px wide which is large enough for most applications and users. An average user may not require a screen as large as 2550px or wider and is usually reserved for those with more advanced or specific requirements.

    It is important as you say to make sure that content will fit inside the minimum width of 1024px which accommodate most screen sizes, including tablets. However, now with more innovations in responsive design, content can be arranged to fit to screen dimensions no matter the width or length be it large or small, which combats the issue of missing or out of frame content.

    There is also an inherent difference between PC and Mac users. Having used both, there are very subtle differences in the way that the OS deals with windows and frames. For example, in the Mac OS, it is possible to scroll in the nonactive window, meaning multitasking with multiple windows on a Mac is more emphasized than on PC. However, on a PC, the alt+tab function cycles through “windows” as opposed to “applications” which makes it easier to flick between full paged tasks, even if they are from the same program. This is especially useful in browsers. For example if you have multiple firefox windows open, on a PC it will allow you to flicker between both, but on Mac it will cycle between your open programs instead, lumping the 2 browser windows together. I recognize that there is a shortcut to cycling through individual tabs in any one program, however the ability to move between different windows in multiple programs including multiple windows in a singular program has therefore been separated into 2 different functions, hence why it is more likely a user will simply open up and simply shrink multiple windows until they all fit on the same screen.

    If you take a quick look at our Contact Point Website, you can see how we have incorporated a full bleed background image which takes away from the page being too stark and plain. When you resize the website, the responsive design kicks in, the content readjusts itself. In this application, the full bleed image achieves its purpose when the page has been expanded, and yet does not take away from the content when screen dimension is reduced.

Leave a Reply

Subscribe to our monthly

Contactpoint Email News

Our enews is sent out approximately monthly, and contains information on latest digital technologies, and how these can be used to help your organisation grow.

To subscribe, simply fill in your details below: