{"id":28903,"date":"2015-10-01T06:00:44","date_gmt":"2015-10-01T13:00:44","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=28903"},"modified":"2024-04-09T05:20:36","modified_gmt":"2024-04-09T12:20:36","slug":"the-new-os-x-has-a-secret-tool-every-web-designer-will-love","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/the-new-os-x-has-a-secret-tool-every-web-designer-will-love","title":{"rendered":"The New OS X Has a Secret Tool Every Web Designer Will Love"},"content":{"rendered":"<p>Today marks the release of the latest edition of OS X, <a href=\"http:\/\/www.apple.com\/osx\/\">10.11 El Capitan<\/a>. We could spend a ton of time talking about all of the cool new features, but there&#8217;s one that&#8217;s flying a bit under the radar: Safari has added responsive design previews.<br \/>\nIf you&#8217;re a web developer, this is huge news. Instead of constantly resizing your browser windows to approximate specs, you can just click an icon and make it happen. So how do you pull the trigger on this awesomeness?<br \/>\nFirst, go into Safari &gt; Preferences &gt; Advanced. Then look down at the bottom and click the box that reads, &#8220;Show Develop Menu in Menu Bar.&#8221; It looks like this (well, minus the big red arrow):<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/10\/09044607\/el-capitan-responsive-1.jpg.webp\" alt=\"\" width=\"680\" height=\"436\" class=\"aligncenter size-full wp-image-28905\"><br \/>\nOnce you&#8217;re done, you can turn Responsive Design Mode on and off by hitting option\/command R, or just going into the Develop menu and clicking on the menu item. Then, whatever page you happen to have open, will look like this:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/10\/09044611\/el-capitan-responsive-4.jpg.webp\" alt=\"\" width=\"680\" height=\"460\" class=\"aligncenter size-full wp-image-28913\"><br \/>\nSweet, right?<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/10\/09044614\/el-capitan-responsive-5.jpg.webp\" alt=\"\" width=\"681\" height=\"919\" class=\"aligncenter size-full wp-image-28915\"><br \/>\nJust click on the icons in the top row to change the site to the sizes of various iOS and Apple devices. Just like that, your developing world got a little bit easier.<br \/>\n<em>via <a href=\"http:\/\/www.mcelhearn.com\/use-safaris-responsive-design-mode-in-el-capitan\/?ref=webdesignernews.com\">Kirkville<\/a><\/em><\/p>\n<hr>\n<p><em><a href=\"http:\/\/kevinwhipps.com\">Kevin Whipps<\/a> is a writer and editor based in Phoenix, Arizona. When he&#8217;s not working on one of the many writing projects in his queue, he&#8217;s designing stickers with his wife at <a href=\"http:\/\/whippsstickerco.com\">Whipps Sticker Co.<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today marks the release of the latest edition of OS X, 10.11 El Capitan. We could spend a ton of time talking about all of the cool new features, but there&#8217;s one that&#8217;s flying a bit under the radar: Safari has added responsive design previews. If you&#8217;re a web developer, this is huge news. Instead [&hellip;]<\/p>\n","protected":false},"author":89,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[74],"tags":[61],"topics":[],"class_list":["post-28903","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-design"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v28.4 (Yoast SEO v28.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>The New OS X Has a Secret Tool Every Web Designer Will Love - Creative Market Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativemarket.com\/blog\/the-new-os-x-has-a-secret-tool-every-web-designer-will-love\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The New OS X Has a Secret Tool Every Web Designer Will Love\" \/>\n<meta property=\"og:description\" content=\"Today marks the release of the latest edition of OS X, 10.11 El Capitan. We could spend a ton of time talking about all of the cool new features, but\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativemarket.com\/blog\/the-new-os-x-has-a-secret-tool-every-web-designer-will-love\" \/>\n<meta property=\"og:site_name\" content=\"Creative Market Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crtvmrkt\" \/>\n<meta property=\"article:published_time\" content=\"2015-10-01T13:00:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-09T12:20:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/10\/09044607\/el-capitan-responsive-1.jpg.webp\" \/>\n<meta name=\"author\" content=\"Kevin Whipps\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:site\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kevin Whipps\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/the-new-os-x-has-a-secret-tool-every-web-designer-will-love\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/the-new-os-x-has-a-secret-tool-every-web-designer-will-love\",\"name\":\"The New OS X Has a Secret Tool Every Web Designer Will Love - Creative Market Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/the-new-os-x-has-a-secret-tool-every-web-designer-will-love#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/the-new-os-x-has-a-secret-tool-every-web-designer-will-love#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2015\\\/10\\\/09044607\\\/el-capitan-responsive-1.jpg.webp\",\"datePublished\":\"2015-10-01T13:00:44+00:00\",\"dateModified\":\"2024-04-09T12:20:36+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#\\\/schema\\\/person\\\/7e1bedbb0cb22aaa056fc5b9e218cd6c\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/the-new-os-x-has-a-secret-tool-every-web-designer-will-love#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativemarket.com\\\/blog\\\/the-new-os-x-has-a-secret-tool-every-web-designer-will-love\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/the-new-os-x-has-a-secret-tool-every-web-designer-will-love#primaryimage\",\"url\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2015\\\/10\\\/09044607\\\/el-capitan-responsive-1.jpg.webp\",\"contentUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2015\\\/10\\\/09044607\\\/el-capitan-responsive-1.jpg.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/the-new-os-x-has-a-secret-tool-every-web-designer-will-love#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The New OS X Has a Secret Tool Every Web Designer Will Love\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\",\"name\":\"Creative Market Blog\",\"description\":\"Creative Market Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"The New OS X Has a Secret Tool Every Web Designer Will Love - Creative Market Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/creativemarket.com\/blog\/the-new-os-x-has-a-secret-tool-every-web-designer-will-love","og_locale":"en_US","og_type":"article","og_title":"The New OS X Has a Secret Tool Every Web Designer Will Love","og_description":"Today marks the release of the latest edition of OS X, 10.11 El Capitan. We could spend a ton of time talking about all of the cool new features, but","og_url":"https:\/\/creativemarket.com\/blog\/the-new-os-x-has-a-secret-tool-every-web-designer-will-love","og_site_name":"Creative Market Blog","article_publisher":"https:\/\/www.facebook.com\/crtvmrkt","article_published_time":"2015-10-01T13:00:44+00:00","article_modified_time":"2024-04-09T12:20:36+00:00","og_image":[{"url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/10\/09044607\/el-capitan-responsive-1.jpg.webp","type":"","width":"","height":""}],"author":"Kevin Whipps","twitter_card":"summary_large_image","twitter_creator":"@creativemarket","twitter_site":"@creativemarket","twitter_misc":{"Written by":"Kevin Whipps","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativemarket.com\/blog\/the-new-os-x-has-a-secret-tool-every-web-designer-will-love","url":"https:\/\/creativemarket.com\/blog\/the-new-os-x-has-a-secret-tool-every-web-designer-will-love","name":"The New OS X Has a Secret Tool Every Web Designer Will Love - Creative Market Blog","isPartOf":{"@id":"https:\/\/creativemarket.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativemarket.com\/blog\/the-new-os-x-has-a-secret-tool-every-web-designer-will-love#primaryimage"},"image":{"@id":"https:\/\/creativemarket.com\/blog\/the-new-os-x-has-a-secret-tool-every-web-designer-will-love#primaryimage"},"thumbnailUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/10\/09044607\/el-capitan-responsive-1.jpg.webp","datePublished":"2015-10-01T13:00:44+00:00","dateModified":"2024-04-09T12:20:36+00:00","author":{"@id":"https:\/\/creativemarket.com\/blog\/#\/schema\/person\/7e1bedbb0cb22aaa056fc5b9e218cd6c"},"breadcrumb":{"@id":"https:\/\/creativemarket.com\/blog\/the-new-os-x-has-a-secret-tool-every-web-designer-will-love#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativemarket.com\/blog\/the-new-os-x-has-a-secret-tool-every-web-designer-will-love"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creativemarket.com\/blog\/the-new-os-x-has-a-secret-tool-every-web-designer-will-love#primaryimage","url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/10\/09044607\/el-capitan-responsive-1.jpg.webp","contentUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/10\/09044607\/el-capitan-responsive-1.jpg.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/creativemarket.com\/blog\/the-new-os-x-has-a-secret-tool-every-web-designer-will-love#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativemarket.com\/blog\/"},{"@type":"ListItem","position":2,"name":"The New OS X Has a Secret Tool Every Web Designer Will Love"}]},{"@type":"WebSite","@id":"https:\/\/creativemarket.com\/blog\/#website","url":"https:\/\/creativemarket.com\/blog\/","name":"Creative Market Blog","description":"Creative Market Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creativemarket.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/28903","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/users\/89"}],"replies":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/comments?post=28903"}],"version-history":[{"count":0,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/28903\/revisions"}],"wp:attachment":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/media?parent=28903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/categories?post=28903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/tags?post=28903"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/topics?post=28903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}