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.

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.

 wide browser screen – desktop settings

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

Responsive Design and Drupal

I’m working with the responsive design side of Drupal now to prepare my site for mobile devices. Drupal utilizes responsive design at the theme level. This is the reason that I chose Adaptive Themes (AT) Core – it’s responsive out of the box. But there are still many considerations for approaching mobile devices.

This post will be a collection of links that I find useful for responsive design in the context of Drupal generally and AT specifically, starting with the wonderful readme by Jeff Burnz.

http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/#mq-overlap-stack – great blog on media queries and stacked v overlapping.

http://getlevelten.com/blog/tom-nelson/three-ways-use-media-queries-drupal – Excellenrt blog specifically about Media Queries and Drupal.

http://www.youtube.com/watch?v=XyIOj7fUZ7w – great vid from Lynda.

this is the readme from jeff burnz. I can’t attach .txt – WP doesn’t like that so here is the full text.

First read this about SASS, its very important!
———————————————–

There is more information regarding working with SASS in the SASS CSS folder
_README, however, you need to be aware that if you set Compass to watch the
SASS folder or any SCSS file in this theme it will OVERWRITE the CSS file/s in
your sub-themes CSS directory!

To prevent this ever happening you can delete the config.rb file in the
sub-theme root (unless you are actually planning on using SASS, in which case
you will want to keep it).
Working with Responsive Design in Adaptivetheme
———————————————–

The subtheme is designed to be “mobile first”. In short this means to
first load a set of global styles, the progressively add styles for larger
devices using media queries.

Its important to note that you do not have to follow a mobile first approach.
Adaptivetheme can support Desktop first approach as well, which means you will
progressively add styles to override things for mobile, rather than progressively
adding style for larger devices.

You can do both in Adaptivetheme – it’s merely a matter of where you place
the majority of your styles, and what theme settings you choose in the
Appearance settings for your sub-theme.

Lets examine the CSS file structure of Adaptivetheme and look at how each
file is loaded. From this you will be able to deduce what approach might work
for you, and where you should be placing your CSS.
Moible First or Desktop First – that is the Question!
———————————————–

Depending on your approach AT will load the stylesheets in a different order,
indeed it will load different stylesheets. You MUST make a conscious decision
which to use and set this in theme settings.

Look under CSS settings. By default AT is set to Mobile first, if you want to do
Desktop first you should change this setting.
Global Styles
————-

The global styles do not target any specific device – they always load for all
devices.

There are two main global stylesheets:

– global.base.css
– global.styles.css

global.base.css – this holds a few imoportant declarations that should probably
not be removed, however you can modify them, such as gutter width and flexibile
image/media styles.

global.styles.css – includes a slighly modified normalize reset and many empty
selectors for elements and drupal classes and id’s. If you prefer you can delete
everything in global.styles.css and start with a clean slate.

The selectors are extensive and you should delete unused selectors before
going live to reduce CSS weight. You can use cleancss.com or a better way is
just use SASS, it does this for you.

Each file includes a lot of comments and documentation, please review each of
the global CSS files for more help.

If you are doing mobile first then you will probably keep things to a minimum
in these files. “Minimum” is relative, this might still be a lot of CSS,
never-the-less its worth keeping in mind the mobile view of the site, and
avoid writing CSS rules that are clearly for larger width devices.
Responsive Styles
—————–

Adaptivetheme 7.x-3.x has two “modes” – Development mode and Production mode.
Depending on what mode you are in the stylesheets will load differently.

Mode changes automatically depending on CSS aggregation settings. When CSS
aggregation is ON, the its in Production mode.

If you don’t know what CSS aggregation is, look here:

~/admin/config/development/performance
## Responsive Styles – Development mode

In Development mode (CSS aggregation OFF) the responsive stylesheets will load
in individual link elements with the media query in media attribute.

This allows them to load directly into the browser and you will see your CSS
changes immediately, as per normal CSS development.

There are five of these responsive stylesheets – one for each break point set
in the theme settings:

– responsive.smartphone.landscape.css
– responsive.smartphone.portrait.css
– responsive.tablet.landscape.css
– responsive.tablet.portrait.css
– responsive.desktop.css

Its important to know that these files DO NOT contain the media queries,
instead they load in the <link> elements media attribute – remember, these
files only load when in Development Mode.
## Responsive Styles – Production mode

When in production mode all the responsive stylesheets are aggregated into one
file and use embedded @media queries. AT Core will automatically aggregate
the CSS from each of the development mode stylesheets and wrap it in the right
media query. This reduces the number of HTTP requests from 5 to 1.

This file is always called:

– ThemeName.responsive.styles.css

You will find this file at:

~/[public files]/adaptivetheme/[ThemeName]/ThemeName.responsive.styles.css

NOTE: please see the section below titled “Relative Paths in Responsive Styles”.
## Important Note about CSS Aggregation and Responsive Stylesheets

Once you have CSS aggregation ON if you make changes to any responsive
stylesheet, you MUST re-save the theme settings AND clear the sites cache. AT
Core will re-write the saved files, then clearing the cache tells Drupal to
use the new file.
## Relative Paths in Responsive Stylesheets

When CSS aggregation is ON AT Core will load the production version of your
responsive styles (see above “Production mode”). this file is loading from
Public Files and not from within your theme so special handling is required for
relative assets – AT Core will do this for you.

AT Core will automatically re-write the relative paths to the files so they
are relative to the site root. This is the same functionality as Drupal core
CSS aggregation feature, so paths are not broken.

If you use absolute paths these will not be altered.
Overlapping/Custom Media queries
——————————–

By default the media queries in Adaptivetheme are “stacked”, meaning they do
not overlap. This makes it very easy to target one set of device width and not
have those styles “leak” over into others. However it can also mean you may
need to duplicate CSS that you would rather have cascade.

To use custom media queries the sub-theme includes a special file called:

responsive.custom.css

To enable the use of this file in your theme see your theme settings:

Layout & General Settings > CSS > Custom Media Queries

This file has embedded media queries which means you MUST set them yourself.
Defaults are provided.

Allowing styles to cascade can result in a huge saving on total CSS weight and
speed up development.
Internet Explorer Styles and Scripts
————————————

AT can load conditional stylsheets and scripts from you sub-themes info file.

Please see adaptivetheme_subtheme.info – there are good docs and examples of
how to declare stylesheets and scripts for Internet Explorer.

Adaptivetheme also includes special conditional classes on the HTML element
which allow you to easily target styles at specific version of IE.

These are the classes you can use:

.iem7 (IE7 Mobile)
.lt-ie7 (less than IE7)
.lt-ie8 (less than IE8)
.lt-ie9 (less than IE9)

Use these if you only have a small number of overrides and do not want to load
a dedicated conditional stylesheet.
Support
——-

Ping me on Skype if you have life/death critical issues to report…

Skype: jmburnz

Otherwise support my work by joining my theme club, it really does fund my
contrib projects:

http://adaptivethemes.com

Or, you could get radical and file a support issue, even post a patch (which
makes me very happy):

http://drupal.org/project/issues/adaptivetheme

Variants and Node Add/Edit Overrides

Variants in Drupal allow you to reuse Panel Page layouts to make your life easier. You use Selection Rules to allow the system to decide what variant to use based on any number of criteria. In my case, I use Variants on the node add/edit form to provide a consistent interface between several different content types. As with many things Drupal, there are a few idiosyncrasies.

I have a custom content type called member-galleries. This holds images in a gallery like display. To render the add node properly, I had to learn the hard way that using

the “Node Being Edited: Gallery Image form” is not the correct form to use. Even though Gallery Image is the field name that I gave the Image field on the content type that I created. It just seemed to make sense, right? And even worse, it appears when you test the functionality that this is the way to go. But, I kept getting a red herring error about file size when I would try to save an image. It turned out that the Variant really needed the “Node Being Edited” Base form instead. It appears to be exactly the same until you try to save a node of the content type.

Multilingual sites, translations and Selection Rules

I’m putting the finishing touches on my site and one of the things I have to do is translate a few stragglers on the UI. I use Bing Translator (see THIS for info about how to integrate this widget in Drupal 7) for translating externally generated content but since machine translation can be dicey, I try to translate as much as I can manually using Locale, Content Translation and other Drupal multilingual modules along with Selection Rules that look to the user’s profiled language. That way I can be sure the the UI itself is correct.

The Translate Interface feature from Drupal makes it pretty easy to track down strings that have or need to be translated. But because of its modular nature, this isn’t consistent. For example, I have a content type called HTML Text that I user to insert, HTML, of course. This works like an object in OOP languages, the HTML (it can form a link, reference an image, just about anything) becomes a node and can be placed anywhere on your site that you need.

In this case I have an image and a link that point to a relative path on the site. The text for the link itself is in English and I need it to be in Spanish as well. But since this is one of the cases where you can’t use the Translate Interface UI (because it is a custom content type) I have to acheive this by creating a separate node with the same text in Spanish. Two nodes, one location. In this case the placement is done via a minipanel that will be nested inside a larger panel. So, in the minipanel, I “stack” the two minipanels as seen in the SS. You can see that I use a Selector Rule to choose this Panel if the site langauge is Spanish. You don’t see it but the top panel has the same rule for English. The language is set on the user object of the account. Since these are separate nodes, they have separate node IDs within the CSS. So be

aware of how you implement CSS if the two nodes don’t style consistently.

Drupal has many quirks but I haven’t found one yet that can’t be worked around with a little creativity. This is certainly one such instance.