I am building a new mobilization add-on for Plone CMS. I’d like to share the following workflow which I found greatly to speed up CSS tuning tasks for responsive design
- Use CSS “screen and (max-width: 900px)” media query to switch between desktop and mobile versions
- Open the site in full screen Firefox. This is the desktop version.
- Open the site in Chrome and shrink the window until the max-width discriminator kicks in. You get the mobile version.
- Detach Developer Tools Window from Chrome main window which is now too narrow for the tools.
This way you have CSS debugger for desktop and mobile versions open simultaneously and you still use your screen real estate effectively.
A mobile version and Chrome’s CSS debugger on the top of desktop Firefox.
![\"\"](\"https://www.feedburner.com/fb/images/pub/feed-icon16x16.png\")
Subscribe to RSS feed ![](\"https://opensourcehacker.com/wp-content/uploads/twitter-24.png\")
Follow me on Twitter
![](\"http://opensourcehacker.com/wp-content/uploads/facebook-24.png\")
Follow me on Facebook ![](\"https://opensourcehacker.com/wp-content/uploads/googleplus.png\")
Follow me Google+
When I worked on the responsive design for the Six Feet Up site, I mainly used Firefox. By constantly resizing the browser, I was able to see where certain elements started to look bad and needed to be fixed. This ensured that the site would look good for any user, no matter what size they kept their browser open. Once it looked good in Firefox, then I’d do testing on an actual mobile browser, which would still occasionally need some tweaking.
I’m looking forward to seeing this mobilization product in action.
please conside xxx as gallery.
mactrash: what kind of spam was that?
I use following snippet to test common resolutions, but the site content should respond based on it’s needs/size anyway:
javascript:(function(){document.body.appendChild(document.createElement(‘script’)).src=’http://codebomber.com/jquery/resizer/resizer.min.js’;})();