[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":3,"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":49,"LL1THfHjE_hbfFwrVwTFi5jLTBjZHJXceb35wF-NTew":75,"hyo6UTDKZCR5Y9eoSwf_zRVIlcqJ518J1BpS1VufhvI":188,"_apollo:default":233},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","nuxt-main-menu","Nuxt Hauptmenü",[9,24,29,34,39,44],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog",null,"/know-how",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":20,"expanded":21,"attributes":38},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":40,"title":41,"description":13,"url":42,"langcode":15,"internal":20,"expanded":21,"attributes":43},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":15,"internal":20,"expanded":21,"attributes":48},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"menu":50},{"__typename":5,"id":51,"name":52,"items":53},"footer","Fußzeile",[54,60,65,70],{"__typename":10,"id":55,"title":56,"description":13,"url":57,"langcode":58,"internal":20,"expanded":21,"attributes":59},"e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum","/impressum",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":58,"internal":20,"expanded":21,"attributes":64},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":58,"internal":20,"expanded":21,"attributes":69},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":58,"internal":21,"expanded":21,"attributes":74},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":89,"path":90,"promote":21,"status":20,"sticky":21,"metatag":91,"postCategory":111,"postContentElements":13,"evergreen":13,"tags":136,"postWpBody":178,"wpHeaderImage":13,"wpHeaderImageOld":13,"wpHeaderImageOldSmall":13,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":181,"author":182},"NodeWpPost","1018","Frontendtrends 2014",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1389360367,"UTC","+00:00","2014-01-10T13:26:07+00:00",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},{"__typename":16,"id":17,"name":18,"direction":19},"/blog/frontendtrends-2014",[92,99,106],{"__typename":93,"tag":94,"attributes":95},"MetaTagValue","meta",{"__typename":96,"name":97,"content":98},"MetaTagValueAttributes","title","Frontendtrends 2014 | Liechtenecker UX Design Studio",{"__typename":100,"tag":101,"attributes":102},"MetaTagLink","link",{"__typename":103,"href":104,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/frontendtrends-2014","canonical",{"__typename":107,"tag":94,"attributes":108},"MetaTagProperty",{"__typename":109,"property":110,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":112,"id":113,"name":114,"path":115,"status":20,"weight":116,"description":117,"langcode":121,"changed":122,"metatag":125},"TermCategories","8","UX/UI Design","/kategorie/design",0,{"__typename":118,"processed":119,"format":120},"Text","Themen aus dem Bereich Design & User Experience","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":123,"timezone":85,"offset":86,"time":124},1713772777,"2024-04-22T07:59:37+00:00",[126,129,133],{"__typename":93,"tag":94,"attributes":127},{"__typename":96,"name":97,"content":128},"UX/UI Design | Liechtenecker UX Design Studio",{"__typename":93,"tag":94,"attributes":130},{"__typename":96,"name":131,"content":132},"description","Themen aus dem Bereich Design & User Experience",{"__typename":100,"tag":101,"attributes":134},{"__typename":103,"href":135,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/design",[137,142,146,150,154,158,162,166,170,174],{"__typename":138,"id":139,"name":140,"path":141,"weight":116},"TermTags","32","2014","/tag/2014",{"__typename":138,"id":143,"name":144,"path":145,"weight":116},"39","4k","/tag/4k",{"__typename":138,"id":147,"name":148,"path":149,"weight":116},"121","automatisierung","/tag/automatisierung",{"__typename":138,"id":151,"name":152,"path":153,"weight":116},"507","frontend","/tag/frontend",{"__typename":138,"id":155,"name":156,"path":157,"weight":116},"560","grunt","/tag/grunt",{"__typename":138,"id":159,"name":160,"path":161,"weight":116},"1079","ress","/tag/ress",{"__typename":138,"id":163,"name":164,"path":165,"weight":116},"1342","trends","/tag/trends",{"__typename":138,"id":167,"name":168,"path":169,"weight":116},"1437","video header","/tag/video-header",{"__typename":138,"id":171,"name":172,"path":173,"weight":116},"1489","Webdesign","/tag/webdesign",{"__typename":138,"id":175,"name":176,"path":177,"weight":116},"1508","webfonts","/tag/webfonts",{"__typename":179,"processed":180,"format":120,"summary":13},"TextSummary","\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cdiv alt=\"frontendtrends\" data-entity-type=\"media\" data-entity-uuid=\"b2bfe340-011b-41fe-912d-407fbbe5af4a\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2014/01/frontendtrends1-1.jpg.webp?itok=AcJkP7KC 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2014/01/frontendtrends1-1.jpg.webp?itok=KWbxZIDp 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1000\" height=\"400\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2014/01/frontendtrends1-1.jpg.webp?itok=lItjdRRn 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2014/01/frontendtrends1-1.jpg.webp?itok=P-1xcLAU 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1000\" height=\"400\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2014/01/frontendtrends1-1.jpg.webp?itok=gTTWZH95 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2014/01/frontendtrends1-1.jpg.webp?itok=KpxvFmWR 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"298\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2014/01/frontendtrends1-1.jpg.webp?itok=rWCj7YGP 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2014/01/frontendtrends1-1.jpg.webp?itok=1zgS_pc4 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"192\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2014/01/frontendtrends1-1.jpg.webp?itok=610rsFfK 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/01/frontendtrends1-1.jpg.webp?itok=JXa5jeun 2x\" type=\"image/webp\" width=\"1000\" height=\"400\">\n                  \u003Cimg loading=\"lazy\" width=\"1000\" height=\"400\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/01/frontendtrends1-1.jpg.jpg?itok=JXa5jeun\" alt=\"frontendtrends\" title=\"frontendtrends\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Cp>\u003Cbr>\nDie Webdesigntrends zählen seit vielen Jahren zu einem fixen Bestandteil des Liechtenecker-Blogs (die Webdesigntrends 2014 könnt ihr \u003Ca href=\"https://liechtenecker.at/webdesigntrends-2014/\">hier\u003C/a> nachlesen). Ab heuer wollen wir neben den Trends im Designbereich auch über die Neuerungen im Frontendbereich berichten, den Anfang machen wir gleich mit diesem Artikel.\u003C/p>\n\u003Ch2>Ein kleiner Rückblick auf 2013\u003C/h2>\n\u003Cp>Oft ist es sinnvoll, ein wenig in die Vergangenheit zu sehen, um die Trends des nächsten Jahres besser vorhersagen zu können.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Neue Browserversionen mit besserer Unterstützung für HTML5/CSS3:\u003C/strong> Natürlich gab es im letzten Jahr viele neue Browserversionen aller bekannter Hersteller welche die Kompatibilität zu HTML5 & CSS3 weiter verbessert haben. Einen großen Versionssprung hat letztes Jahr der Internet Explorer mit Version 11 gemacht.\u003C/li>\n\u003Cli>\u003Cstrong>Mitte des Jahres gab Google bekannt, in Zukunft nicht mehr auf WebKit als RenderEngine für Chrome zu setzen:\u003C/strong> Stattdessen setzt Chrome in Zukunft auf die Eigenentwicklung Blink. Opera, das bis dahin auch auf WebKit basierte, gab ebenfalls die Umstellung auf Blink bekannt. Neben WebKit (Safari), Gecko (Mozilla) und der RenderEngine des Internet Explorers gibt es 2014 also einen weiteren „Global Player“: Blink (Chrome, Opera).\u003C/li>\n\u003Cli>\u003Cstrong>Gerade in Österreich war das Jahr 2013 aber vor allem durch den Niedergang eines Browsers geprägt:\u003C/strong> dem Internet Explorer 8. Während der IE8 Anfang 2013 noch auf rund 7.8% Marktanteil kam, halbierte sich der Marktanteil in einem Jahr auf 3.8%. Damit ist auch in Österreich ein wichtiger Meilenstein bei der Adaption von HTML5 & CSS3 geschafft.\u003C/li>\n\u003C/ul>\n\u003Ch2>Die Trends 2014\u003C/h2>\n\u003Cp>Weiterentwicklungen im Frontend stehen natürlich in einer sehr engen Beziehung zu neuen Designtrends. Der erste Trend im neuen Jahr kommt deshalb nicht nur bei den Webdesigntrends, sondern auch hier vor:\u003C/p>\n\u003Ch3>Big Video Header\u003C/h3>\n\u003Cp>Das Web wird 2014 noch deutlich vielschichtiger und multimedialer als es in den vergangenen Jahren der Fall war. Natives abspielen von Videos in HTML5 gehört zwar schon länger zu den Möglichkeiten, wurde bisher aber eher spärlich eingesetzt. Big Video Header ändern diesen Umstand und stellen gleichzeitig große Herausforderungen an Performance und Bandbreite.\u003Cbr>\n\u003Ca href=\"http://riskeverything.us/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cdiv alt=\"Screen Shot 2014-01-10 at 09.06.22\" data-entity-type=\"media\" data-entity-uuid=\"d19fd71e-ad60-4bd2-a843-fef6d3cb15e4\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.06.221-1.png.webp?itok=7ohHxJfM 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.06.221-1.png.webp?itok=rEhq6o7C 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1000\" height=\"452\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.06.221-1.png.webp?itok=m6EbWmcg 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.06.221-1.png.webp?itok=KNDTjc3Z 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1000\" height=\"452\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.06.221-1.png.webp?itok=RCZpHaPc 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.06.221-1.png.webp?itok=PEGZUBnY 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"337\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.06.221-1.png.webp?itok=FtGZIdR2 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.06.221-1.png.webp?itok=g5JR4B1B 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"217\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.06.221-1.png.webp?itok=Zww2Z44M 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.06.221-1.png.webp?itok=W3RLQd62 2x\" type=\"image/webp\" width=\"1000\" height=\"452\">\n                  \u003Cimg loading=\"lazy\" width=\"1000\" height=\"452\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.06.221-1.png.jpg?itok=W3RLQd62\" alt=\"Screen Shot 2014-01-10 at 09.06.22\" title=\"Screen Shot 2014-01-10 at 09.06.22\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003C/p>\n\u003Ch3>4k\u003C/h3>\n\u003Cp>Auf der diesjährigen CES gab es keinen namhaften TV-Hersteller, der nicht den einen oder anderen 4k-Fernseher im Produktportfolio hatte. 4k hält 2014 (zum Glück) durch immer preiswertere Computerdisplays auch am Desktop Einzug und beendet damit einen jahrelangen Stillstand in der Displaytechnologie.\u003Cbr>\nDiese Entwicklung wird sich auch im Web widerspiegeln – Bilder müssen höher aufgelöst werden und Grafiken möglichst als SVG eingebunden werden.\u003C/p>\n\u003Ch3>Größenoptimierung und Geschwindigkeitsverbesserungen\u003C/h3>\n\u003Cp>Auch wenn unsere Verbindungsgeschwindigkeiten durch Glasfaser und LTE in Zukunft weiter nach oben wandern, bringt die zunehmende Multimedialisierung von Webseiten einige Probleme mit sich. Vor allem auf mobilen Geräten werden Bandbreite fressende Inhalte (z.b. die angesprochenen Video Header oder hochaufgelöste Bilder und Grafiken) oft nur ausgeblendet – schlecht für die Ladezeit und die User Experience. Zwei Trends werden diesem Phänomen 2014 versuchen entgegenzuhalten.\u003C/p>\n\u003Ch4>RESS\u003C/h4>\n\u003Cp>Was Media Queries Clientseitig machen (also bestimmten Content bei bestimmten Screengrößen auszublenden), wird durch RESS (responsive design with server-side components) in Zukunft sinnvoll erweitert. Wo Videos und andere ungewünschte Inhalte auf Mobildevices früher nur ausgeblendet wurden, werden sie in Zukunft mit RESS gar nicht erst geladen.\u003Cbr>\nVorraussetzung dafür ist natürlich, dass das CMS solche Möglichkeiten anbietet – und gerade hier wird es 2014 hoffentlich einen deutlichen Push nach vorne geben.\u003C/p>\n\u003Ch4>Automatisierung\u003C/h4>\n\u003Cp>\u003Ca href=\"http://gruntjs.com/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cdiv alt=\"Screen Shot 2014-01-10 at 09.22.55\" data-entity-type=\"media\" data-entity-uuid=\"d991243b-8756-4b96-afba-04f69c027ba9\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.22.551-1.jpg.webp?itok=zECJ4JXq 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.22.551-1.jpg.webp?itok=U5_puraN 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1000\" height=\"504\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.22.551-1.jpg.webp?itok=IVXeQf2h 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.22.551-1.jpg.webp?itok=OEoJf4wB 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1000\" height=\"504\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.22.551-1.jpg.webp?itok=0gqN2rL4 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.22.551-1.jpg.webp?itok=OWc4ZK3m 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"375\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.22.551-1.jpg.webp?itok=j5VgjIX3 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.22.551-1.jpg.webp?itok=DV8UYHle 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"242\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.22.551-1.jpg.webp?itok=fpK8W4fx 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.22.551-1.jpg.webp?itok=wby2hWaM 2x\" type=\"image/webp\" width=\"1000\" height=\"504\">\n                  \u003Cimg loading=\"lazy\" width=\"1000\" height=\"504\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.22.551-1.jpg.jpg?itok=wby2hWaM\" alt=\"Screen Shot 2014-01-10 at 09.22.55\" title=\"Screen Shot 2014-01-10 at 09.22.55\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cbr>\nDass Javascript, CSS und andere Inhalte spätestens beim ausrollen der Webseite komprimiert werden sollten, weiß mittlerweile jeder. Da dies in Handarbeit vor allem bei nachträglichen Änderungen mühsam werden kann, ist auch der Grund, warum so oft darauf „vergessen“ wird. Kommen zu vielen, unkomprimierten JavaScript Libraries und CSS-Files auch noch unkomprimierte Bilder oder gar Videos hinzu, können auch schnelle Internetverbindungen in die Knie gezwungen werden.\u003Cbr>\nDie Antwort der Frontend-Developer darauf ist simpel: Alles was von Hand mühsam und zeitaufwendig ist, muss automatisiert werden. Christoph ist \u003Ca href=\"https://liechtenecker.at/grunt-workflow-inklusive-bildoptimierung/\">in seinem Beitrag zu Grunt\u003C/a> bereits auf die Vorteile eingegangen. 2014 werden wir sicherlich einen großen Anstieg in der Nutzung derartiger Software sehen.\u003C/p>\n\u003Ch3>Webfonts\u003C/h3>\n\u003Cdiv alt=\"Screen Shot 2014-01-10 at 09.37.41\" data-entity-type=\"media\" data-entity-uuid=\"190d4e49-d672-4089-bbf7-5cdafab9e538\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.37.411-1.jpg.webp?itok=9EFhT0fL 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.37.411-1.jpg.webp?itok=eddPa6zW 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1000\" height=\"361\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.37.411-1.jpg.webp?itok=-GSC7D0Z 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.37.411-1.jpg.webp?itok=8V0Pk2ro 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1000\" height=\"361\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.37.411-1.jpg.webp?itok=Umvza2bY 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.37.411-1.jpg.webp?itok=7QO28M4g 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"269\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.37.411-1.jpg.webp?itok=6lWPir59 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.37.411-1.jpg.webp?itok=9Btryl4O 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"173\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.37.411-1.jpg.webp?itok=Hn6t_5jM 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.37.411-1.jpg.webp?itok=iCBolvPV 2x\" type=\"image/webp\" width=\"1000\" height=\"361\">\n                  \u003Cimg loading=\"lazy\" width=\"1000\" height=\"361\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/01/Screen-Shot-2014-01-10-at-09.37.411-1.jpg.jpg?itok=iCBolvPV\" alt=\"Screen Shot 2014-01-10 at 09.37.41\" title=\"Screen Shot 2014-01-10 at 09.37.41\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Cp>\u003Cbr>\nGemessen an anderen Technologien tut sich bei Webfonts seit Jahren relativ wenig. Hauptproblem ist hier immer noch das unterschiedliche Schriftrendering in unterschiedlichen Browsern, Betriebssystemen und Versionen. Auch wenn sich hier 2014 von Seiten der Browserhersteller wahrscheinlich nur wenig tun wird, gibt es Grund aufzuatmen: Mit dem Einzug von 4k wird sich auch das Schriftrendering im Web deutlich verbessern.\u003C/p>\n\u003Ch2>Zusammenfassung\u003C/h2>\n\u003Cp>2014 steht uns ein spannendes Jahr mit den ein oder anderen Überraschungen bevor. Das Web wird sich wie in den vergangenen Jahren rasant weiterentwickeln. Komplexer werdende Seiten haben auch 2014 immer größere Anforderungen an Design und Entwicklung . Auf der technischen Seite sind die höher werdenden Ladezeiten von Webseiten im Auge zu behalten. Durch die zunehmende Optimierung auf hochauflösende Displays und die Anforderung, immer mehr Content auf den Seiten unterzubringen. wird sich dieser Trend mit Sicherheit auch nicht umkehren. Dem kann nur durch cleveres Caching, Optimierung und RESS wirksam entgegengewirkt werden. \u003Cspan style=\"line-height: 1.5em;\">Neben den technischen Aspekten darf aber auch Usability und User Experience nicht in den Hintergrund treten. Denn auch durchdachte Interaktionskonzepte werden durch die erhöhte Komplexität bei Webseiten zunehmend wichtiger.\u003C/span>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://liechtenecker.at/blog/frontendtrends-2014/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Frontendtrends 2014 - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Die Webdesigntrends zählen seit vielen Jahren zu einem fixen Bestandteil des Liechtenecker-Blogs (die Webdesigntrends 2014 könnt ihr hier nachlesen). Ab heuer wollen wir neben den Trends im Designbereich auch über die Neuerungen im Frontendbereich berichten, den Anfang machen wir gleich mit diesem Artikel. Ein kleiner Rückblick auf 2013 Oft ist es sinnvoll, ein wenig in […]\" />\n\u003Cmeta property=\"og:url\" content=\"https://liechtenecker.at/blog/frontendtrends-2014/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2014-01-10T14:26:07+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://liechtenecker.at/wp-content/uploads/2014/01/frontendtrends1-1.jpg\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Geschätzte Lesezeit\">\n\t\u003Cmeta name=\"twitter:data1\" content=\"4 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://liechtenecker.at/#website\",\"url\":\"https://liechtenecker.at/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://liechtenecker.at/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://liechtenecker.at/blog/frontendtrends-2014/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://liechtenecker.at/wp-content/uploads/2014/01/frontendtrends1-1.jpg\",\"width\":1000,\"height\":400},{\"@type\":\"WebPage\",\"@id\":\"https://liechtenecker.at/blog/frontendtrends-2014/#webpage\",\"url\":\"https://liechtenecker.at/blog/frontendtrends-2014/\",\"name\":\"Frontendtrends 2014 - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://liechtenecker.at/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://liechtenecker.at/blog/frontendtrends-2014/#primaryimage\"},\"datePublished\":\"2014-01-10T14:26:07+00:00\",\"dateModified\":\"2014-01-10T14:26:07+00:00\",\"author\":{\"@id\":\"https://liechtenecker.at/#/schema/person/663b2d5142421ab394bf325c1b48cecf\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://liechtenecker.at/blog/frontendtrends-2014/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://liechtenecker.at/#/schema/person/663b2d5142421ab394bf325c1b48cecf\",\"name\":\"Stephan\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://liechtenecker.at/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/400d5f8c531afb609b81aa66c8d56f01?s=96&d=mm&r=g\",\"caption\":\"Stephan\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":183,"id":184,"myRole":185,"name":186,"nickname":187},"User","23","langgedienter Frontend-Veteran","s-fletzberger","Stephan",{"latestKnowhow":189},[190,208,221],{"__typename":79,"id":191,"title":192,"path":193,"wpTeaserText":194,"wpPromotedTeaserImage":13,"wpHeaderImage":195},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":196,"id":197,"excludeFromScreenreader":13,"mediaImage":198,"name":206,"path":207,"status":20},"MediaImage","3364",{"__typename":199,"url":200,"width":201,"height":202,"alt":203,"title":13,"size":204,"mime":205},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg",2880,1300,"Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"image/jpeg","Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":209,"title":210,"path":211,"wpTeaserText":212,"wpPromotedTeaserImage":13,"wpHeaderImage":213},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":196,"id":214,"excludeFromScreenreader":13,"mediaImage":215,"name":219,"path":220,"status":20},"3355",{"__typename":199,"url":216,"width":201,"height":202,"alt":217,"title":13,"size":218,"mime":205},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":222,"title":223,"path":224,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":225},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":196,"id":226,"excludeFromScreenreader":21,"mediaImage":227,"name":231,"path":232,"status":20},"3303",{"__typename":199,"url":228,"width":201,"height":202,"alt":229,"title":13,"size":230,"mime":205},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":234,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":235,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":239,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":242,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":245,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":248,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":251,"Menu:nuxt-main-menu":254,"ROOT_QUERY":268,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":284,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":287,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":290,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":293,"Menu:footer":296,"TermCategories:8":306,"TermTags:32":317,"TermTags:39":318,"TermTags:121":319,"TermTags:507":320,"TermTags:560":321,"TermTags:1079":322,"TermTags:1342":323,"TermTags:1437":324,"TermTags:1489":325,"TermTags:1508":326,"User:23":327,"NodeWpPost:1018":328,"MediaImage:3364":365,"NodeWpPost:1619":367,"MediaImage:3355":370,"NodeWpPost:1616":372,"MediaImage:3303":375,"NodeWpPost:1606":377},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",236,"internal",20,"expanded",21,"attributes",238],{"__ref":237},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",240,"internal",20,"expanded",21,"attributes",241],{"__ref":237},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",243,"internal",20,"expanded",21,"attributes",244],{"__ref":237},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",246,"internal",20,"expanded",21,"attributes",247],{"__ref":237},["null","__typename",23,"class",13],["null","__typename",10,"id",40,"title",41,"description",13,"url",42,"langcode",249,"internal",20,"expanded",21,"attributes",250],{"__ref":237},["null","__typename",23,"class",13],["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",252,"internal",20,"expanded",21,"attributes",253],{"__ref":237},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",255],[256,258,260,262,264,266],{"__ref":257},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":259},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":261},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":263},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":265},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":267},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",269,"menu({\"name\":\"NUXT_MAIN_MENU\"})",270,"menu({\"name\":\"FOOTER\"})",272,"route({\"path\":\"/blog/frontendtrends-2014\"})",274,"latestKnowhow({\"excludeId\":\"1018\",\"limit\":3})",277],"Query",{"__ref":271},"Menu:nuxt-main-menu",{"__ref":273},"Menu:footer",["null","__typename",77,"entity",275],{"__ref":276},"NodeWpPost:1018",[278,280,282],{"__ref":279},"NodeWpPost:1619",{"__ref":281},"NodeWpPost:1616",{"__ref":283},"NodeWpPost:1606",["null","__typename",10,"id",55,"title",56,"description",13,"url",57,"langcode",285,"internal",20,"expanded",21,"attributes",286],{"__ref":237},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",288,"internal",20,"expanded",21,"attributes",289],{"__ref":237},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",291,"internal",20,"expanded",21,"attributes",292],{"__ref":237},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",294,"internal",21,"expanded",21,"attributes",295],{"__ref":237},["null","__typename",23,"class",13],["null","__typename",5,"id",51,"name",52,"items",297],[298,300,302,304],{"__ref":299},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":301},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":303},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":305},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",112,"id",113,"name",114,"path",115,"status",20,"weight",116,"description",307,"langcode",308,"changed",309,"metatag",310],["null","__typename",118,"processed",119,"format",120],{"__ref":237},["null","__typename",83,"timestamp",123,"timezone",85,"offset",86,"time",124],[311,313,315],["null","__typename",93,"tag",94,"attributes",312],["null","__typename",96,"name",97,"content",128],["null","__typename",93,"tag",94,"attributes",314],["null","__typename",96,"name",131,"content",132],["null","__typename",100,"tag",101,"attributes",316],["null","__typename",103,"href",135,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",138,"id",139,"name",140,"path",141,"weight",116],["null","__typename",138,"id",143,"name",144,"path",145,"weight",116],["null","__typename",138,"id",147,"name",148,"path",149,"weight",116],["null","__typename",138,"id",151,"name",152,"path",153,"weight",116],["null","__typename",138,"id",155,"name",156,"path",157,"weight",116],["null","__typename",138,"id",159,"name",160,"path",161,"weight",116],["null","__typename",138,"id",163,"name",164,"path",165,"weight",116],["null","__typename",138,"id",167,"name",168,"path",169,"weight",116],["null","__typename",138,"id",171,"name",172,"path",173,"weight",116],["null","__typename",138,"id",175,"name",176,"path",177,"weight",116],["null","__typename",183,"id",184,"myRole",185,"name",186,"nickname",187],["null","__typename",79,"id",80,"title",81,"changed",329,"created",330,"langcode",331,"path",90,"promote",21,"status",20,"sticky",21,"metatag",332,"category",339,"contentElements",13,"evergreen",13,"tags",341,"wpBody",362,"wpHeaderImage",13,"wpHeaderImageOld",13,"wpHeaderImageOldSmall",13,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",181,"author",363],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],{"__ref":237},[333,335,337],["null","__typename",93,"tag",94,"attributes",334],["null","__typename",96,"name",97,"content",98],["null","__typename",100,"tag",101,"attributes",336],["null","__typename",103,"href",104,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",107,"tag",94,"attributes",338],["null","__typename",109,"property",110,"content",81],{"__ref":340},"TermCategories:8",[342,344,346,348,350,352,354,356,358,360],{"__ref":343},"TermTags:32",{"__ref":345},"TermTags:39",{"__ref":347},"TermTags:121",{"__ref":349},"TermTags:507",{"__ref":351},"TermTags:560",{"__ref":353},"TermTags:1079",{"__ref":355},"TermTags:1342",{"__ref":357},"TermTags:1437",{"__ref":359},"TermTags:1489",{"__ref":361},"TermTags:1508",["null","__typename",179,"processed",180,"format",120,"summary",13],{"__ref":364},"User:23",["null","__typename",196,"id",197,"excludeFromScreenreader",13,"mediaImage",366,"name",206,"path",207,"status",20],["null","__typename",199,"url",200,"width",201,"height",202,"alt",203,"title",13,"size",204,"mime",205],["null","__typename",79,"id",191,"title",192,"path",193,"wpTeaserText",194,"wpPromotedTeaserImage",13,"wpHeaderImage",368],{"__ref":369},"MediaImage:3364",["null","__typename",196,"id",214,"excludeFromScreenreader",13,"mediaImage",371,"name",219,"path",220,"status",20],["null","__typename",199,"url",216,"width",201,"height",202,"alt",217,"title",13,"size",218,"mime",205],["null","__typename",79,"id",209,"title",210,"path",211,"wpTeaserText",212,"wpPromotedTeaserImage",13,"wpHeaderImage",373],{"__ref":374},"MediaImage:3355",["null","__typename",196,"id",226,"excludeFromScreenreader",21,"mediaImage",376,"name",231,"path",232,"status",20],["null","__typename",199,"url",228,"width",201,"height",202,"alt",229,"title",13,"size",230,"mime",205],["null","__typename",79,"id",222,"title",223,"path",224,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",378],{"__ref":379},"MediaImage:3303"]