Testing responsive layouts with the RWD bookmarklet
Max Glenister
Lately I’ve been doing some work with responsive CSS and media queries. This bookmarklet has been very useful. It allows you to switch between four different browser widths (for iPad and iPhone in portrait/landscape orientations).
To use it’s quite simple:
- Drag the bookmarklet to your bookmarks bar (or rightclick the bookmarklet and bookmark it)
- View the page you want to test your responsive break points on
- Click the bookmarklet, it will load the toolbar
- Switch between the different screen sizes using the toolbar
You can find the Responsive Design Bookmarklet at Victor Coulon’s website
I’ve made this in to a Chrome Extension, you can find it here: RWD Extension for Google Chrome
Related posts
- Meta post about making this blog responsive and not using px
If you’re a returning visitor to blomg you might notice some changes to the design.
- Fluid video embeds for your responsive website
Recently I came across an interesting problem, fluidly scaling iframe/embed code on a responsive design. The problem surfaced because I was using a fluid width and a fixed height for my video embed, and so at some screen sizes the video would look fine, and at others it would have some black banding at the edges.
- Antiquated CSS and why we needed it
I came across a catalogue of antiquated HTML snippets and artefacts, the kind of markup we just accepted as necessary in the <head> of every site. It got me thinking about the CSS side of that same period, the stylesheets rather than the markup. My first job in 2009 was building marketing campaign pages for an electronics distributor’s B2B storefront, where dropping IE6 was not a conversation anyone was going to have. Developers eventually landed on one clean way to target different IE versions, but getting there took a lot of less elegant detours.
Discussion
No interactions yet
Join the conversation
Reply from your own site with a Webmention (how?).