While I am not a big advocate of Responsive Designs, and by no means an expert, I thought I would share some useful links and tips I learned while converting my one site.
Responsive Designs do not require multiple style sheets. Using the @media rule, you can keep your site to one style sheet. However, the @media (and @import) rule
does not work on IE8 or earlier, so you may have to make a separate style sheet specific to IE8 and earlier, but more on that later.
Using @media, a mere three lines of CSS can adjust your site to a mobile device. For example, for my one site From Our Heart, I have the width of the page wet using an outer wrapper, 1010 pixels. Everything within the wrapper is set to percentages. While a site set to 100% width will reduce to accommodate smaller devices, there are some devices with wide screens such as the Samsung Galaxy tablet with is 1280 pixels wide and no matter if your site is a specific width or 100%, the Galaxy Tablet does create issues. Your site will render in its entirety, but will be very small. However, on a Kindle Fire, it will look okay. This is just one of the issues confronting a Responsive Design. To accommodate the Samsung Galaxy tablet, I added a few lines to my CSS using @media:
@media screen and (min-device-width: 1081px) and (max-device-width: 1280px) and (orientation: landscape) {
body {
font-size: 1.25em;
}
#wrapper {
max-width: 100%;
margin: 0 70px 0 10px;
}
#center {
max-width: 950px;
}
#contentCenter p {
line-height: 2em;
}
#contentCenter a, #contentCenter a:active, #contentCenter a:hover, #contentCenter a:visited {
text-decoration: underline
}
}
With this code added to my CSS, I was able to adjust for the Samsung Galaxy very easily. Since PC’s/Laptops do not recognize the (orientation: landscape), this code will not affect the CSS. Same holds true for (orientation: portrait) Granted, there were other tweaks I had to made, but I did all my device specific CSS adding no more than 10 lines of CSS to my existing CSS file using the @media rules. I also increased the font size for the Samsung Galaxy as it appeared very small.
Also using @media, you can easily make you site look good and function down to a screen as small as 200 pixels. Some additional tweaks you might have to make is the height of the products <div> as they will get taller as you go from 3 columns to 2 to one. You may also want to underline you hyperlinks for small screens and increase the line height to make it easier to use your thumb. These are just a few things to consider.
You can also use @media only print { } to easily make a printer friendly version.
IMPORTANT When using @media, your styles are contained within the curly brackets { } of the @media.
@media { /*beginning @media curly bracket*/
body { margin: 0}
/*more styles */
}/*end @media curly bracket*/
A few non-PC/Laptop specific <head> tags you may want to consider are the following:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
This code allows or denies rescaling (zooming) of your site.
<meta name="format-detection" content="telephone=yes" />
This code makes your phone number a hyperlink so all your visitors have to do is tap it to call you. A thoughtful convenience.
<meta name="format-detection" content="address=no" />
This code links you address to the phone’s map app. Again, convenient if you have a brick and mortar store.
And, of courses, there is Internet Explorer, the not always compliant browser. For anyone using IE9+, there should be no issues. However, IE8 and earlier can cause you problems. Aside from not recognizing @media or @import, IE8 and earlier does not recognize border-radius. IE7 and earlier does not recognize position: fixed, Max-width/height, min-width/height and so on. These are just a few issues. That being said, you may want to make an IE specific style sheet and take advantage of Internet Explorer’s Conditional Comment tag.
If you are not familiar with it, it is simply the following: <!--[if lte IE 8]>Your Style Here or Link To A Style Sheet<![endif]--> In this example, it is for Less Than Or Equal To Internet Explorer 8 (lte) Your other options are (lt) and simply <!--[if IE 8]> <![endif]-->.
Before you go crazy over all of this, you will not accommodate every device perfectly. You can, however, make your site functional and look good with as little coding as possible, and less than you may have thought. Remember, some people pay for bandwidth so the less code the better.
REFERENCESFor a fairly comprehensive list of screen resolutions, visit
Responsive design device resolution referenceFor using @media and @import, the following sites are helpful:
Introduction to CSS Media Queries Detecting device size & orientation in CSS7 Media typesResponsive Design Testing This site will let you view yours on multiple screen widths,
however, it will not adjust the font to a specific device.
As I said in the beginning, I am no expert on the subject, but I thought I would share the results of my research. If you have any specific questions, feel free to contact me.
MarshallFrom Our Heart
FromOurHeart.com
Gifts, Plush Stuffed Animals, Toy, Games, Puzzles, 3D Gift Cards, Nostalgic Signs, and Collectibles
Responsive Design Useful Links and Tips
Posted - 03/04/2013 : 11:20:03
