Media Queries for Mobile Development

Media queries are essential to proper mobile development. This is a great blog to help with this subject.

http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/#mq-overlap-stack

Mobile Emulators/Testers

A couple of notes on a few tools for mobile development.

http://quirktools.com/screenfly – this is a great tool. make sure to be aware of the “proxy” setting if you’re having trouble navigating your site.

http://responsivepx.com – Really nice tester with a slider for easy adjustment of length and width of the site.

Mobile Device Resolution Roundup

Great reference for Mobile Device Web Development

http://screensiz.es/phone

Browser Hacks for CSS, IE10+, Safari 5 specifically

No one ever really wants to take shortcuts and wind up with spaghetti. But sometimes you have to. IE 10/11 are great browsers and are much more compliant with standards, but today I still had to use a hack to get something simple done. And thanks to http://www.browserhacks.com/ for showing me the way.

for IE 10/11 you use this:

_::-ms-reveal,

at the beginning of your selector. the selector will remain the exact same but it will only be interpreted by IE10+

so this is the original:

.sf-menu.sf-style-default a {/*092713 hack for IE10 and superfish super menu*/

font-size:104%;
}

and this is what you have afterwards to be interpreted only by IE.

_::-ms-reveal,.sf-menu.sf-style-default a {/*092713 hack for IE10 and superfish super menu*/
font-size:104%;
}

Note that the comment is mine and not needed. the only thing being changed is the font size. simple change but effective for a situation where I COULD NOT get the selector to work consistently despite all claims by MS.

This one works for Safari in that it doesn’t apply itself to Chrome, which would be the usual behavior.

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari only override */
::i-block-chrome,.sf-menu.sf-style-default a {
padding-bottom: 10px;
padding-right: 23px;
font-size: 100%}
}

You can see that the only important part is where it blocks chrome. This should work with any selector

Browser stats

Great info about browser user, screen resolutions. Trends from the last ten years too. Very cool.

http://www.w3schools.com/browsers/browsers_display.asp

CSS Rendering Engines

IE10 does a much better job than earlier versions at compatibility with modern CSS selectors. But I believe there are still some cases where browser specific selectors may be needed.

  • IE (pre 10, i believe)
    • Engine: Trident
    • CSS-prefix: -msie
  • Firefox
    • Engine: Gecko
    • CSS-prefix: -moz
  • Opera
    • Engine: Presto
    • CSS-prefix: -o
  • Safari & Chrome
    • Engine: WebKit
    • CSS-prefix: -webkit

Responsive Design Tips – Drupal and Adaptive Themes Core (Subthemed) – First step

Getting started is sometimes the hardest part.

Image

For testing mobile design, you can simply resize your browser to see how the media queries are responding. literally drag the window and make it more narrow – height doesn’t matter.

I have an AT Core subtheme that I have customized. Using a subtheme is important so the core can be updated without wrecking your customizations. Make your first change in the file –

responsive.smartphone.portrait.css – if you have subthemed correctly, this will be in the css folder of your subtheme.

in my case, I changed the font size to something goofy – 212% using the wonderful apatana studio. I save changes, resize the browser window and watch the font expand to the new size. It doesn’t look good; that isn’t the point. All I have shown is where specifically to make the change and test the change you have made.

Image wide browser screen – desktop settings

Mobile settings with narrow browser. Note the now ginormous font!

Image