Chris's Wiki :: blog/web/ResponsiveDesignNeed Commentshttps://utcc.utoronto.ca/~cks/space/blog/web/ResponsiveDesignNeed?atomcommentsDWiki2014-06-23T00:17:46ZRecent comments in Chris's Wiki :: blog/web/ResponsiveDesignNeed.By Aristotle Pagaltzis on /blog/web/ResponsiveDesignNeedtag:CSpace:blog/web/ResponsiveDesignNeed:f495c08d94552403ca4a2e35aa07af91324a2b45Aristotle Pagaltzishttp://plasmasturm.org/<div class="wikitext"><p>Maybe you can replace your layout table with a bunch of <code><div></code>s with the same effective structure, plus some <code>display: table-cell</code> (etc.) CSS properties to recreate the exact same layouting behaviour as you currently use? If that works, it’ll give you an option you currently do not have: to use non-table rendering for these <code><div></code>s in the non-desktop version of your layout by making them <code>display: block</code> and floating them (or whatever) in the mobile stylesheet.</p>
</div>2014-06-23T00:17:46ZBy Gabe on /blog/web/ResponsiveDesignNeedtag:CSpace:blog/web/ResponsiveDesignNeed:11b205531ecf810f8822d8b5c03d314d6008f1e2Gabe<div class="wikitext"><p>Not a lot of suggestions from Google's PageSpeed Insights but you might want to check out their recommendations. </p>
<p><a href="https://developers.google.com/speed/pagespeed/insights/">https://developers.google.com/speed/pagespeed/insights/</a></p>
</div>2014-06-22T13:38:14ZBy Ewen McNeill on /blog/web/ResponsiveDesignNeedtag:CSpace:blog/web/ResponsiveDesignNeed:15421f48eab116822de45b67a2786385171b1a3eEwen McNeill<div class="wikitext"><p>At first glance I think your minimal requirements can be solved with CSS media type qualifiers, eg:</p>
<pre>
<style>
@media (max-width: 600px) {
.sidebar {
display: none;
}
}
</style>
</pre>
<p>or:</p>
<pre>
<link rel="stylesheet" media="(max-width: 600px)" href="small.css" />
</pre>
<p>(Trivially modified from examples on <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries">Mozilla's CSS Media Queries page</a>)</p>
<p>This <a href="http://mislav.uniqpath.com/2010/04/targeted-css/">blog post from 2010</a> has a bunch of examples of what you can do with the CSS media queries. AFAICT they are CSS3, which means "modern browser", but particularly for tablet/phone devices most released in the last few years should support them. And if you design your CSS with fallback to a "basic desktop browser layout" it shouldn't matter if other visitors don't support media queries (as they'll be no worse off).</p>
<p>Ewen</p>
<p>PS: double-tap to zoom item (eg, paragraph) to full screen width is a magic workaround for many many readability problems. Sadly some sites fights against that insisting that their useless sidebars must stay visible at all times :-( The iPad/iPhone browser also has "reader" button -- three horizontal lines in the sitename bar (not really a URL bar these days, as it doesn't display most of the URL :-( ) which will show just the "main text" -- available when it can auto detect what the "main text" is.</p>
</div>2014-06-22T06:40:11Z