{"id":17412,"date":"2013-06-17T18:01:18","date_gmt":"2013-06-17T10:01:18","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17412"},"modified":"2024-04-04T01:59:58","modified_gmt":"2024-04-03T17:59:58","slug":"adobe-edge-reflow","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/adobe-edge-reflow\/","title":{"rendered":"Creating Responsive Websites with Adobe Edge Reflow"},"content":{"rendered":"<p><strong>Note:<\/strong> Adobe <strong>Edge Reflow<\/strong> is no longer in service.<\/p>\n<p>In today\u2019s discussion, we delve into a tool from Adobe\u2019s past, <strong>Edge Reflow<\/strong>, which once made creating <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/rwd\/\">responsive websites<\/a> seem effortless. It was a valuable resource for both designers and developers looking to streamline their workflow.<\/p>\n<p>During its public beta phase, Adobe Edge Reflow was available for free through the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/creative.adobe.com\/\">Adobe Creative Cloud<\/a>, listed in the Apps Center under the <strong>Edge Tools and Services<\/strong> category. While we can no longer access Edge Reflow, the evolution of web design tools has continued, offering a range of alternatives that embrace the spirit of easy, responsive design.<\/p>\n<p>For those interested in modern tools that offer similar functionalities to Adobe Edge Reflow, exploring current offerings in Adobe\u2019s suite or open-source alternatives can provide pathways to effective responsive design.<\/p>\n<h2>Understanding Grids and Workspaces in Responsive Design<\/h2>\n<p>Adobe Edge Reflow introduced an intuitive UI for managing responsive layouts, emphasizing design over coding. Though <strong>Edge Reflow<\/strong> is no longer available, the principles it championed remain foundational in web design.<\/p>\n<p>On the left of the Reflow workspace, designers found tools to adjust webpage properties. This included setting the number of columns, column gutters, content width, and unit measurements (px, percentage, or em), streamlining the design process without delving into code.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/adobe-edge-reflow\/grid-setup.jpg\" alt=\"Adobe Edge Reflow grid setup example\" width=\"500\" height=\"300\"><\/figure>\n<p>One of Reflow\u2019s standout features was the straightforward creation of \u201cbreak points.\u201d These thresholds determined when a website\u2019s style would adapt to different screen sizes. Users could easily add new break points by clicking the <strong>Plus<\/strong> button and adjusting the page handler, a process that underscored the importance of fluid design in a multi-device world.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/adobe-edge-reflow\/breakpoints.jpg\" alt=\"Setting breakpoints in Adobe Edge Reflow\" width=\"500\" height=\"300\"><\/figure>\n<p>Within these break points, different styles could be applied to elements, demonstrating how they should look or behave under each condition. This feature highlighted the adaptability required in responsive web design.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/adobe-edge-reflow\/breakpoint-styles.jpg\" alt=\"Adobe Edge Reflow showing different breakpoint styles\" width=\"500\" height=\"300\"><\/figure>\n<h2>Principles of Adding and Styling Elements in Web Design<\/h2>\n<p>Adding and styling elements in a web design tool, exemplified by Adobe Edge Reflow, typically involves intuitive actions such as clicking and dragging. Selecting an element reveals its properties \u2013 width, height, margins, and padding \u2013 mirroring a straightforward approach to design.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/adobe-edge-reflow\/newbox.jpg\" alt=\"Example of creating a new box element in a web design tool\" width=\"500\" height=\"300\"><\/figure>\n<p>In the <strong>Styling<\/strong> section of such tools, designers have the ability to enhance elements with backgrounds, gradients, borders, border radii, and opacity adjustments. These features empower designers to add depth and visual appeal to their web pages with ease.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/adobe-edge-reflow\/styling-tab.jpg\" alt=\"Styling tab in a web design tool showing options for customization\" width=\"500\" height=\"300\"><\/figure>\n<p>Inspecting an element\u2019s style through a DOM Tree Inspector, positioned usually at the bottom of the workspace, allows designers to examine and modify the underlying code generated by their design choices.<\/p>\n<p>Previewing the design in a browser can be achieved with shortcut keys, such as <span class=\"key\">Command<\/span> + <span class=\"key\">F12<\/span> on Mac or <span class=\"key\">Ctrl<\/span> + <span class=\"key\">F12<\/span> on Windows, offering a quick glance at how the website will appear to users.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/adobe-edge-reflow\/dom-tree-inspector.jpg\" alt=\"DOM Tree Inspector in a web design tool\" width=\"500\" height=\"300\"><\/figure>\n<h2>Integrating Design Tools with Adobe Services<\/h2>\n<p>Tools like <strong>Reflow<\/strong> showcased the seamless integration possible within the Adobe Edge suite, enabling users to utilize font families from Adobe Edge Webfonts directly in their projects.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/adobe-edge-reflow\/webfont.jpg\" alt=\"Integrating Adobe Edge Webfonts into a project\" width=\"500\" height=\"300\"><\/figure>\n<p>Additionally, the ability to test websites across multiple mobile devices using Adobe Edge Inspect streamlined the development process, ensuring designs were responsive and functioned well across various platforms.<\/p>\n<h2>Looking Ahead in Web Design Tools<\/h2>\n<p>Although the preview version of Reflow lacked some key features like exporting projects to HTML and stylesheets, and the <strong>Preferences<\/strong> menu was inactive, it represented a significant step forward in web design tools. Its promise for simplifying the creation of responsive websites, especially for those new to web design, highlighted the potential of such tools to democratize web development by minimizing the need for direct coding.<\/p>\n<p>Reflow\u2019s legacy serves as a reminder of the importance of tool evolution and integration within digital design, encouraging a future where creativity and functionality coexist more seamlessly than ever.<\/p>\n<p><strong>What has been your experience with integrated design tools?<\/strong><\/p>","protected":false},"excerpt":{"rendered":"<p>Note: Adobe Edge Reflow is no longer in service. In today\u2019s discussion, we delve into a tool from Adobe\u2019s past, Edge Reflow, which once made creating responsive websites seem effortless. It was a valuable resource for both designers and developers looking to streamline their workflow. During its public beta phase, Adobe Edge Reflow was available&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[4492,2066],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Creating Responsive Websites with Adobe Edge Reflow - Hongkiat<\/title>\n<meta name=\"description\" content=\"Note: Adobe Edge Reflow is no longer in service. In today&#039;s discussion, we delve into a tool from Adobe&#039;s past, Edge Reflow, which once made creating\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/adobe-edge-reflow\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Responsive Websites with Adobe Edge Reflow\" \/>\n<meta property=\"og:description\" content=\"Note: Adobe Edge Reflow is no longer in service. In today&#039;s discussion, we delve into a tool from Adobe&#039;s past, Edge Reflow, which once made creating\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/adobe-edge-reflow\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-06-17T10:01:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-03T17:59:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/adobe-edge-reflow\/grid-setup.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/adobe-edge-reflow\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/adobe-edge-reflow\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Creating Responsive Websites with Adobe Edge Reflow\",\"datePublished\":\"2013-06-17T10:01:18+00:00\",\"dateModified\":\"2024-04-03T17:59:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/adobe-edge-reflow\\\/\"},\"wordCount\":631,\"commentCount\":20,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/adobe-edge-reflow\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/adobe-edge-reflow\\\/grid-setup.jpg\",\"keywords\":[\"Adobe\",\"Responsive Web Design\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/adobe-edge-reflow\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/adobe-edge-reflow\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/adobe-edge-reflow\\\/\",\"name\":\"Creating Responsive Websites with Adobe Edge Reflow - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/adobe-edge-reflow\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/adobe-edge-reflow\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/adobe-edge-reflow\\\/grid-setup.jpg\",\"datePublished\":\"2013-06-17T10:01:18+00:00\",\"dateModified\":\"2024-04-03T17:59:58+00:00\",\"description\":\"Note: Adobe Edge Reflow is no longer in service. In today's discussion, we delve into a tool from Adobe's past, Edge Reflow, which once made creating\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/adobe-edge-reflow\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/adobe-edge-reflow\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/adobe-edge-reflow\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/adobe-edge-reflow\\\/grid-setup.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/adobe-edge-reflow\\\/grid-setup.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/adobe-edge-reflow\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating Responsive Websites with Adobe Edge Reflow\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creating Responsive Websites with Adobe Edge Reflow - Hongkiat","description":"Note: Adobe Edge Reflow is no longer in service. In today's discussion, we delve into a tool from Adobe's past, Edge Reflow, which once made creating","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:\/\/www.hongkiat.com\/blog\/adobe-edge-reflow\/","og_locale":"en_US","og_type":"article","og_title":"Creating Responsive Websites with Adobe Edge Reflow","og_description":"Note: Adobe Edge Reflow is no longer in service. In today's discussion, we delve into a tool from Adobe's past, Edge Reflow, which once made creating","og_url":"https:\/\/www.hongkiat.com\/blog\/adobe-edge-reflow\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-06-17T10:01:18+00:00","article_modified_time":"2024-04-03T17:59:58+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/adobe-edge-reflow\/grid-setup.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/adobe-edge-reflow\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/adobe-edge-reflow\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Creating Responsive Websites with Adobe Edge Reflow","datePublished":"2013-06-17T10:01:18+00:00","dateModified":"2024-04-03T17:59:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/adobe-edge-reflow\/"},"wordCount":631,"commentCount":20,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/adobe-edge-reflow\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/adobe-edge-reflow\/grid-setup.jpg","keywords":["Adobe","Responsive Web Design"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/adobe-edge-reflow\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/adobe-edge-reflow\/","url":"https:\/\/www.hongkiat.com\/blog\/adobe-edge-reflow\/","name":"Creating Responsive Websites with Adobe Edge Reflow - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/adobe-edge-reflow\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/adobe-edge-reflow\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/adobe-edge-reflow\/grid-setup.jpg","datePublished":"2013-06-17T10:01:18+00:00","dateModified":"2024-04-03T17:59:58+00:00","description":"Note: Adobe Edge Reflow is no longer in service. In today's discussion, we delve into a tool from Adobe's past, Edge Reflow, which once made creating","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/adobe-edge-reflow\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/adobe-edge-reflow\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/adobe-edge-reflow\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/adobe-edge-reflow\/grid-setup.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/adobe-edge-reflow\/grid-setup.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/adobe-edge-reflow\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating Responsive Websites with Adobe Edge Reflow"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4wQ","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17412","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=17412"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17412\/revisions"}],"predecessor-version":[{"id":71654,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17412\/revisions\/71654"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=17412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=17412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=17412"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=17412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}