Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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.

share|improve this question
    
This question is way too broad for any stack exchange site. You're telling us you understand how to build a responsive site, at least that you understand coding it, but then you're basically asking us "Where do I start?". Within there, I also see "How can I create a repeating pattern that works with and is relevant to the subject and design?", is this not the same as asking "How do I do web, or graphic, design?". At best this question will become a list of miscellaneous tips for responsive design. I think you're better off reading more into responsive design, then splitting up your questions. –  Eric Jul 9 '13 at 13:14
    
You might be right, it's just that I can't imagine being the only person who's ever come across this task. I tried to make the question widely applicable but it seems that there is no beautiful solution to this, what people have suggested are mostly things I'd already considered and either have already implemented, plan to implement soon or have disregarded as unsuitable for my project. The answers are great and have really helped to choose a course of action. I agree now that this is something that is probably going to differ for each project. I will choose an answer once the bounty runs out. –  Dominic Jul 9 '13 at 17:30
    
Understood. Responsive projects have the keystones of my contract for the past year; but I think you have too many questions packed into one. –  Eric Jul 9 '13 at 18:04
add comment

3 Answers

up vote 3 down vote accepted
+50

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:

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.

share|improve this answer
    
Excellent answer! –  Yisela Jul 8 '13 at 20:22
    
Really great answer, great article references, in many ways you've reinforced my original thoughts. The points you made about other elements of the website were valid and I thank you for them, though I knew of most of them, I just haven't tweaked the margins and padding yet. With the part about scaling text, I specifically meant the text attached to the image, not the paragraphs below, but what you suggested is what I'd planned to do aswell :) as for setting number of words per line, it would be very difficult with a responsive element, and it's a sacrifice I don't mind making. +3 if I could.. –  Dominic Jul 8 '13 at 21:30
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.