Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

The current framework i use to design webpages currently doesnt do anything to optimize images across different devices. As I see it, their are four types: mobile, tablet, desktop pc and large desktop PC to make things simple, the last three can be considered as one unit and mobile devices as a separate entity (I understand that their not the same and shouldn't be considered in the same breath).

Dimensioning is the issue im Having. if we consider a graphic for the header that will take up 100% of the width and be a height of 500px how is that graphic best translated down to a smaller device (iPhone 5 for arguements sake)

thanks in advance.

share|improve this question

1 Answer 1

up vote 2 down vote accepted

Since the header graphic is wider than it is taller, I would suggest having it follow the width of your target device. The header may have to be re-sized into a different dimension for mobile devices though.

My suggestion would be to enlarge the graphic height and optimize it to look best on a mobile device. For example, you could increase text size to increase readability on a mobile device. Also, try to export the graphic at 2x (150dpi) to ensure best results.

share|improve this answer
    
So it is a case of having two different sets of graphics? –  scriptmonkey Dec 5 '13 at 4:47
    
Yes. You can then use media queries in your CSS to load different images for each screen size. You can refer to this link for more details. –  nouptime Dec 5 '13 at 6:28
    
Good link, thanks for that! –  scriptmonkey Dec 5 '13 at 7:42
    
No problem, glad I could help. –  nouptime Dec 5 '13 at 8:27

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.