{"id":2060,"date":"2024-12-10T08:34:05","date_gmt":"2024-12-10T08:34:05","guid":{"rendered":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/?page_id=2060"},"modified":"2024-12-10T08:34:05","modified_gmt":"2024-12-10T08:34:05","slug":"responsive-vs-adaptive-web-design","status":"publish","type":"page","link":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/responsive-vs-adaptive-web-design\/","title":{"rendered":"Responsive vs Adaptive Web design"},"content":{"rendered":"\n

When creating websites, two primary approaches to design and layout stand out:\u00a0Responsive Web Design (RWD)<\/strong>\u00a0and\u00a0Adaptive Web Design (AWD)<\/strong>. Both aim to provide users with an optimal viewing experience across various devices, but they differ in implementation and philosophy.<\/p>\n\n\n\n

<\/td>Responsive Web Design (RWD)<\/strong><\/td>Adaptive Web Design (AWD)<\/strong><\/td><\/tr>
Definition<\/strong><\/td>A flexible layout that adapts automatically to any screen size or device.<\/td>Predefined layouts designed for specific screen sizes.<\/td><\/tr>
Implementation<\/strong><\/td>Utilizes fluid grids, flexible images, and media queries in CSS.<\/td>Uses static layouts and JavaScript to switch between versions.<\/td><\/tr>
Examples<\/strong><\/td>1.\u00a0https:\/\/github.com<\/a>\/<\/a>
2.https:\/\/www.shopify.com\/ca<\/a>
3.https:\/\/www.dropbox.com\/<\/a>
4.jelizavetaostapjuk23.thkit.ee<\/a><\/td>		1.https:\/\/www.apple.com\/<\/a>
2.https:\/\/css-tricks.com\/<\/a>
3.https:\/\/www.amazon.com\/<\/a><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Responsive Web Design (RWD)<\/strong>\u00a0properties<\/h2>\n\n\n\n

1. Fluid Grids<\/h3>\n\n\n\n

Fluid grids<\/strong>\u00a0are a key principle of responsive web design. They use proportional values instead of fixed units like pixels, allowing the layout to resize dynamically based on the screen size.<\/p>\n\n\n

\n\/* Global styling *\/\n    body {\n      font-family: Arial, sans-serif;\n      margin: 0;\n      padding: 0;\n    }\n    .container {\n      width: 90%; \/* Fluid width, adjusts to 90% of the viewport *\/\n      margin: 0 auto;\n      display: flex;\n      flex-wrap: wrap; \/* Allows items to wrap to the next line if needed *\/\n    }\n    .box {\n      background: #3498db;\n      color: white;\n      padding: 20px;\n      margin: 10px;\n      flex: 1 1 30%; \/* Flexbox properties: grow, shrink, and basis *\/\n    }\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
2. Media queries<\/h3>\n\n\n\n
Media queries<\/strong>\u00a0are a core feature of responsive web design. They allow you to apply specific styles depending on the size or features of the user\u2019s device, such as screen width, height, or resolution.<\/p>\n\n\n
\nbody {\n      font-family: Arial, sans-serif;\n      margin: 0;\n      padding: 0;\n    }\n    .container {\n      width: 100%;\n      margin: 0 auto;\n      text-align: center;\n    }\n    .box {\n      background: #3498db;\n      color: white;\n      padding: 20px;\n      margin: 10px auto;\n      width: 90%; \/* Default: Box takes up most of the screen *\/\n    }\n\n    \/* Media Query for tablets (screens wider than 768px) *\/\n    @media (min-width: 768px) {\n      .container {\n        display: flex;\n        justify-content: space-around;\n        flex-wrap: wrap; \/* Allows wrapping if needed *\/\n      }\n      .box {\n        width: 45%; \/* Adjust to fit two boxes per row *\/\n      }\n    }\n\n    \/* Media Query for desktops (screens wider than 1200px) *\/\n    @media (min-width: 1200px) {\n      .box {\n        width: 30%; \/* Adjust to fit three boxes per row *\/\n      }\n    }\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
3. Images and media<\/h3>\n\n\n\n
Responsive images and media<\/strong>\u00a0adapt to different screen sizes and resolutions, ensuring that content looks great on any device. This is typically achieved using techniques like fluid images, the\u00a0<picture><\/strong>\u00a0element, and the\u00a0srcset<\/strong>\u00a0attribute.<\/p>\n\n\n
\n<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <title>Responsive Images and Media<\/title>\n<\/head>\n<body>\n  <div class="container">\n    <h1>Responsive Images and Media Example<\/h1>\n\n    <!-- Fluid Image -->\n    <img src="https:\/\/via.placeholder.com\/800x400" alt="Example Image">\n\n    <!-- Responsive Image with srcset -->\n    <picture>\n      <source srcset="https:\/\/via.placeholder.com\/1200x600" media="(min-width: 1200px)">\n      <source srcset="https:\/\/via.placeholder.com\/800x400" media="(min-width: 768px)">\n      <img src="https:\/\/via.placeholder.com\/400x200" alt="Responsive Image">\n    <\/picture>\n\n    <!-- Responsive Video -->\n    <video controls>\n      <source src="example-video.mp4" type="video\/mp4">\n      Your browser does not support the video tag.\n    <\/video>\n  <\/div>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n
\nbody {\n      font-family: Arial, sans-serif;\n      margin: 0;\n      padding: 0;\n      text-align: center;\n    }\n    img {\n      max-width: 100%; \/* Ensures images do not exceed their container's width *\/\n      height: auto; \/* Maintains the aspect ratio *\/\n    }\n    video {\n      max-width: 100%;\n      height: auto;\n    }\n    .container {\n      padding: 20px;\n    }\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
4. Web fonts vs. system fonts<\/h3>\n\n\n\n
When designing websites, the choice of fonts plays a significant role in aesthetics, readability, and performance. Two common options are\u00a0web fonts<\/strong>\u00a0(custom fonts loaded from the web) and\u00a0system fonts<\/strong>\u00a0(fonts pre-installed on the user\u2019s device). Each has its pros and cons, impacting design and performance differently.<\/p>\n\n\n
\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;700&display=swap');\n\n    body {\n      font-family: 'Arial', sans-serif; \/* Fallback font if web font fails to load *\/\n      margin: 0;\n      padding: 0;\n    }\n\n    .web-font {\n      font-family: 'Roboto', sans-serif; \/* Custom Web Font *\/\n      color: #3498db;\n      padding: 20px;\n      text-align: center;\n    }\n\n    .system-font {\n      font-family: 'Times New Roman', serif; \/* System Font *\/\n      color: #2ecc71;\n      padding: 20px;\n      text-align: center;\n    }\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
Adaptive Web Design (AWD)<\/strong>\u00a0properties<\/h2>\n\n\n\n
1. Meta tags<\/h3>\n\n\n\n
In\u00a0Adaptive Web Design<\/strong>, meta tags play a crucial role in tailoring the web page for specific devices and screen sizes. The most commonly used meta tag is the\u00a0viewport<\/strong>\u00a0meta tag, which ensures the layout is scaled correctly for the user\u2019s device.<\/p>\n\n\n
\n<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <title>Meta Tags in Adaptive Design<\/title>\n<\/head>\n<body>\n  <div class="container">\n    <h1>Meta Tags in Adaptive Design<\/h1>\n    <p>This page uses the viewport meta tag and media queries to adapt to different devices.<\/p>\n  <\/div>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n
\nbody {\n      font-family: Arial, sans-serif;\n      margin: 0;\n      padding: 0;\n      text-align: center;\n    }\n\n    .container {\n      padding: 20px;\n    }\n\n    \/* Styles for small devices (e.g., phones) *\/\n    @media (max-width: 600px) {\n      body {\n        background-color: #f9ebea;\n      }\n      .container {\n        font-size: 14px;\n      }\n    }\n\n    \/* Styles for medium devices (e.g., tablets) *\/\n    @media (min-width: 601px) and (max-width: 1200px) {\n      body {\n        background-color: #fad7a0;\n      }\n      .container {\n        font-size: 18px;\n      }\n    }\n\n    \/* Styles for large devices (e.g., desktops) *\/\n    @media (min-width: 1201px) {\n      body {\n        background-color: #a9dfbf;\n      }\n      .container {\n        font-size: 22px;\n      }\n    }\n<\/pre><\/div>\n\n\n
2. HTML Structure<\/h3>\n\n\n\n
In\u00a0Adaptive Web Design<\/strong>, the HTML structure is crafted to accommodate multiple layouts tailored for specific devices. This often includes conditional styles or scripts to load device-specific features while maintaining a clean and semantic structure.<\/p>\n\n\n
\n<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <meta name="description" content="An example of adaptive web design using device-specific layouts.">\n  <title>Adaptive Web Design Example<\/title>\n\n  <!-- General CSS for all devices -->\n  <link rel="stylesheet" href="styles\/global.css">\n\n  <!-- Conditional CSS for specific devices -->\n  <link rel="stylesheet" href="styles\/small.css" media="only screen and (max-width: 600px)">\n  <link rel="stylesheet" href="styles\/medium.css" media="only screen and (min-width: 601px) and (max-width: 1200px)">\n  <link rel="stylesheet" href="styles\/large.css" media="only screen and (min-width: 1201px)">\n<\/head>\n<body>\n  <header>\n    <h1>Adaptive Web Design<\/h1>\n    <nav>\n      <ul>\n        <li><a href="#home">Home<\/a><\/li>\n        <li><a href="#about">About<\/a><\/li>\n        <li><a href="#contact">Contact<\/a><\/li>\n      <\/ul>\n    <\/nav>\n  <\/header>\n\n  <main>\n    <section id="home">\n      <h2>Welcome to Adaptive Design<\/h2>\n      <p>This design adjusts layouts for different screen sizes.<\/p>\n    <\/section>\n    \n    <section id="about">\n      <h2>About Adaptive Design<\/h2>\n      <p>Adaptive design creates specific layouts for mobile, tablet, and desktop devices.<\/p>\n    <\/section>\n    \n    <section id="contact">\n      <h2>Contact Us<\/h2>\n      <form action="\/submit" method="post">\n        <label for="name">Name:<\/label>\n        <input type="text" id="name" name="name" required>\n        \n        <label for="email">Email:<\/label>\n        <input type="email" id="email" name="email" required>\n        \n        <button type="submit">Submit<\/button>\n      <\/form>\n    <\/section>\n  <\/main>\n\n  <footer>\n    <p>&copy; 2024 Adaptive Design Example<\/p>\n  <\/footer>\n\n  <!-- Optional JavaScript for enhancing adaptive features -->\n  <script src="scripts\/adaptive.js"><\/script>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
3. Media Queries<\/h3>\n\n\n\n
Media queries<\/strong>\u00a0in Adaptive Web Design are used to create separate layouts tailored to specific screen sizes or device characteristics. This allows the website to adapt its design without relying on fluid grids or dynamic resizing.<\/p>\n\n\n
\n<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <title>Media Queries in Adaptive Design<\/title>\n<\/head>\n<body>\n  <div class="container">\n    <h1>Media Queries in Adaptive Design<\/h1>\n    <p>This page adapts its styles for small, medium, and large screens using media queries.<\/p>\n  <\/div>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n
\nbody {\n      font-family: Arial, sans-serif;\n      margin: 0;\n      padding: 0;\n      text-align: center;\n      background-color: #f4f4f4;\n      color: #333;\n    }\n    .container {\n      padding: 20px;\n    }\n\n    \/* Medium devices (e.g., tablets) *\/\n    @media (min-width: 601px) and (max-width: 1200px) {\n      body {\n        background-color: #d1f0f0;\n        color: #222;\n      }\n      .container {\n        font-size: 18px;\n        width: 80%;\n        margin: 0 auto;\n      }\n    }\n\n    \/* Large devices (e.g., desktops) *\/\n    @media (min-width: 1201px) {\n      body {\n        background-color: #e0f7d4;\n        color: #111;\n      }\n      .container {\n        font-size: 22px;\n        width: 60%;\n        margin: 0 auto;\n      }\n    }\n<\/pre><\/div>\n\n\n
My opinion<\/h2>\n\n\n\n
In my opinion, Responsive Web Design is the better choice for most web projects. Its flexibility and ability to adapt to any device make it perfect for today\u2019s variety of screen sizes. While Adaptive Web Design can offer better performance for certain devices, the extra complexity in development and maintenance usually makes it less practical.<\/p>\n","protected":false},"excerpt":{"rendered":"
When creating websites, two primary approaches to design and layout stand out:\u00a0Responsive Web Design (RWD)\u00a0and\u00a0Adaptive Web Design (AWD). Both aim to provide users with an optimal viewing experience across various devices, but they differ in implementation and philosophy. Responsive Web Design (RWD) Adaptive Web Design (AWD) Definition A flexible layout that adapts automatically to any … Continue reading “Responsive vs Adaptive Web design”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2060","page","type-page","status-publish","hentry"],"yoast_head":"\nResponsive vs Adaptive Web design - Jelizaveta Ostapjuk Portfolio<\/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:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/responsive-vs-adaptive-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive vs Adaptive Web design - Jelizaveta Ostapjuk Portfolio\" \/>\n<meta property=\"og:description\" content=\"When creating websites, two primary approaches to design and layout stand out:\u00a0Responsive Web Design (RWD)\u00a0and\u00a0Adaptive Web Design (AWD). Both aim to provide users with an optimal viewing experience across various devices, but they differ in implementation and philosophy. Responsive Web Design (RWD) Adaptive Web Design (AWD) Definition A flexible layout that adapts automatically to any … Continue reading "Responsive vs Adaptive Web design"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/responsive-vs-adaptive-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Jelizaveta Ostapjuk Portfolio\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jelizavetaostapjuk23.thkit.ee\\\/wp\\\/eng\\\/responsive-vs-adaptive-web-design\\\/\",\"url\":\"https:\\\/\\\/jelizavetaostapjuk23.thkit.ee\\\/wp\\\/eng\\\/responsive-vs-adaptive-web-design\\\/\",\"name\":\"Responsive vs Adaptive Web design - Jelizaveta Ostapjuk Portfolio\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jelizavetaostapjuk23.thkit.ee\\\/wp\\\/eng\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/jelizavetaostapjuk23.thkit.ee\\\/wp\\\/eng\\\/responsive-vs-adaptive-web-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/jelizavetaostapjuk23.thkit.ee\\\/wp\\\/eng\\\/responsive-vs-adaptive-web-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/jelizavetaostapjuk23.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/image-1024x291.png\",\"datePublished\":\"2024-12-10T08:34:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jelizavetaostapjuk23.thkit.ee\\\/wp\\\/eng\\\/responsive-vs-adaptive-web-design\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jelizavetaostapjuk23.thkit.ee\\\/wp\\\/eng\\\/responsive-vs-adaptive-web-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jelizavetaostapjuk23.thkit.ee\\\/wp\\\/eng\\\/responsive-vs-adaptive-web-design\\\/#primaryimage\",\"url\":\"https:\\\/\\\/jelizavetaostapjuk23.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/image-1024x291.png\",\"contentUrl\":\"https:\\\/\\\/jelizavetaostapjuk23.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/image-1024x291.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jelizavetaostapjuk23.thkit.ee\\\/wp\\\/eng\\\/responsive-vs-adaptive-web-design\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/jelizavetaostapjuk23.thkit.ee\\\/wp\\\/eng\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive vs Adaptive Web design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/jelizavetaostapjuk23.thkit.ee\\\/wp\\\/eng\\\/#website\",\"url\":\"https:\\\/\\\/jelizavetaostapjuk23.thkit.ee\\\/wp\\\/eng\\\/\",\"name\":\"Jelizaveta Ostapjuk Portfolio\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/jelizavetaostapjuk23.thkit.ee\\\/wp\\\/eng\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsive vs Adaptive Web design - Jelizaveta Ostapjuk Portfolio","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:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/responsive-vs-adaptive-web-design\/","og_locale":"en_US","og_type":"article","og_title":"Responsive vs Adaptive Web design - Jelizaveta Ostapjuk Portfolio","og_description":"When creating websites, two primary approaches to design and layout stand out:\u00a0Responsive Web Design (RWD)\u00a0and\u00a0Adaptive Web Design (AWD). Both aim to provide users with an optimal viewing experience across various devices, but they differ in implementation and philosophy. Responsive Web Design (RWD) Adaptive Web Design (AWD) Definition A flexible layout that adapts automatically to any … Continue reading \"Responsive vs Adaptive Web design\"","og_url":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/responsive-vs-adaptive-web-design\/","og_site_name":"Jelizaveta Ostapjuk Portfolio","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/responsive-vs-adaptive-web-design\/","url":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/responsive-vs-adaptive-web-design\/","name":"Responsive vs Adaptive Web design - Jelizaveta Ostapjuk Portfolio","isPartOf":{"@id":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/#website"},"primaryImageOfPage":{"@id":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/responsive-vs-adaptive-web-design\/#primaryimage"},"image":{"@id":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/responsive-vs-adaptive-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/wp-content\/uploads\/2024\/12\/image-1024x291.png","datePublished":"2024-12-10T08:34:05+00:00","breadcrumb":{"@id":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/responsive-vs-adaptive-web-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/responsive-vs-adaptive-web-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/responsive-vs-adaptive-web-design\/#primaryimage","url":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/wp-content\/uploads\/2024\/12\/image-1024x291.png","contentUrl":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/wp-content\/uploads\/2024\/12\/image-1024x291.png"},{"@type":"BreadcrumbList","@id":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/responsive-vs-adaptive-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/"},{"@type":"ListItem","position":2,"name":"Responsive vs Adaptive Web design"}]},{"@type":"WebSite","@id":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/#website","url":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/","name":"Jelizaveta Ostapjuk Portfolio","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/wp-json\/wp\/v2\/pages\/2060","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/wp-json\/wp\/v2\/comments?post=2060"}],"version-history":[{"count":1,"href":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/wp-json\/wp\/v2\/pages\/2060\/revisions"}],"predecessor-version":[{"id":2062,"href":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/wp-json\/wp\/v2\/pages\/2060\/revisions\/2062"}],"wp:attachment":[{"href":"https:\/\/jelizavetaostapjuk23.thkit.ee\/wp\/eng\/wp-json\/wp\/v2\/media?parent=2060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}