Advice for creating a fluid and responsive graphic

Question

So I'm creating an entirely responsive website, with the aim of using as few media queries and magic numbers as possible. I've found after a number of attempts, that using the content to create the layout is by far the best course of action.

My client requested an image slideshow/carousel to be prominently visible on the homepage, and possibly all main pages. I have created a layout that works and they're happy with it. You can view it here.

Now I have a new challenge, how do I create an eye-catching slideshow, that responds to it's medium, and looks good? Let me expand..

I have few constraints, which is more of a burden than a relief in this case.

• The image must be 400px in height.
• The width can be anything from 300px - 2000px.
• I can create a few layers, depending on their detail, that can be moved by the webpage itself to respond to the screen size.
• The images and design are likely to stay the same for a long time, whilst the text will change fairly often.

So what I'm currently thinking and attempting is:

Use a background image with a direct link to the subject and one or two interesting and relevant clip-art type pictures that can be floated around depending on the screen size.

Then allow the text to position itself, with the help of margins/padding and media queries.

At the time of this edit, I have taken the easy, safe and boring option by using wide, obvious photos.

I am looking for advice on the approach to take when tasked with creating graphics that respond to the medium they're displayed on.

Original questions (not so) relevant to this:

Would a one colour, simple gradient or very smooth background be better than a repeating pattern or one with detail?

How can I create a repeating pattern that works with and is relevant to the subject and design?

If I use a floatable foreground image, do you think it has to look realistic, as in not clip art?

Better topics of consideration:

• From a design point-of-view (I know the technical side), what conditions can I use to decide how to scale the text up/down, and still look good? ie. should the text be no larger than a certain size depending on the width of its container?
• What sort of images are best for a background with a highly varying width? My guess is images that have a single anchor point of interest with some unimportant detail throughout the rest of the image
• What are the most important things to consider regarding the unfixed/floating nature of foreground images and text? (white space, wrapping and anything else?)

Any blog posts, articles or reports relevant to this are welcome and greatly appreciated.

Answer 1

Just this morning Smashing Magazine featured an article about focusing on part of an image when scaling for mobile devices: Choosing a Responsive Image Solution (scroll down to the section, "The Art Direction Problem"). With the photo of the road on your website, you'd want to make sure to show the road, as opposed to the trees, when scaling down because the road reinforces the idea of "We're on our way."

Would a one colour, simple gradient or very smooth background be better than a repeating pattern or one with detail?

It depends on the other elements on the page. If you're using foreground images, sticking to a single color background that does not compete with the photos will let the eye naturally focus on the foreground images.

How can I create a repeating pattern that works with and is relevant to the subject and design?

A repeating pattern of a box would reinforce the concept of moving and storage.

If I use a floatable foreground image, do you think it has to look realistic, as in not clip art?

Clip art can be tricky. There are some well designed vector images and rastor illustrations that would qualify as clip art but are still tastefully done. If you used one in SVG format it would scale well on retina display devices. Just make sure that the image you pick is good and consistent with the mood you are creating. I can imagine a beautiful drawing of boxes that would look good, but I can also imagine poor quality clip art that would look bad. If you're unsure, photos are usually a safe choice.

From a design point-of-view (I know the technical side), what conditions can I use to decide how to scale the text up/down, and still look good? ie. should the text be no larger than a certain size depending on the width of its container?

For your three horizontal blocks of text, I'd size and pad them so that you have 4-5 words per line. When you get down to mobile sizes or really narrow windows, I'd change the display to block so that each block of text takes up its own row.

Check out these articles:

• 10 Principles For Readable Web Typography
• Five simple steps to better typography

What sort of images are best for a background with a highly varying width? My guess is images that have a single anchor point of interest with some unimportant detail throughout the rest of the image

I agree. Photos with the focus on one area with the rest of the background less prominent or blurred (photographers call that blur "bokeh") would work well here. Also refer to the tree photo in the Smashing magazine article I linked above.

What are the most important things to consider regarding the unfixed/floating nature of foreground images and text? (white space, wrapping and anything else?)

The images are there to reinforce the text. The text is the most important factor, so you want to make sure that the images are placed in a supportive capacity. Text should be prominent but not block the important part of the image.

Proximity is key. Text should be close to the image and further away from other images. If you have image 1 with some text below it, you want to have less space between the image and the supporting text than you'd have between that text and the next image. For example, lets say you have image 1 with text below it, then image 2 below that and more text below image 2. You'd want to have more white space between the caption for image one and the top of image 2 than you'd have between image 1 and its caption.

A great book on this topic is The Non-Designer's Design Book

Also check out the Apple Developer's Guide on Interaction Princples: Human Interface Principles. Lots of good stuff in here.

Answer 2

The options seem straightforward.

• Use multiple image sizes, each called via media queries, to match the 4 basic screen sizes.
• Use the background-size: property to dynamically alter any background image
• use the overflow: hidden; property to simply hide larger images within a div as the page width decreases. This would require you to keep in mind what IS visible at various page widths.

The questions you ask are somewhat ambiguous.... but....

Would a one colour, simple gradient or very smooth background be better than a repeating pattern or one with detail?

Highly dependent upon the pattern. If it's a subtle pattern which does not visual compete with text above it, then a pattern may work. I'd lean towards a solid color or subtle gradient though. Simple color will make the text more readable.

How can I create a repeating pattern that works with and is relevant to the subject and design?

That's your call. Are you asking others to design something for you?

If I use a floatable foreground image, do you think it has to look realistic, as in not clip art?

Again, that's between you and the client. The "mood" or "message' to be conveyed by the web site would determine the style of images to be used.

From a design point-of-view (I know the technical side), what conditions can I use to decide how to scale the text up/down, and still look good? ie. should the text be no larger than a certain size depending on the width of its container?

Consistency is best for design. Consistency lends to an impression of stability. If the first text block is a single line of text, I would try and stick to a single line of text for all subsequent text blocks. Width can change a bit, but moving form a single line of text to multiple lines of text will necessitate moving elements. When the elements move, you loose the sense of consistency.

Answer 3

Using CSS3 Media Queries we can make images Responsive.

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

If you want more explanation please check this link, http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries