Designing for mobile phones

[Lucy]

I think I'm having a bit of a dense moment

 

I want to design a separate stylesheet for mobile phone screens because they're so small - but I'm keeping sizes to percentages/ems. So... when testing, what browser size do I use? The 300px or so that a mobile phone will be, or full sized?

[niche]

Varies with device.

[Lucy]

Well, I'm using a computer. Trying to emulate the size/resolution of mobile phones. So should I have the browser at 300px-ish? Or its normal size?

[niche]

Just google responsive web design.

[dsonesuk]

With opera browser you can add a addon which give you emulations of several mobiles, tablet of different sizes.

[Jonathanks]

Seems you're a master. Try css media. (@media handheld) set the max size and style on. *in a novice's words*

[Lucy]

With opera browser you can add a addon which give you emulations of several mobiles, tablet of different sizes.

 

Found it - it's very good, thanks for the suggestion. Weirdly, some of the phones listed completely ignore my stylesheets... they're within the size range. Is this just something that happens, or is there likely to be something up with my code? If so, I can link you to the website, it should be live tommorow (I just got hosting for it, but the FTP won't work yet).

 

EDIT - Never mind, got it working.

 

 

Jonathanks - Thanks for the advice. I'm using @media screen though, just to be sure anything I wouldn't think of will be covered. Like people who want tiny browsers or something. And, er, I'm certainly not a 'master' of anything, lol I can make rather delicious chocolate brownies though...

Edited August 12, 2014 by Lucy

[Jonathanks]

Found it - it's very good, thanks for the suggestion. Weirdly, some of the phones listed completely ignore my stylesheets... they're within the size range. Is this just something that happens, or is there likely to be something up with my code? If so, I can link you to the website, it should be live tommorow (I just got hosting for it, but the FTP won't work yet). EDIT - Never mind, got it working. Jonathanks - Thanks for the advice. I'm using @media screen though, just to be sure anything I wouldn't think of will be covered. Like people who want tiny browsers or something. And, er, I'm certainly not a 'master' of anything, lol I can make rather delicious chocolate brownies though...

funny @chocolate brownies. Have you considered niche's suggestion? You can have different stylesheets. Make them responsive. Google it. One stylesheet takes care of larger screens, the other takes care of mobiles. Edited August 12, 2014 by Jonathanks

[dsonesuk]

You also have to take into account dpi or pixel density, some will be able to get up to 4 into normal pixel.

[Lucy]

funny @chocolate brownies. Have you considered niche's suggestion? You can have different stylesheets. Make them responsive. Google it. One stylesheet takes care of larger screens, the other takes care of mobiles.

 

Yeah, my website is already responsive, it just doesn't really work on the smallest screen sizes - needed a slightly different design.

 

 

You also have to take into account dpi or pixel density, some will be able to get up to 4 into normal pixel.

 

Oh dear This gets more and more complicated... well, my website seems to be working for most of the phones/tablets and stuff listed on this thing. I'm having an issue with tablets though, actually. They are large enough to display the site normally, but I have a fixed footer with my links in which apparantly cannot be clicked on on a tablet. It just scrolls down instead of allowing the cursor to rest on links, if you see what I mean. Do you think an actual tablet device would be different? I've only touched one of those things like three times, lol.

 

I worked through a ton of small problems tonight and it's looking like my portfolio site is finally nearing completion. (Well... ignoring the fact that internet explorer completely and utterly messes the whole thing up)