Zu Dokumentation oder Darstellung von Websites können “responsive Screenshots” erstellt und dann als Grafiken eingebunden werden. In einen ersten Schritt muss dazu eine Visualisierung erfolgen, die über entsprechende Websites erfolgen kann. Hier wird in der Regel einfach die URL der zu betrachtenden Website eingegeben.
- “Am I responsive ?”: Einer der Klassiker unter den Tools. Stellt immer vier verschiedene Geräte auf einmal dar, die dann mit einem (externen) Screenshot-Tool aufgenommen und weiterverwendet werden können. URL: http://ami.responsivedesign.is/
- Techsini Multi Mockup: Ähnlich aufgebaut ie “Am I responsive ?”, jedoch kann der Blickwinkel von “frontal” auf “nach links gekippt” oder “nach rechts gekippt” einstellen. URL: https://techsini.com/multi-mockup/
- Create Mockup: Ähnlich aufgebaut wie “Am I responsive ?”, jedoch kann gibt es verschiedene Blockwinkel und Anordnungen (“Presets”). URL: https://www.createmockup.com
Es gibt weitere, dann aber größenteils kostenpflichtige Systeme (“Mockop-Tools”), die jedoch häufig den Fokus auf Produktgestaltung haben. Hier sind unter anderem zu nennen:
- Smartmockups: https://smartmockups.com
- Artboard Studio: https://artboard.studio/
- Placeit: https://placeit.net/
Zur Erstellung der Screenshots können Screenshot-Tools eingesetzt werden. Beispiels können folgende freien Tools genutzt werden:
- Greenshot (nur Windows)
- FireShot (browserbasiert, für Chrome und Firefox verfügbar)
Es muss bei der Erstellung von Screenshots darauf geachtet werden, dass …
- die Abmessungen der Screenshots immer gleich sind. So sind für Beschreibung von einzelnen Webseiten in der Regel eine Breite von 1200 Pixel ausreichend.
- der dargestellte Ausschnitt immer gleich ist, damit die Wiedererkennung vereinfacht wird.
- ein passendes Format zu Abspeicherung verwendet wird. Hier bietet sich jpg- oder png-Dateien an.