Jump to content

Responsive Web Design


Graeme

Recommended Posts

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.

Link to comment
Share on other sites

  • 2 weeks later...

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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...