I’m about to create a mobile version of my website,
I’m used to program to computers only,
What I do know is that I’ll need to keep in mind that devices with different sizes of screens will display the website, therefore I’ll need to make the website stretchable and so on,
What I’ve been wondering though, was what do I do with images?
I’m a person that cares a lot about the quality of images and such in my website, I hate pixelated stuff,
What kind of made me confused was the whole idea of the retina screens,
I developed a few apps for the iPhone, and I had to create images double their size for the retina, but will I need to create large images for my mobile website as well?
I have a strong feeling that I don’t, but I thought I’d ask,
Also, I wanted to know what doctype I should use for the website,
and what could help me prevent people from being able to zoom out and make the screen stretch, I used to know this css code that did this,
I would also love to hear some tips for creating such a website from those of you that are already experienced with it,
Thank you very much
As far as doctype you can use two
<!DOCTYPE>s and are as followsTo stop it from stretching you could also use a set viewport, this I have used in many mobile websites (Normally multiples of 320 for iOS)
But ultimately you should also look into jQuery Mobile Framework as well.
For most images I am using, I will export in Photoshop at 30% quality and at the size I my require for the site. with using a set viewport, you really don’t have to worry about the size.
Alternatively you could use
CSS3media screen size to format your css (can also be formated for portrait and landscape)