Squishing your content down for Mobile Devices

Written by James McDonald

September 10, 2014

As usual my experience comes just after I need it.

Been working on mobile enabling a web page and am trying to get the content to display sensibly on an iPhone and a Galaxy.

I’m making a lot of mistakes… I’ve been using pixels for button sizes and they are horrendously different sizes depending on how it’s being viewed ( Desktop / Mobile )

So to the Google and I have found:

http://www.html5rocks.com/en/mobile/responsivedesign/ – Which is an over view of responsive design. In other words how to squish stuff into different screen sizes. It’s also explains data uris (Packing Icons into base64 encoded CSS attributes  so you can load your icons as part of your CSS load and not do dozens of extra HTTP requests for them).

This led to a Fluid Grid site which gives  you the secret (a formula and examples) to creating proportional CSS. http://alistapart.com/article/fluidgrids

Finally there is the Google Page on Responsive Design which is an improved update of the first link I listed and should prove very interesting once I read it.


Another couple of helpful links:

http://www.useragentstring.com Which provides a database of User Agents Strings too.

The below link shows options for emulating mobile devices in Google’s Chrome browser.
https://developer.chrome.com/devtools/docs/device-mode <== this allows me to remove the User Agent Switcher (which  I found annoying because it changed the User Agent for all my tabs)  and just use the emulation mode in one tab…. nice!


Submit a Comment

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.

You May Also Like…