: Advice for creating a fluid and responsive graphic 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

@Jennifer810

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.

Vote Up Vote Down

@Turnbaugh909

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.

Vote Up Vote Down

@Nimeshi706

Using CSS3 Media Queries we can make images Responsive.

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


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

Vote Up Vote Down