{"id":27625,"date":"2023-01-07T18:47:19","date_gmt":"2023-01-08T02:47:19","guid":{"rendered":"https:\/\/www.podfeet.com\/blog\/?p=27625"},"modified":"2023-01-08T07:41:22","modified_gmt":"2023-01-08T15:41:22","slug":"firefox-developer-edition","status":"publish","type":"post","link":"https:\/\/www.podfeet.com\/blog\/2023\/01\/firefox-developer-edition\/","title":{"rendered":"Tiny Tip \u2014 Firefox Developer Edition for Testing Responsive Design (and Regular Firefox and Safari)"},"content":{"rendered":"

A few times over the past couple of years I\u2019ve mentioned an app called Sizzy<\/a> that Helma from the Netherlands recommended to me. Sizzy is a very slick tool for people who are developing websites and web apps. The main problem it solved for Helma and me is that it shows you what your web app or site will look on a whole bunch of different platforms all at once.<\/p>\n

You might make a site that looks great on your Mac, but squished onto an iPhone SE it\u2019s not useful at all. Sizzy can show you the site on the SE and a Galaxy Tab and a portrait-mode iPad and more.<\/p>\n

Helma discovered Sizzy in Setapp and turned me onto it. I kept meaning to do a review, but it was a pretty high-end tool and had so much more built-in capability that I didn\u2019t use or understand that I never did the review.<\/p>\n

A few months ago, we discovered that Sizzy had been removed from Setapp and we were both super sad. I looked into buying Sizzy but it\u2019s a subscription model with the least expensive pricing being $12\/month. For how little I actually code, I couldn\u2019t justify the price. If you do web development for a living, I highly recommend you check out Sizzy to see if it can help you in your work. It just wasn’t right for me, but I was sad to lose the responsive design mode that I used from Sizzy.<\/p>\n

This week though, Helma discovered something wonderful. The lovely people at Mozilla have come out with a Developer Edition of Firefox that includes tools to view your sites and just their responsive design on a whole bunch of platforms. And of course, it\u2019s free.<\/p>\n

You can download the Firefox Developer Edition at www.mozilla.org\/\u2026<\/a>. From there, navigate to the site you want to test. In the toolbar on the right side is a wrench and under that is an option for Responsive Design Mode (or you can use the keystroke option-command-M.<\/p>\n

\"Firefox
Firefox Developer Edition \u2014 Choose Responsive Design Mode<\/figcaption><\/figure>\n

Immediately the layout of the website you\u2019ve navigated to will change to reflect one of the screen sizes. Mine defaulted to an iPhone 11 Pro, but there\u2019s a dropdown to show many more options. It looks like the list isn\u2019t super up-to-date because it maxes out on the iPhone 13 Pro. It includes the Galaxy Note 20, Galaxy 10 and 10+ and more.<\/p>\n

\"Firefox
Firefox Developer Edition \u2013 Dropdown for Devices<\/figcaption><\/figure>\n

At the bottom of the dropdown, it has an option to edit the list, and from there a grid of lots more devices. You can check and uncheck them to make your dropdown list just the devices you\u2019d like to see.<\/p>\n

If you don\u2019t see a device you really need in the grid, you can create it yourself with the Create Custom option.<\/p>\n

\"Firefox
Firefox Developer Edition Grid of Devices<\/figcaption><\/figure>\n

You will probably want to explore their new features to help you master the CSS Grid, find inactive CSS, work more quickly with their fonts panel, and more.<\/p>\n

I’m delighted to have an easy way to get the one feature I used in Sizzy, and for the glorious price of free.<\/p>\n

\n

After I wrote up this glorious discovery, I tooted it out on Mastodon and other places. @scottishwildcat@mastodon.ie tooted me back with:<\/p>\n

\n You don’t need the developer edition for this afaik, it’s available in all versions of Firefox. Chrome and Safari have very similar tools too.\n<\/p><\/blockquote>\n

I jumped into “regular” Firefox and sure enough, under the Tools menu in Browser Tools is Responsive Design mode which brings up the exact same thing. And here I thought Helma and I had made fire! I feel silly but I’d much rather feel silly and never know the tools are right there.<\/p>\n

In Safari you have to do a smidge more work (work I’d already done). Open Safari Settings (Preferences if you’re on pre-Ventura macOS). Select the Advanced tab and at the bottom, you’ll see a checkbox to show the Develop menu in the menu bar.<\/p>\n

\"Safari
Enable Develop Menu in Safari Settings<\/figcaption><\/figure>\n

Once you close Settings\/Preferences for Safari, you’ll now see the Develop menu between Bookmarks and Window. It’s a long menu with lots of cool stuff in it, but the 7th item down says Responsive Design Mode and can be triggered with Control-Command-R.<\/p>\n

\"Safari
Safari Responsive Design Mode<\/figcaption><\/figure>\n

You’ll be rewarded with little icons for the major Apple products (but only up to iPhone 8 Plus so I guess Firefox isn’t actually far behind.) In typical Apple fashion, it doesn’t include any Android tablets or phones but it does have 3 screen resolutions you can test. Unlike Firefox, you can’t rotate to landscape either. It’s sweet that Apple tried, but I’ll be using regular Firefox for testing responsive design of my web apps and websites.<\/p>\n

I’m so glad that scottishwildcat corrected me, especially<\/em> before I talked about it on the podcast!<\/p>\n","protected":false},"excerpt":{"rendered":"

A few times over the past couple of years I\u2019ve mentioned an app called Sizzy that Helma from the Netherlands recommended to me. Sizzy is a very slick tool for people who are developing websites and web apps. The main problem it solved for Helma and me is that it shows you what your web […]<\/p>\n","protected":false},"author":1,"featured_media":16867,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":true,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[147],"tags":[5642,71,2059,3583,1704],"class_list":["post-27625","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-posts","tag-development","tag-firefox","tag-responsive-design","tag-web-app","tag-web-design"],"jetpack_featured_media_url":"https:\/\/www.podfeet.com\/blog\/wp-content\/uploads\/2018\/11\/Tiny-Tip-landscape.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/posts\/27625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/comments?post=27625"}],"version-history":[{"count":6,"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/posts\/27625\/revisions"}],"predecessor-version":[{"id":27633,"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/posts\/27625\/revisions\/27633"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/media\/16867"}],"wp:attachment":[{"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/media?parent=27625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/categories?post=27625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/tags?post=27625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}