{"id":326,"date":"2026-06-01T14:32:09","date_gmt":"2026-06-01T18:32:09","guid":{"rendered":"https:\/\/websitedesignnh.com\/news\/what-is-responsive-web-design\/"},"modified":"2026-06-01T14:32:09","modified_gmt":"2026-06-01T18:32:09","slug":"what-is-responsive-web-design","status":"publish","type":"post","link":"https:\/\/websitedesignnh.com\/news\/what-is-responsive-web-design\/","title":{"rendered":"Responsive Web Design Explained: Build for Every Screen"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 ez-toc-wrap-center counter-flat ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title ez-toc-toggle\" style=\"cursor:pointer\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #6c0511;color:#6c0511\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #6c0511;color:#6c0511\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/websitedesignnh.com\/news\/what-is-responsive-web-design\/#What_Is_Responsive_Web_Design\" >What Is Responsive Web Design?<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/websitedesignnh.com\/news\/what-is-responsive-web-design\/#Key_Principles_and_Concepts\" >Key Principles and Concepts<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/websitedesignnh.com\/news\/what-is-responsive-web-design\/#Step-by-Step_How_to_Make_a_Website_Responsive\" >Step-by-Step: How to Make a Website Responsive<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/websitedesignnh.com\/news\/what-is-responsive-web-design\/#Practical_Applications_and_Troubleshooting\" >Practical Applications and Troubleshooting<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/websitedesignnh.com\/news\/what-is-responsive-web-design\/#Conclusion\" >Conclusion<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/websitedesignnh.com\/news\/what-is-responsive-web-design\/#FAQ\" >FAQ<\/a><\/li><\/ul><\/nav><\/div>\n\n<p class=\"wp-block-paragraph\">Building a website that looks great on every screen size is no longer optional \u2014 it&#8217;s the baseline expectation. Users browse on phones during commutes, on tablets at home, and on wide desktop monitors at work. If your site breaks or becomes hard to use on any of those devices, you lose visitors fast.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Responsive web design solves this problem elegantly. Instead of building separate versions of your site for different devices, you build one site that adapts fluidly to any screen. This approach saves time, reduces maintenance headaches, and delivers a consistent experience across all devices. For businesses trying to <a href=\"https:\/\/websitedesignnh.com\/news\/how-to-generate-leads-from-your-website\/\">generate leads from their website<\/a>, a responsive layout is one of the most direct ways to stop losing potential customers at the first click.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This guide walks through everything you need to know \u2014 from the core concepts to practical implementation steps, troubleshooting tips, and performance best practices. Whether you are starting fresh or updating an existing site, you will find clear, actionable guidance here.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Is_Responsive_Web_Design\"><\/span>What Is Responsive Web Design?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Simple definition and why it matters<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Responsive web design is a web development approach where a single website automatically adjusts its layout, images, and content to fit the screen size of any device. The term was popularized by Ethan Marcotte, who described it as a combination of fluid grids, flexible images, and CSS media queries working together.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It matters because screen resolution varies enormously across devices. A layout that looks polished on a 1440px desktop monitor can become completely unusable on a 375px smartphone screen without responsive design in place.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>User experience (UX) is directly tied to how well a site adapts.<\/strong> Poor mobile experiences lead to higher bounce rates, lower engagement, and lost conversions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How responsive design differs from adaptive and mobile-only sites<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Adaptive design uses fixed layouts for specific screen sizes. The server detects the device and serves a pre-built layout. Responsive design, by contrast, uses fluid layouts that scale continuously between breakpoints.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mobile-only sites are separate websites built exclusively for small screens, usually hosted on a subdomain. They require double the maintenance and often deliver inconsistent content between versions.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table>\n  <thead>\n    <tr>\n      <th>Approach<\/th>\n      <th>How It Works<\/th>\n      <th>Maintenance Level<\/th>\n    <\/tr>\n  <\/thead>\n  <tbody>\n    <tr>\n      <td>Responsive Design<\/td>\n      <td>One site, fluid layout adapts to all screens<\/td>\n      <td>Low<\/td>\n    <\/tr>\n    <tr>\n      <td>Adaptive Design<\/td>\n      <td>Fixed layouts served per device type<\/td>\n      <td>Medium<\/td>\n    <\/tr>\n    <tr>\n      <td>Mobile-Only Site<\/td>\n      <td>Separate site for mobile users<\/td>\n      <td>High<\/td>\n    <\/tr>\n  <\/tbody>\n<\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Core building blocks: HTML, CSS, fluid layouts, media queries, and responsive images<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Responsive web design relies on a handful of core technologies working together. HTML5 provides the semantic structure. CSS3 handles the visual presentation and layout logic. Fluid grid layouts use percentage-based widths instead of fixed pixels.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CSS media queries allow you to apply different styles at different screen widths. Flexible images scale within their containers rather than overflowing them. The viewport meta tag tells mobile browsers how to scale the page correctly.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n  <li>HTML5 semantic structure<\/li>\n  <li>CSS3 for styling and layout<\/li>\n  <li>Fluid grid layout with relative units<\/li>\n  <li>CSS media queries for breakpoints<\/li>\n  <li>Flexible images and responsive typography<\/li>\n  <li>Viewport meta tag for mobile rendering<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Key_Principles_and_Concepts\"><\/span>Key Principles and Concepts<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Fluid grids and relative units (%, em, rem, vw, vh)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A fluid grid layout divides the page into columns using percentage widths rather than fixed pixel values. When the browser window shrinks, columns shrink proportionally. This creates natural flexibility without requiring a separate layout for every screen size.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Relative units are the engine behind fluid grids. Percentages define widths relative to the parent container. Em and rem units scale typography relative to a base font size. Vw and vh units scale elements relative to the viewport width and height.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Using rem for font sizes is particularly useful<\/em> because it stays consistent across nested elements, making typography easier to manage at scale.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Media queries and breakpoints explained in plain language<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A media query is a CSS rule that applies styles only when certain conditions are met \u2014 most commonly, when the screen width falls within a specific range. Breakpoints are the specific width values where your layout changes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Common breakpoints align with typical device widths. A small breakpoint around 480px targets phones. A medium breakpoint around 768px targets tablets. A large breakpoint around 1024px targets laptops and desktops.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You do not need to match every possible screen resolution. The goal is to ensure your layout looks good across the full range, not to target specific devices.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Responsive images and typography for different screens<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Images that are not flexible will overflow their containers on small screens. Setting images to max-width: 100% in CSS ensures they scale down within their parent element without distorting.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The HTML srcset attribute lets you serve different image files at different screen sizes, reducing unnecessary data transfer on mobile devices. This directly improves page load speed and contributes to better Core Web Vitals scores.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Typography also needs to scale. Using viewport-relative units like vw for headings allows text to grow and shrink with the screen. Combining this with clamp() in CSS gives you precise control over minimum and maximum font sizes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mobile-first vs. desktop-first approaches<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Mobile-first design means writing your base CSS for small screens and then using media queries to add complexity as the screen gets larger. Desktop-first is the reverse \u2014 you start with a full desktop layout and use media queries to simplify it for smaller screens.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mobile-first is generally the better approach. It forces you to prioritize essential content and keeps your base CSS lean. Since most web traffic now comes from mobile devices, starting small makes practical sense.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n  <li>Mobile-first: base styles for small screens, scale up<\/li>\n  <li>Desktop-first: full layout first, simplify for mobile<\/li>\n  <li>Mobile-first produces leaner, faster base stylesheets<\/li>\n  <li>Desktop-first can lead to bloated mobile CSS<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step-by-Step_How_to_Make_a_Website_Responsive\"><\/span>Step-by-Step: How to Make a Website Responsive<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Planning your layout and content hierarchy for small screens first<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Before writing a single line of CSS, map out your content hierarchy. Decide what users need to see first on a small screen. Navigation, headlines, and calls to action should be immediately visible. Secondary content can appear further down or be hidden behind toggles.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sketch your mobile layout on paper or in a wireframing tool. This forces you to make real decisions about content priority rather than just squishing a desktop layout into a smaller space.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Converting a fixed-width layout into a fluid grid<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Start by identifying all fixed-width containers in your CSS. Replace pixel values with percentage widths. A simple formula helps: divide the element width by its parent width and multiply by 100.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, a 600px column inside a 1200px container becomes 50%. Apply this logic across your entire layout. Then test by resizing your browser window \u2014 the layout should scale smoothly without breaking.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Adding media queries to adjust layout at common breakpoints<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Once your fluid grid is in place, add media queries to handle layout shifts at key breakpoints. A two-column layout on desktop might stack into a single column on mobile. Navigation links might collapse into a hamburger menu below 768px.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Write your media queries using min-width for mobile-first or max-width for desktop-first. Keep breakpoints consistent throughout your stylesheet to avoid conflicts and confusion.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Implementing responsive images and flexible typography in CSS<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Add this rule to your global CSS to make all images responsive immediately: img { max-width: 100%; height: auto; }. This single line prevents most image overflow issues without any additional work.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For typography, set a base font size on the html element using rem units. Then use clamp() for headings to allow smooth scaling between a minimum and maximum size. This eliminates the need for multiple font-size declarations across different breakpoints.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Testing responsiveness with browser tools and real devices<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Chrome DevTools includes a device toolbar that lets you simulate different screen sizes and touch screen navigation. Use it to check your layout at every major breakpoint. Look for text overflow, broken grids, and horizontal scroll issues.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Google Mobile-Friendly Test is a free tool that analyzes your page and flags mobile usability problems. Testing on real devices is also important \u2014 emulators do not always replicate real-world rendering accurately. Cross-browser compatibility testing ensures your layout holds up across Chrome, Firefox, Safari, and Edge.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Practical_Applications_and_Troubleshooting\"><\/span>Practical Applications and Troubleshooting<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Improving user experience and SEO with responsive design<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Google uses mobile-first indexing, meaning it primarily uses the mobile version of your site for ranking. A responsive site ensures that the content Google crawls on mobile matches what desktop users see. This consistency is a direct SEO benefit.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Responsive design also reduces bounce rates by delivering a usable experience on every device. For local businesses, this is especially important \u2014 a site built for <a href=\"https:\/\/websitedesignnh.com\/news\/web-design-for-nh-businesses\/\">NH businesses that actually convert<\/a> needs to perform flawlessly on the phones that local customers use to search and browse.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Using CSS frameworks (like Bootstrap or Tailwind) for faster responsive layouts<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Bootstrap framework provides a pre-built 12-column fluid grid layout, responsive utility classes, and ready-made components. It significantly speeds up web development by handling much of the responsive logic for you.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tailwind CSS takes a different approach with utility-first classes. You apply responsive prefixes directly in your HTML to control how elements behave at different breakpoints. Both frameworks support mobile-first design out of the box.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n  <li>Bootstrap: grid system, components, and responsive utilities<\/li>\n  <li>Tailwind: utility-first, highly customizable, mobile-first<\/li>\n  <li>Both reduce the amount of custom CSS you need to write<\/li>\n  <li>Frameworks work well with any content management system (CMS)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Common layout issues (overflow, horizontal scroll, broken grids) and how to fix them<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Horizontal scroll is one of the most common responsive design problems. It usually happens when an element has a fixed width wider than the viewport. Adding overflow-x: hidden to the body can mask the symptom, but finding and fixing the offending element is the proper solution.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Broken grids often result from incorrect percentage calculations or missing box-sizing declarations. Setting box-sizing: border-box globally ensures padding and borders are included in width calculations, preventing unexpected overflow.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Images and embedded content like iframes frequently cause overflow issues. Wrapping iframes in a container with a percentage-based padding trick maintains aspect ratios across screen sizes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Performance tips: image optimization, reducing CSS\/JS bloat, and avoiding layout shifts<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Large unoptimized images are the most common cause of slow page load speed on mobile. Compress images before uploading and use modern formats like WebP where possible. Serve appropriately sized images using srcset to avoid loading desktop-sized images on small screens.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Core Web Vitals measure real-world performance<\/strong> including loading speed, interactivity, and visual stability. Cumulative Layout Shift (CLS) \u2014 a Core Web Vitals metric \u2014 measures how much elements move around during loading. Always define width and height attributes on images to reserve space and prevent layout shifts.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Minimize unused CSS and JavaScript. Large stylesheets slow down rendering, especially on mobile networks. Remove unused rules, combine files where possible, and defer non-critical scripts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Responsive web design is the foundation of any modern website. It ensures your content reaches users effectively regardless of the device they use, supports better search rankings, and delivers the kind of smooth experience that keeps visitors engaged. The technical pieces \u2014 fluid grids, CSS media queries, flexible images, and thoughtful breakpoints \u2014 are all learnable and implementable without starting from scratch. Start with a mobile-first mindset, test thoroughly, and optimize for performance. Your users and your website traffic numbers will reflect the effort.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"FAQ\"><\/span>FAQ<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Do I still need a separate mobile site if my website is responsive?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">No. A properly implemented responsive website eliminates the need for a separate mobile site. Separate mobile sites create duplicate content issues, require double the maintenance, and often deliver inconsistent experiences. A single responsive site handles all screen sizes efficiently.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What are the most important breakpoints to use in responsive web design?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">There is no universal answer, but common breakpoints are 480px for small phones, 768px for tablets, and 1024px for laptops. Rather than targeting specific devices, set breakpoints where your layout naturally starts to break. Let your content guide your breakpoint decisions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Can I add responsive design to an existing website without rebuilding it from scratch?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes, in most cases. Start by adding the viewport meta tag if it is missing. Then convert fixed widths to percentages and add media queries progressively. Using a CSS framework can speed up this process. A full rebuild is only necessary when the existing codebase is too rigid or outdated to adapt efficiently.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Building a website that looks great on every screen size is no longer optional \u2014 it&#8217;s the baseline expectation. Users browse on phones during commutes, on tablets at home, and on wide desktop monitors at work. If your site breaks or becomes hard to use on any of those devices, you lose visitors fast. Responsive &#8230; <a title=\"Responsive Web Design Explained: Build for Every Screen\" class=\"read-more\" href=\"https:\/\/websitedesignnh.com\/news\/what-is-responsive-web-design\/\" aria-label=\"Read more about Responsive Web Design Explained: Build for Every Screen\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":325,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-326","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-responsive-design"],"_links":{"self":[{"href":"https:\/\/websitedesignnh.com\/news\/wp-json\/wp\/v2\/posts\/326","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/websitedesignnh.com\/news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/websitedesignnh.com\/news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/websitedesignnh.com\/news\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/websitedesignnh.com\/news\/wp-json\/wp\/v2\/comments?post=326"}],"version-history":[{"count":0,"href":"https:\/\/websitedesignnh.com\/news\/wp-json\/wp\/v2\/posts\/326\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/websitedesignnh.com\/news\/wp-json\/wp\/v2\/media\/325"}],"wp:attachment":[{"href":"https:\/\/websitedesignnh.com\/news\/wp-json\/wp\/v2\/media?parent=326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/websitedesignnh.com\/news\/wp-json\/wp\/v2\/categories?post=326"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/websitedesignnh.com\/news\/wp-json\/wp\/v2\/tags?post=326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}