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 posting, there is a crude attempt (the layers don't look good together) at this course of action currently visible on the 'Haulage' slide. I am not happy with this approach as I feel like I'm wandering around like a headless chicken.

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

Some typical questions 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?
• 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?

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

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.