René's URL Explorer Experiment


Title: Responsive web design basics  |  Articles  |  web.dev

Open Graph Title: Responsive web design basics  |  Articles  |  web.dev

Description: Create sites that respond to the needs and capabilities of the device they're viewed on.

Open Graph Description: Create sites that respond to the needs and capabilities of the device they're viewed on.

Opengraph URL: https://web.dev/articles/responsive-web-design-basics

direct link

Domain: web.dev


Hey, it has json ld scripts:
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "dateModified": "2019-02-12",
    "headline": "Responsive web design basics"
  }
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [{
      "@type": "ListItem",
      "position": 1,
      "name": "Articles",
      "item": "https://web.dev/articles"
    },{
      "@type": "ListItem",
      "position": 2,
      "name": "Responsive web design basics",
      "item": "https://web.dev/articles/responsive-web-design-basics"
    }]
  }
  

google-signin-client-id157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com
google-signin-scopeprofile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award https://www.googleapis.com/auth/devprofiles.full_control.firstparty
og:site_nameweb.dev
og:typewebsite
theme-color#3740ff
NoneIE=Edge
og:localeen

Links:

Skip to main content https://web.dev/articles/responsive-web-design-basics#main-content
https://web.dev/
HTML https://web.dev/html
CSS https://web.dev/css
JavaScript https://web.dev/javascript
Performance https://web.dev/performance
Accessibility https://web.dev/accessibility
Identity https://web.dev/identity
Learn HTML https://web.dev/learn/html
Learn CSS https://web.dev/learn/css
Learn JavaScript https://web.dev/learn/javascript
Learn AI https://web.dev/learn/ai
Learn Performance https://web.dev/learn/performance
Learn Accessibility https://web.dev/learn/accessibility
More courses https://web.dev/learn
AI and the web https://web.dev/explore/ai
Explore https://web.dev/explore
PageSpeed Insights https://pagespeed.web.dev/
Patterns https://web.dev/patterns
Podcasts & shows https://web.dev/shows
Developer Newsletter https://web.dev/newsletter
About web.dev https://web.dev/about
Discover https://web.dev/discover
Baseline https://web.dev/baseline
How to use Baseline https://web.dev/how-to-use-baseline
Blog https://web.dev/blog
Case Studies https://web.dev/case-studies
Articles https://web.dev/articles
https://web.dev/
Discover https://web.dev/discover
Baseline https://web.dev/baseline
How to use Baseline https://web.dev/how-to-use-baseline
Blog https://web.dev/blog
Case Studies https://web.dev/case-studies
HTML https://web.dev/html
CSS https://web.dev/css
JavaScript https://web.dev/javascript
Performance https://web.dev/performance
Accessibility https://web.dev/accessibility
Identity https://web.dev/identity
Learn HTML https://web.dev/learn/html
Learn CSS https://web.dev/learn/css
Learn JavaScript https://web.dev/learn/javascript
Learn AI https://web.dev/learn/ai
Learn Performance https://web.dev/learn/performance
Learn Accessibility https://web.dev/learn/accessibility
More courses https://web.dev/learn
AI and the web https://web.dev/explore/ai
Explore https://web.dev/explore
PageSpeed Insights https://pagespeed.web.dev/
Patterns https://web.dev/patterns
Podcasts & shows https://web.dev/shows
Developer Newsletter https://web.dev/newsletter
About web.dev https://web.dev/about
Home https://web.dev/
Articles https://web.dev/articles
X https://twitter.com/petele
GitHub https://github.com/petele
Mastodon https://techhub.social/@petele
Homepage https://petelepage.com/
GitHub https://github.com/rachelandrew
LinkedIn https://www.linkedin.com/in/rachelandrew
Mastodon https://front-end.social/@rachelandrew
Bluesky https://bsky.app/profile/rachelandrew.bsky.social
Homepage https://rachelandrew.co.uk
Learn Designhttps://web.dev/learn/design
A List Aparthttp://alistapart.com/article/responsive-web-design/
Some browsershttps://css-tricks.com/probably-use-initial-scale1/
Does not have a tag with width or initial-scalehttps://developer.chrome.com/docs/lighthouse/pwa/viewport
Content is not sized correctly for the viewporthttps://developer.chrome.com/docs/lighthouse/pwa/content-width
layout shiftshttps://web.dev/articles/optimize-cls
See this example on CodePenhttps://codepen.io/web-dot-dev/pen/vEOwwJQ
Responsive basics: floats percenthttps://codepen.io/web-dot-dev/pen/bNdyyYG
@web-dot-devhttps://codepen.io/web-dot-dev
CodePenhttps://codepen.io
Responsive basics: flex examplehttps://codepen.io/web-dot-dev/pen/PwqvvOv
@web-dot-devhttps://codepen.io/web-dot-dev
CodePenhttps://codepen.io
Read more about Flexboxhttps://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Flexbox
Responsive Basics: two column gridhttps://codepen.io/web-dot-dev/pen/dPoEEJq
@web-dot-devhttps://codepen.io/web-dot-dev
CodePenhttps://codepen.io
Responsive Basics: Grid as many as fithttps://codepen.io/web-dot-dev/pen/emNaaVW
@web-dot-devhttps://codepen.io/web-dot-dev
CodePenhttps://codepen.io
Read more about CSS Grid Layouthttps://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Grids
Responsive Basics: Multicolhttps://codepen.io/web-dot-dev/pen/wBabbmv
@web-dot-devhttps://codepen.io/web-dot-dev
CodePenhttps://codepen.io
Read more about Multicolhttps://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Multiple-column_Layout
Avoid CSS importshttps://web.dev/articles/critical-rendering-path/page-speed-rules-and-recommendations#avoid_css_imports
Responsive Basics: Size media querieshttps://codepen.io/web-dot-dev/pen/LEVoomB
@web-dot-devhttps://codepen.io/web-dot-dev
CodePenhttps://codepen.io
Responsive Basics: Pointer and hoverhttps://codepen.io/web-dot-dev/pen/KwpLLeg
@web-dot-devhttps://codepen.io/web-dot-dev
CodePenhttps://codepen.io
hoverhttps://developer.mozilla.org/docs/Web/CSS/@media/hover
any-hoverhttps://developer.mozilla.org/docs/Web/CSS/@media/any-hover
pointerhttps://developer.mozilla.org/docs/Web/CSS/@media/pointer
any-pointerhttps://developer.mozilla.org/docs/Web/CSS/@media/any-pointer
Responsive Basics weather forecast demohttps://codepen.io/web-dot-dev/pen/Pwqvvpg
@web-dot-devhttps://codepen.io/web-dot-dev
CodePenhttps://codepen.io
Open DevToolshttps://developer.chrome.com/docs/devtools/open
Device Modehttps://developer.chrome.com/docs/devtools/device-mode/#toggle
responsive modehttps://developer.chrome.com/docs/devtools/device-mode/#responsive
Show media querieshttps://developer.chrome.com/docs/devtools/device-mode/#queries
Creative Commons Attribution 4.0 Licensehttps://creativecommons.org/licenses/by/4.0/
Apache 2.0 Licensehttps://www.apache.org/licenses/LICENSE-2.0
Google Developers Site Policieshttps://developers.google.com/site-policies
File a bug https://issuetracker.google.com/issues/new?component=1400680&template=1857359
See open issues https://issuetracker.google.com/issues?q=status:open%20componentid:1400680&s=created_time:desc
Chrome for Developers https://developer.chrome.com/
Chromium updates https://blog.chromium.org/
Case studies https://web.dev/case-studies
Podcasts & shows https://web.dev/shows
@ChromiumDev on X https://twitter.com/ChromiumDev
YouTube https://www.youtube.com/user/ChromeDevelopers
Chrome for Developers on LinkedIn https://www.linkedin.com/showcase/chrome-for-developers
RSS https://web.dev/static/blog/feed.xml
Terms https://policies.google.com/terms
Privacy https://policies.google.com/privacy
Manage cookies https://web.dev/articles/responsive-web-design-basics

Viewport: width=device-width, initial-scale=1


URLs of crawlers that visited me.