---
title: Site Seeing od Ahmada Shadeeda: responzivita za hranicí media queries
date: 2026-11-09
edition: 2026-11-09
rubric: Nové nástroje
perex: Nástroj Site Seeing ukazuje, jak se stránka chová v kontextech, které vytvářejí neobvyklé viewporty: otevřené devtools, svislé panely prohlížeče nebo tisk.
topics: [web-css]
---

Responzivní kontrola často končí u přepnutí mezi mobilem a desktopem. Ahmad Shadeed v článku z 5. 11. 2026 tvrdí, že skutečných situací je víc než šířek obrazovky.

## Co je nového / Jak to funguje

Site Seeing běží na lab.ishadeed.com/tools/site-seeing. Zvolíš kontext a vidíš, jak stránka vypadá, když ji lidé reálně používají. Příklady z článku:

- otevřené vývojářské nástroje, které zmenší viditelnou plochu,
- svislé panely (vertical tabs), které zúží stránku,
- jejich kombinace, tedy nejtěsnější případ,
- tiskové styly.

Autor ho dělá pro designéry, produktové manažery i vývojáře. Nápad načrtl v sešitu a dotáhl ve Figmě; za zpětnou vazbu děkuje pěti recenzentům. Článek na konci propaguje autorův placený kurz CSS layoutu.

## Proč je to důležité

Chyby, které QA najde na „divné“ šířce, jsou často jen skutečný kontext uživatele s dokem devtools nebo svislými panely. Předem je odhalíš ve chvíli, kdy je oprava levná.

## Jak začít

1. Otevři Site Seeing a vlož adresu své stránky nebo prototypu.
2. Projdi všechny kontexty a poznamenej zalomení, přetékání a oříznutí.
3. Ověř tiskový náhled.
4. Přidej nalezené šířky do checklistu pro QA.

## Zdroje

- [Ahmad Shadeed: Beyond the viewport](https://ishadeed.com/article/beyond-the-viewport/)
- [Site Seeing](https://lab.ishadeed.com/tools/site-seeing)