<font color="#333333"><font><font face="arial,helvetica,sans-serif">Most definitely, but why go that way when media queries can do all that and it's much faster and easier to maintain for folks that don't know JS? Not to mention that RWD should be CSS first and have JS as the fallback :) For example even Respond.js is there only as helper, nothing else, user can still manage Responsive from stylesheet :)</font></font></font><div>
<font color="#333333" face="arial, helvetica, sans-serif"><br></font></div><div><font color="#333333" face="arial, helvetica, sans-serif">Emil<br></font><div><font color="#333333"><font><font face="arial,helvetica,sans-serif"><br>
</font></font></font></div><div><font color="#333333"><font><font face="arial,helvetica,sans-serif"><br></font></font></font><br><div class="gmail_quote">On Wed, Jul 18, 2012 at 6:36 PM, Daniel Tara <span dir="ltr"><<a href="mailto:contact@onedesigns.com" target="_blank">contact@onedesigns.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div style="word-wrap:break-word"><div>Again, I am not talking about non-essential elements. As a personal guideline, I consider a good responsive design implementation when the layout's width degrades gracefully on browser resize without relying on any scripting technique. Other elements like navigation or stacking positioned elements should be fine to be rendered with JS although there are some techniques around using pure CSS.</div>
<div><br></div><div>Emil, responsive rules in JS can be wrapped around the jQuery window resize event like this:</div><div><br></div><div>$(window).resize(function() {</div><div><span style="white-space:pre-wrap"> if( ($(window).width() > </span>32<span style="white-space:pre-wrap">0) || ($(document).width() > </span>32<span style="white-space:pre-wrap">0) ) {</span></div>
<div><span style="white-space:pre-wrap"> </span>// do your stuff</div><div><div class="h5"><div><span style="white-space:pre-wrap"> </span>}</div><div>}</div><br><div><div>On Jul 19, 2012, at 2:30 AM, William Ludwig wrote:</div>
<br><blockquote type="cite">I'm going to agree with Emil on this one. Javascript is necessary not only for responsive design on older browsers but also for HTML5 elements to work properly. See <a href="http://code.google.com/p/html5shim/" target="_blank">http://code.google.com/p/html5shim/</a> and <a href="http://caniuse.com/html5semantic" target="_blank">http://caniuse.com/html5semantic</a>. A great many approved themes already require javascript for some non-essential element or other ( sliders, tabs, whatever ) so needing javascript for responsive design on older browsers isn't really any different.<div>
<br><div><div><div>Bill Ludwig<br><div><br></div><div><br><div class="gmail_quote">On Wed, Jul 18, 2012 at 6:21 PM, Emil Uzelac <span dir="ltr"><<a href="mailto:emil@themeid.com" target="_blank">emil@themeid.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><font color="#333333"><font><font face="arial,helvetica,sans-serif">We already approved some Themes where author added all media queries only in JS form, I personally take that as the choice, maybe not the best one, but what can we do. Everyone now has JS enabled in their browser and if they don't well there's absolutely nothing we can do about it :) The pitfall using queries strictly in JS will cause few issues, the main one is that if "you" don't refresh the page, "your" layout might not "respond" properly and that's "not the best practices". RWD should respond even if we're not on mobile device and/or just re-sizing any browser. And again this is a never-ending conversation, since there's not really any standards as far as the Responsive Web Design :)</font></font></font><span><font color="#888888"><div>
<font color="#333333" face="arial, helvetica, sans-serif"><br></font></div></font></span><div><span><font color="#888888"><font color="#333333" face="arial, helvetica, sans-serif"><br></font></font></span><div>
<div><span><font color="#888888"><font color="#333333"><font><font face="arial,helvetica,sans-serif">Emil<br>
</font></font></font></font></span><div><div><br><div class="gmail_quote">On Wed, Jul 18, 2012 at 6:09 PM, Daniel Tara <span dir="ltr"><<a href="mailto:contact@onedesigns.com" target="_blank">contact@onedesigns.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div style="word-wrap:break-word"><div>What I mean to say is that the main layout adaptations should not rely entirely on JavaScript. Using it as fallback, to prettify traditions or where there's no other alternative should be fine.</div>
<span><font color="#888888"><div><br></div><div>Daniel</div></font></span><div><div><div><br></div><div><div>On Jul 19, 2012, at 2:05 AM, Emil Uzelac wrote:</div><br><blockquote type="cite"><i><font color="#333333"><font><font face="arial,helvetica,sans-serif">"</font></font></font><span style="color:rgb(34,34,34);font-size:13px;font-family:arial,sans-serif">Design responsiveness should not be JavaScript dependent"</span></i><div>
<font><font><font color="#222222" face="arial, sans-serif"><br></font></font></font></div><div>IE8 and bellow do not support CSS3 media queries, so JS is very much needed :) please see: <a href="https://github.com/scottjehl/Respond/" target="_blank">https://github.com/scottjehl/Respond/</a> I'm using that in my Theme and many others out there.</div>
<div><font><font><font color="#222222" face="arial, sans-serif"><br></font></font></font></div><div><font><font><font color="#222222" face="arial, sans-serif">Thanks,</font></font></font></div><div><font><font><font color="#222222" face="arial, sans-serif">Emil<br>
</font></font></font><br><div class="gmail_quote">On Wed, Jul 18, 2012 at 5:43 PM, Daniel Tara <span dir="ltr"><<a href="mailto:contact@onedesigns.com" target="_blank">contact@onedesigns.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div style="word-wrap:break-word">The only guidelines I would recommend regarding responsive design are:<div><br></div><div><ul><li>No content should be hidden, ever, that's (very) bad practice.</li><li>Images should constrain proportions.</li>
<li>Design responsiveness should not be JavaScript dependent</li></ul><div><br></div><div>Everything else would mean restraining the developer. IMHO.</div><span><font color="#888888"><div><br></div><div>Daniel</div>
</font></span><div><div><div><br><div><div>On Jul 19, 2012, at 1:10 AM, Emil Uzelac wrote:</div><br><blockquote type="cite"><font color="#333333"><font><font face="arial,helvetica,sans-serif">Hi Bruce,</font></font></font><div>
<font color="#333333"><font><font face="arial,helvetica,sans-serif"><br></font></font></font></div><div><font color="#333333"><font><font face="arial,helvetica,sans-serif">This is all good and we appreciate the heads-up, however at this moment I would not require Theme Reviewers to test RWD. </font></font></font></div>
<div><font color="#333333"><font><font face="arial,helvetica,sans-serif"><br></font></font></font></div><div><font color="#333333"><font><font face="arial,helvetica,sans-serif">Think of it like this. If developers says that their Theme is HTML5, none of us will actually go and check just to see if every Theme element is HTML5 and/or if developers decided to "hack" with non-HTML5 techniques. </font></font></font></div>
<div><font color="#333333"><font><font face="arial,helvetica,sans-serif">As Chip said once this will be under the description and that's all for right now.</font></font></font></div><div><font color="#333333"><font><font face="arial,helvetica,sans-serif"><br>
</font></font></font></div><div><font color="#333333"><font><font face="arial,helvetica,sans-serif">Just for FYI purpose only all this and much more is under my Theme <a href="http://wordpress.org/extend/themes/responsive" target="_blank">http://wordpress.org/extend/themes/responsive</a>, feel free to browse around if you need. Autohide or shrink of sidebars is not the best practices, I would always prefer to "stack" -vs hide.</font></font></font></div>
<div><font color="#333333"><font><font face="arial,helvetica,sans-serif"><br></font></font></font></div><div><font color="#333333"><font><font face="arial,helvetica,sans-serif">Few sites to consider:</font></font></font></div>
<div><ul><li><span style="font-family:arial,helvetica,sans-serif;color:rgb(51,51,51)"><a href="http://foundation.zurb.com/" target="_blank">http://foundation.zurb.com/</a> (my personal favorite)</span></li><li><font color="#333333" face="arial, helvetica, sans-serif"><a href="http://twitter.github.com/bootstrap/" target="_blank">http://twitter.github.com/bootstrap/</a> (second favorite)</font></li>
</ul></div><div><font color="#333333"><font><font face="arial,helvetica,sans-serif"><br></font></font></font></div><div><font color="#333333"><font><font face="arial,helvetica,sans-serif">Thanks,</font></font></font></div>
<div><font color="#333333"><font><font face="arial,helvetica,sans-serif">Emil<br></font></font></font><br><div class="gmail_quote">On Wed, Jul 18, 2012 at 1:30 PM, Bruce Wampler <span dir="ltr"><<a href="mailto:weavertheme@gmail.com" target="_blank">weavertheme@gmail.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">Sorry a bit slow with this - Chip asked for some ideas about responsive theme tests or guidelines. Here are some of the issues I believe to be important:<br>
<br>1. Sidebars - sidebars should nicely shrink with the rest of the page - things should stay proportional. At some point (maybe at about 480, maybe even below 600), the sidebar should autohide or everything gets too squished. I think this kind of behavior should be at the least RECOMMENDED for responsive themes, if not required.<br>
<br>One of the problems testing this behavior is that not all browsers respond to responsive div hiding - they need a manual refresh at each new width. The content will shrink fine, but the responsive hides don't always auto-show.<br>
<br>2. Images - images need to shrink as the screen does. This includes the header image.<br><br>3. Menus - menus need to resize nicely. This isn't always easy to do, and it is not uncommon to get a mess of unreadable, unusable stacked menu items.<br>
<br>4. Possibly unhide or move special areas as the width shrinks. Sidebars might switch from the side to the bottom, for example.<br><br>5. Video media - Video should either dynamically shrink with the screen (not easy), or at worst hide the overflow.<br>
<br>6. Same for iFrames.<br><br>7. Titles - titles should ideally shrink and wrap, not overwrite surrounding content. Actually, same for all content. The content should shrink or re-wrap, and not overwrite surrounding content or sidebars.<br>
<br>8. If themes have special handling for some devices (iOS or Android), it should be noted, but it is probably unrealistic to expect testers to have those devices to test on. Don't know how such things can be tested. Maybe if there are reviewers with access to such devices, they could have priority for testing such features. Don't know how many themes include that kind of support yet, but I imagine it will become more common. It might be interesting to discuss as recommends to use the existing iOS features that are available with the WP admin side. (I know they are there, but unfortunately don't really know if they can easily be used by themes. Seems like a good opportunity.)<br>
<br>Also, Opera has a mobile device simulator that could be of some use for testers of responsive themes.<span><font color="#888888"><br><br>Bruce Wampler<br>
</font></span><br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div><br></div>
_______________________________________________<br>theme-reviewers mailing list<br><a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br><a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
</blockquote></div><br></div></div></div></div></div><br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div><br></div>
_______________________________________________<br>theme-reviewers mailing list<br><a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br><a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
</blockquote></div><br></div></div></div><br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div><br></div></div></div></div></div>
<br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div><br></div></div></div></div></div>
_______________________________________________<br>theme-reviewers mailing list<br><a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br><a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
</blockquote></div><br></div></div></div><br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div><br></div></div>