Archives for mobile

An example of SharePoint responsive design

We recently went live with a responsive retrofit of a complex SharePoint site: the website of Tennant Company. Their site looks like this at desktop resolution (click the image for a larger view): It looks like this on a small screen: You can see the responsive styles in action by resizing the site in your desktop browser: As the browser window shrinks, the page changes. The conversion used a bunch of techniques I’ve discussed before. For instance, their service-plan grid uses faux tables in place of real tables. On their product category pages, category tiles collapse down to just their
Read More

Responsive design and server-side code

Update This post has been completely re-written to describe a better way of making server-side code responsive. Instead of posting the variable through Ajax, it uses GET to load a fully-responsive page. A few code tweaks make the technique both user- and search-engine friendly. Update 2: In screensize.php, changed window.location.href = $sizeurl; to window.location.replace($sizeurl); to fix back-button issue in IE. Introduction Responsive design — where the display of a web page responds to the size of the screen or browser window being used to view it — is awesome. It lets designers adjust the display of their website so it’s
Read More

Responsive, CSS-only faux tables

Tables are mildly responsive — the individual cells can resize as necessary. But they aren’t fully responsive without Javascript: You can’t take two TDs that are next to each other and suddenly have them stack, as that requires changing the HTML structure of the table. But you *can* do it with divs that are made to *look* like a table. See the demo here. HTML <div class="table-wrap">     <div class="row-wrap">         <div class="left-td"></div>         <div class="right-td"></div>         <div class="clear"></div>     </div> </div> Note how we’re using divs to mimic a table’s “table -> tr -> td” structure.
Read More