1

The current framework I use to design webpages currently doesn't 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 they are not the same and shouldn't be considered in the same breath).

Dimensioning is the issue I'm 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 argument's sake)?

Improve this question

1 Answer 1

Reset to default
2

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.

Improve this answer
3
  • So it is a case of having two different sets of graphics?
    – scriptmonkey
    Commented Dec 5, 2013 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
    Commented Dec 5, 2013 at 6:28
  • No problem, glad I could help.
    – nouptime
    Commented Dec 5, 2013 at 8:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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