Jump to content
Killersites Community
Graeme

Responsive Web Design

Recommended Posts

Hello All,

Trying to study this and I am kind of getting there!

Can you just add code to your current style sheet that will allow the dedign to adapt to hand held devices?

Thank you,

Graeme

Share this post


Link to post
Share on other sites

Yes, look up web accessibility. I have some things archived here on the subject.

 

What you want to do is make the site flexible, so rather than having a 20px margin, make it flexible, say 5%. Whenever you can use % in your style sheet, this way it can grow or shrink as needed.

 

Another form is font sizes, instead of fixing an exact font size, use % or em, this allows the text to adjust and for the user to choose their own text size. Either one will do:

  • % = user choice, 80% is smaller, 80% of the chosen font size of the user, 100% is the chosen size and 120% is 20% larger than the users chosen size.
  • em = 'M', M is the largest letter in the alphabet, so the font size is based on the size of the 'M' in the users chosen font size and font family. A Verdana M is bigger than an Arial M. % only considers the chosen font size, em considers the chosen font size of the chosen font.

I usually used em on my sites for fonts and always % for spacing issues like cell sizes and margins.

 

This way a tablet size page can spread out if you go to a desktop and get smaller if you switch to a smart phone. I have always argues that if you make a site accessible to all, that means user, user agent and apparatus it is viewed on. One size should fit all and you should never need to sites and absolutely never force people to go to a "Mobile site", those days are gone.

Share this post


Link to post
Share on other sites

Check into Bootstrap. That's great for making sites mobile.

Share this post


Link to post
Share on other sites

No, just on the fly:

 

1 EM = 100% of the users chosen font.

 

If I choose 11 pt Calabri as the default for my browser. 1 EM is the 11 pt. Calabri  capital 'M'.

 

.75 EM is 75% of the size of the 11 pt. Calabri capital 'M'

 

2 EM would be 200% the size of the 11 pt. Calabri capital 'M'

 

 

Cheers!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×