CSS Codes
CSS Layouts
View RSS Feed

molendijk

Viewing your site in Responsive Design Mode

Rate this Entry
6 Comments
by
molendijk
, 09-19-2013 at 11:01 PM (113074 Views)
Hi everyone,
The latest version of Firefox (24.0) offers some interesting new features, among which the possibility to view your site (any site) in Responsive Design Mode. So if you want to know how your site looks like with a mobile device (Iphone, Ipad etc.), view it using Firefox.
(Not that I care much about people who use devices that inherently offer poor website vision, of course).

Submit "Viewing your site in Responsive Design Mode" to del.icio.us Submit "Viewing your site in Responsive Design Mode" to StumbleUpon Submit "Viewing your site in Responsive Design Mode" to Google Submit "Viewing your site in Responsive Design Mode" to Digg

Tags: None Add / Edit Tags
Categories
Uncategorized

Comments

  1. molendijk's Avatar
    Talking about Responsive Web Design:
    you can test your site here.
  2. Beverleyh's Avatar
    Well those are certainly much easier than playing "draggy" with the browser window

    Just to help out those who might not see where to get to the responsive view in Firefox;

    - press ALT (in Windows) to display the menu bar if you don't already have it
    - Tools >> Developer >> Resonsive Design View

    OR, press CTRL+Shift+M

    Its funny you posted this when you did Arie - I just was just working on making my Fast Edit website responsive/adaptive and it was very useful to see all the screen widths alongside each other using the Matt Kersley tool: http://fast-edit.co.uk/rwd/

    Thanks for sharing
    Updated 09-30-2013 at 06:16 PM by Beverleyh
  3. molendijk's Avatar
    Quote Originally Posted by Beverleyh
    Its funny you posted this when you did Arie - I just was just working on making my Fast Edit website responsive/adaptive and it was very useful to see all the screen widths alongside each other using the Matt Kersley tool: http://fast-edit.co.uk/rwd/Thanks for sharing
    A funny coincidence indeed. Btw, I put your own website to the test using http://fast-edit.co.uk/rwd/. Result: horizontal scroll bars. But http://fast-edit.co.uk/rwd itself is perfect.
    EDIT: Beverleyh, I'm getting interested in tnis responsive/liquid thing, see this.
    Updated 09-30-2013 at 08:22 PM by molendijk
  4. Beverleyh's Avatar
    I made a few changes to the original CSS so maybe when you viewed it the first time, the stuff that gave horizontal scrollbars was present from the cached CSS. I think that on the second view, the revised CSS loaded in and corrected it

    Your script is weeny! I cant believe just a few short lines has such a drastic effect - that's very handy. Its a pretty neat solution.

    I want to work more with responsive design too, but I think I should try to work on the basis of "mobile first" - I did the Fast Edit website the wrong way round (by making a 'full version' and then scaling down), which has put a bit more CSS in play than really there needs to be. Plus its a hybrid of both responsive and adaptive approaches since it uses scalable % and em measurements within the boundaries of media query breakpoints. It was fun though.
  5. molendijk's Avatar
    Quote Originally Posted by Beverleyh
    I made a few changes to the original CSS so maybe when you viewed it the first time, the stuff that gave horizontal scrollbars was present from the cached CSS. I think that on the second view, the revised CSS loaded in and corrected it
    Are we both referring to http://fofwebdesign.co.uk/?
  6. Beverleyh's Avatar
    Oh no, sorry, I thought you meant the Fast Edit site. I haven't got around to 'responsifying' the FoF site yet.