Hi guys,
I have tried making my college website. You can have a look at it- www.kguc.org
The site is working as intended on all the major desktop browsers. The real problem occurs while surfing the site on a mobile device. The site doesn't like the way its meant to.
Please help me out in this regards.
layout in pixels does not work
layout in any fixed measurement does not work
layout in em or % : scalar measurements that auto adjust is closer to what you probably want
the site does not work in desktop browsers either.
open in a part screen window, or any other monitor size than the one it was laid out on, and content is pushed offscreen,
the google search would be something like responsive design best practice
I agree with AB - we've gone beyond px measurements now. Also have a look at the rem measurement - it's relatively new and not sure if it's totally supported by mobile browsers yet. Anyhow, it relates to the root font size and thus does not suffer from nested reduction. If a browser does not support it, you can always provide a fallback.
I was reading recently that the 'easiest' method is to measure horizontally in % and vertically in rem.
Add media queries so that you have some sensible break points. A look at Twitter Bootstrap may give you an idea - they have an interactive page for RWD.
Your biggest issue, possibly, if you're "retrofitting" to include mobile, is resource size, particularly images. This has been a source of debate in RWD circles for some time. Serving smaller filesize images - if they are background images - in css is easy enough, but it's more difficult to serve an image fit for a mobile instead of a big image fit for a desktop.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.