Rich Walker Written by

Big Images, Small Screens

Posted on 12th March, 2013 in Development

With the progression in responsive design and development, design trends have been moving towards larger imagery (see Spotify or Design Week Portland) as resizing images based on a browser’s width is fairly common practice. If you’re on a mobile device you’ll get a squished version of the full size image. Happy days. Obviously there are the some potential performance issues based around this but I’ll not go into this just now.

The issue we’re currently discussing here at Cargo is how these big, tall images look on smaller screens and how they affect the location of the content. Essentially, where is the end of the screen when the page is first loaded…yup, that’s right, ‘the fold’ (we can hear the silence as you read this).

This isn’t something new to be thinking about, but with changes in supported markup and design trends some processes can be revisited and revised.

There’s a great old article on Boagworld from 2011 which explains how media queries can help get all the content you want to appear above ‘the fold’. Two years on and I refer back to this article, but does it still hold up?
With the sheer volume of different sized tablets and mobiles that are out now, the number of media queries required to ensure your design looks great across as many resolutions as possible can go up without proper planning. With the trend in big imagery, detecting the height of your browser or device could be quite important depending on who is viewing your site on what screen size.

Viewing a website on a 27″ iMac means you can fit tall and wide images on the screen as well as the start of the page’s content, whereas viewing the same page on a 1280×768 laptop in IE8 with the usual toolbars and a Yahoo! search bar really limits the height available to utilise in the design and forces the user to scroll to get to the content.
(You could argue that this is a design issue rather than a coding issue, however, but as a developer I like to make sure I have a work around for any scenario.)

If we are redesigning, we often spend a good amount of time ahead of any design or wireframing looking through historical analytics data in order to determine how users are viewing a clients site. This gives us a good steer on the platforms and sizes we need to pay good attention to.

Scrolling is a natural reaction for me when I land on a website, and is to an extent for a large number of people, but do users want to scroll?

The current UK Spotify website is an example of a really nice looking page that works well across a range of screen sizes but isn’t immediately obvious that you can scroll to see more content. This is in part due to the initial landing page where a video plays in the background and then this style flows through to the inner content pages.
The question we are asking ourselves and clients alike is this : Should we account for every possible device size – short, tall, wide, thin in order to present information correctly? Or, should we accept that users are happy to scroll?
Do you automatically scroll when you visit a website or do you bounce off straight away if you can’t see a clear call to action when the page loads? Let us know what you think.

The issue we’re currently discussing here at Cargo is how these big, tall images look on smaller screens and how they affect the location of the content.

Back to Blog

#