{"version":3,"file":"component---src-pages-blog-split-screens-js-9580b7e1b06b4722f382.js","mappings":"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","sources":["webpack://gatsby-starter-default/./src/components/BannerLinks/DefaultBox/index.js","webpack://gatsby-starter-default/./src/components/BlogSlider/DefaultCards/index.js","webpack://gatsby-starter-default/./src/assets/dropbox.jpg","webpack://gatsby-starter-default/./src/pages/blog/split-screens.js","webpack://gatsby-starter-default/./src/assets/bannerlinks/jointheteam.jpg","webpack://gatsby-starter-default/./src/assets/bannerlinks/takeoff.jpg","webpack://gatsby-starter-default/./src/assets/georg_neu.png","webpack://gatsby-starter-default/./src/assets/handynavigation.jpg","webpack://gatsby-starter-default/./src/assets/internet-explorer-gravestone-overlay.png","webpack://gatsby-starter-default/./src/assets/matomo_m.png","webpack://gatsby-starter-default/./src/assets/mouse.opt.gif","webpack://gatsby-starter-default/./src/assets/projektuebersicht.jpg","webpack://gatsby-starter-default/./src/assets/sandsoftime.jpg","webpack://gatsby-starter-default/./src/assets/splitscreens.jpg","webpack://gatsby-starter-default/./src/assets/verlauf.jpg"],"sourcesContent":["import JoinTheTeam from '../../../assets/bannerlinks/jointheteam.jpg'\nimport TakeOff from '../../../assets/bannerlinks/takeoff.jpg'\n\nconst boxes = [\n {\n text: 'Join the team!',\n image: JoinTheTeam,\n link: '/karriere',\n linkText: 'Bewerbung'\n },\n {\n text: 'Ready to take off?',\n image: TakeOff,\n link: '/kontakt',\n linkText: 'Kontakt'\n }\n]\n\nexport default boxes\n","import Farbverlauf from '../../../assets/verlauf.jpg'\nimport SandsofTime from '../../../assets/sandsoftime.jpg'\nimport Mouse from '../../../assets/mouse.opt.gif'\nimport HandyNav from '../../../assets/handynavigation.jpg'\nimport HowIsYourDay from '../../../assets/splitscreens.jpg'\nimport matomo_m from '../../../assets/matomo_m.png'\nimport ie_grave from '../../../assets/internet-explorer-gravestone-overlay.png'\n\nconst cards = [\n {\n tag: 'Karriere',\n headline: 'Interview zum Girls Day 2022',\n backgroundImage: null,\n readingTime: null,\n link: '/blog/girlsday-2022'\n },\n {\n tag: 'Technologie',\n headline: 'Der Internet Explorer wird eingestellt',\n backgroundImage: ie_grave,\n readingTime: null,\n whiteColor: true,\n link: '/blog/internet-explorer-death'\n },\n {\n tag: 'DSGVO',\n headline: 'matomo statt Google Analytics!',\n subheadline: 'Meiden auch Sie hohe Bußgeldstrafen',\n backgroundImage: matomo_m,\n readingTime: null,\n link: '/blog/matomo_statt_google/'\n },\n // {\n // tag: 'Technologie',\n // headline: 'DSGVO - einfach!',\n // subheadline: 'DSGVO Checkliste zum Abhaken',\n // backgroundImage: null,\n // readingTime: 2,\n // link: '/blog/dsgvo-einfach/'\n // },\n {\n tag: 'Projektmanagement',\n headline: 'Ticketsystem',\n subheadline: 'Strukturierte Kommunikation während des Projektes',\n backgroundImage: null,\n readingTime: null,\n blackColor: true,\n link: '/blog/customer-portal/'\n },\n {\n tag: 'UI - User Interface',\n headline: 'Gradient your life',\n subheadline: 'Farbverläufe und Transitions',\n backgroundImage: Farbverlauf,\n readingTime: null,\n whiteColor: true,\n link: '/blog/gradient-your-life/'\n },\n {\n tag: 'UI - User Interface',\n headline: 'Bild-befüllter Text',\n subheadline: 'Stylish.Punkt.',\n backgroundImage: SandsofTime,\n readingTime: null,\n link: '/blog/bild-befuellter-text/'\n },\n {\n tag: 'UI - User Interface',\n headline: 'Mobiles Menü ganz unten',\n subheadline: 'Daumen brauchen neue Menüführung',\n backgroundImage: HandyNav,\n readingTime: 5,\n whiteColor: true,\n link: '/blog/mobilenavigationganzunten/'\n },\n {\n tag: 'Technologie',\n headline: 'Cross-Testing',\n subheadline: 'Wie funktioniert das?',\n backgroundImage: null,\n readingTime: 1,\n link: '/blog/cross-testing/'\n },\n {\n tag: 'UX - User Experience',\n headline: 'Micro Interaction',\n subheadline: 'Verbesserung der User Experience',\n backgroundImage: Mouse,\n readingTime: null,\n link: '/blog/micro-interaction/'\n },\n {\n tag: 'UI - User Interface',\n headline: 'Split Screens',\n subheadline: 'Dualität mit Style Faktor',\n backgroundImage: HowIsYourDay,\n readingTime: null,\n whiteColor: true,\n link: '/blog/split-screens/'\n },\n {\n tag: 'SEO',\n headline: '95% Uplift mit SEO',\n subheadline: 'Reichweite der Webseite maximieren',\n backgroundImage: null,\n readingTime: 5,\n link: '/blog/mittels-seo-zur-besten-platzierung'\n }\n]\n\nexport default cards\n","export default __webpack_public_path__ + \"static/dropbox-8f9d0686eed53a95f739accde25ff284.jpg\";","import React from 'react'\nimport Helmet from 'react-helmet'\nimport {\n Layout,\n BannerSmall,\n TextBox,\n Image,\n BannerLinks,\n Breadcrumbs,\n BlogSlider,\n Appointment\n} from '../../components'\n\nimport BannerImage from '../../assets/projektuebersicht.jpg'\nimport boxes from '../../components/BannerLinks/DefaultBox'\nimport cards from '../../components/BlogSlider/DefaultCards'\n\nimport { generateBreadcrumbsLinks } from '../../utils/index'\n\nimport dropbox from '../../assets/dropbox.jpg'\nimport Georg from '../../assets/georg_neu.png'\n\nconst SplitScreen = () => {\n const links = generateBreadcrumbsLinks('/blog/split-screens', 'Split Screens')\n return (\n \n \n \n 2-geteilter\n
\n Bildschirm\n \n }\n />\n \n Split Screens -
Dualität mit Style Faktor\n }\n text=\n {\n \n

Wenn der Inhalt eines Bildschirms in zwei Teile geteilt wird, die unabhängig voneinander funktionieren, nennt man diese Technik \"Split-Screen\". Die Geschichte der zweigeteilten Bildschirme ist so lang wie die Geschichte des Films und kommt schon in frühen Stummfilmen vor. Bis heute hat sich diese Technik in Film und TV bewährt, neu ist sie 2018 als Trend im Web dazugekommen!\n

\n

Wann funktionieren Split-Screens, wann nicht?

\n

Split-Screens sind gut, wenn man z.B. eine Art Übersicht mit Titel auf einer Seite hat und den eigentlichen Content rechts zum Scrollen. Ein Beispiel könnt Ihr Euch bei den Dropbox Guidenlines ansehen:\n

\n
\n }\n />\n \n \n

Split-Screens funktionieren allerdings nur bei einfachem Content. Wird der Content komplexer - sowohl inhaltlich wie auch im Design - sollte auf ein traditionelleres Layout ausgewichen werden.\n

\n

Entscheidungskriterien:

\n
    \n
  • Ist der eigentliche Inhalt simpel? Text mit Bild?
  • \n
  • Kann genügend Weißraum (Negativraum) verwendet werden?
  • \n
  • Wird der User mit dem neuartigen Scrollverhalten und Layout nicht überfordert (Barrierefreiheit)?
  • \n
\n

Sollten die Kriterien für Euren Webseiten-Inhalt zutreffen, könnte ein Split-Screen-Layout für Eure User interessant sein! Sollen wir uns dazu mal austauschen?

\n \n }\n />\n \n \n \n \n
\n )\n}\n\nexport default SplitScreen\n","export default __webpack_public_path__ + \"static/jointheteam-2b1dbe490e7a75b51f62994dbbc68d6e.jpg\";","export default __webpack_public_path__ + \"static/takeoff-081071ac91583c72fc038a1fa6d12b5c.jpg\";","export default __webpack_public_path__ + \"static/georg_neu-1db411ffcd0cb629f57db3b25e17f5cf.png\";","export default __webpack_public_path__ + \"static/handynavigation-91fc394574095530870a49035a74a401.jpg\";","export default __webpack_public_path__ + \"static/internet-explorer-gravestone-overlay-9eb6dd3187a1ad7cf61c865333595e2b.png\";","export default __webpack_public_path__ + \"static/matomo_m-a1b8b0cba88664b4e21ac50941966afe.png\";","export default __webpack_public_path__ + \"static/mouse.opt-9507d21ebc950a844784e0e1902c7923.gif\";","export default __webpack_public_path__ + \"static/projektuebersicht-3b0d0cca7e33df5e55e7b68d779cc633.jpg\";","export default __webpack_public_path__ + \"static/sandsoftime-db449af39aed656c1adcaa07b50ef348.jpg\";","export default __webpack_public_path__ + \"static/splitscreens-bc1232faca8e5ddf4d79d04306bbd664.jpg\";","export default __webpack_public_path__ + \"static/verlauf-b95c462b2f194c577196e2cf773da6f9.jpg\";"],"names":["boxes","text","image","JoinTheTeam","link","linkText","TakeOff","cards","tag","headline","backgroundImage","readingTime","ie_grave","whiteColor","subheadline","matomo_m","blackColor","Farbverlauf","SandsofTime","HandyNav","Mouse","HowIsYourDay","SplitScreen","links","generateBreadcrumbsLinks","React","Layout","Helmet","title","meta","name","content","property","BannerSmall","BannerImage","Breadcrumbs","backLinkAlias","TextBox","href","target","Image","dropbox","alt","Appointment","Georg","BlogSlider","singleRow","BannerLinks"],"sourceRoot":""}