{"id":387,"date":"2022-11-18T19:15:03","date_gmt":"2022-11-18T18:15:03","guid":{"rendered":"https:\/\/2022.pfah.li\/?p=387"},"modified":"2023-01-17T01:00:17","modified_gmt":"2023-01-17T00:00:17","slug":"fc-germania-forst-relaunch","status":"publish","type":"post","link":"https:\/\/2023.pfah.li\/fc-germania-forst-relaunch\/","title":{"rendered":"FC Germania Forst Relaunch"},"content":{"rendered":"<h1>FC Forst<\/h1>\n<h1>Club Website Relaunch<\/h1>\n<hr>\n<ul>\n<li>\n        <a href=\"#about\">About the Club<\/a>\n    <\/li>\n<li>\n        <a href=\"#website\">Website<\/a>\n    <\/li>\n<li>\n        <a href=\"#responsive\">Responsive Design<\/a>\n    <\/li>\n<li>\n        <a href=\"#gameresults\">Dynamic Game Results<\/a>\n    <\/li>\n<li>\n        <a href=\"#nextcloud\">Germanen Cloud<\/a>\n    <\/li>\n<li>\n        <a href=\"#statistics\">Statistics<\/a>\n    <\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"\/wp-content\/uploads\/2022\/11\/fcg_logo_white_with_text_beneath.svg\" alt=\"\"><\/p>\n<div>\n<h2>About <\/p>\n<p class=\"contour-text\">the Club<\/p>\n<\/h2>\n<div>\n<div class=\"uk-panel uk-margin\" data-id=\"page#1-0-0-0\">FC Germania Forst is a local soccer club with over 15 teams and 1,000 members of all ages. The flow of information is vital to keep members and fans informed about games, practices, and events at the club. In the following sections, I&#8217;ll highlight some of the significant improvements and opportunities provided by the website relaunch.<\/div>\n<\/div>\n<\/div>\n<h1>A new design<\/p>\n<p class=\"contour-text\">for a new website<\/p>\n<\/h1>\n<div>\n<p>I made it my personal mission to create a new club image that can hold its own against even the largest clubs from the first and second leagues.<\/p>\n<\/div>\n<ul>\n<li>\n<h3>New Design<\/h3>\n<div>\n<p>The new fonts, clearer color guidelines, and subtle changes to the logo are elevating the club&#8217;s design to new heights.<\/p>\n<\/div>\n<\/li>\n<li>\n<h3>Dynamic Content<\/h3>\n<div>\n<p>All content is dynamically sourced from various places and categorizes to minimize the need for redundant content management.<\/p>\n<\/div>\n<\/li>\n<li>\n<h3>Large Images<\/h3>\n<div>\n<p>The use of large, high-quality images enhances visual appeal and helps to grab the attention of visitors.<\/p>\n<\/div>\n<\/li>\n<li>\n<h3>Simplified Menus<\/h3>\n<div>\n<p>To improve usability, the menus have been streamlined to give visitors faster access to the content they are looking for.<\/p>\n<\/div>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"\/wp-content\/uploads\/2022\/11\/all-in-one-pc-mockup-3.svg\" alt=\"\"><br \/>\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-18-at-23-50-16-1.-Mannschaft.png\" alt=\"\"><\/p>\n<p>\n    <a href=\"https:\/\/www.fcforst.de\/\">Visit fcforst.de<\/a>\n<\/p>\n<p><img decoding=\"async\" src=\"\/wp-content\/uploads\/2022\/11\/phone-mockup-1.svg\" alt=\"\"><br \/>\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-19-at-12-04-36-FC-Germania-Forst-1909-e.V.png\" alt=\"\"><\/p>\n<h1>\n<p class=\"contour-text\">Responsive<\/p>\n<p> Design<\/h1>\n<div>\n<p>For soccer clubs, it&#8217;s essential to be easily accessible on the go, as fans want to stay up-to-date with the latest results, read articles and learn more about the team. A significant focus of the changes in user experience was to optimize the interface for seamless adaptation between different screen sizes.<\/p>\n<\/div>\n<ul>\n<li>\n<h3>Adaptive Grid<\/h3>\n<div>\n<p>All posts are displayed in a grid that is easily adaptable to different screen sizes by adjusting the number of columns.<\/p>\n<\/div>\n<\/li>\n<li>\n<h3>Large Buttons<\/h3>\n<div>\n<p>All buttons are large and easy to press with a finger, as well as clearly labeled with their intended function.<\/p>\n<\/div>\n<\/li>\n<li>\n<h3>Filters<\/h3>\n<div>\n<p>To reduce the need for scrolling through a large number of posts, filters were introduced that allow users to easily sort through the most important categories.<\/p>\n<\/div>\n<\/li>\n<li>\n<h3>Space for Sponsors<\/h3>\n<div>\n<p>A significant portion of the club&#8217;s income comes from sponsors, so it was essential to provide better visibility for their logos and ads on the website, while still keeping the main focus on the content.<\/p>\n<\/div>\n<\/li>\n<\/ul>\n<h1>\n<p class=\"contour-text\">Dynamic<\/p>\n<p>Game results<\/h1>\n<div>\n<p>Manually maintaining match results, league tables, and statistics for each team would be a monumental task for the volunteer members of the club. To alleviate this burden, I utilized an API from a regional soccer platform to load all important content dynamically and in real-time .<\/p>\n<p>This allows visitors to access the latest match, a schedule of all past and future matches, league tables, and player statistics such as goals scored, red cards, and additional information.<\/p>\n<\/div>\n<p><img decoding=\"async\" src=\"\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-19-at-13-07-48-1.-Mannschaft.png\" alt=\"\"><br \/>\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2022\/11\/Nextcloud_Logo.svg\" alt=\"\"><\/p>\n<div>\n<h2>Germanen <\/p>\n<p class=\"contour-text\">Cloud<\/p>\n<\/h2>\n<div>\n<p>Another crucial aspect of the relaunch was the integration of a locally hosted Nextcloud into the club&#8217;s operations. This enables active members to create and share documents, access their email, and manage calendars.<\/p>\n<p>Additionally, the Nextcloud is connected to the CMS via oAuth 2.0, providing cross-platform access with a single account and a streamlined user management.<\/p>\n<\/div>\n<\/div>\n<h1>\n<p class=\"contour-text\">Metrics<\/p>\n<p>after Launch<\/h1>\n<ul>\n<li>\n<h2>82.6%<\/h2>\n<p>More Visitors*<\/p>\n<\/li>\n<li>\n<h2>2:43s<\/h2>\n<p>Average Session Duration*<\/p>\n<\/li>\n<li>\n<h2>3.4<\/h2>\n<p>Pageviews\/Session*<\/p>\n<\/li>\n<li>\n<h2>92%<\/h2>\n<p>SEO Score**<\/p>\n<\/li>\n<li>\n<h2>100%<\/h2>\n<p>Best Practices**<\/p>\n<\/li>\n<li>\n<h2>92%<\/h2>\n<p>Accessibility**<\/p>\n<\/li>\n<\/ul>\n<div>\n<p>* In the first three months, compared to the previous website in the last three months (Bots excluded)<br \/>** Google Lighthouse Score (Desktop)<\/p>\n<\/div>\n<p><!--more--><br \/>\n<!-- {\"type\":\"layout\",\"children\":[{\"type\":\"section\",\"props\":{\"header_transparent\":\"light\",\"image_position\":\"center-center\",\"style\":\"secondary\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"media_overlay_gradient\":\"\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"2-3\"},\"children\":[{\"type\":\"headline\",\"props\":{\"class\":\"gradient-text\",\"content\":\"FC Forst\",\"title_element\":\"h1\",\"title_style\":\"heading-xlarge\"}},{\"type\":\"headline\",\"props\":{\"class\":\"\",\"content\":\"Club Website Relaunch\",\"content_de_de\":\"Vereinswebsite Relaunch\",\"margin_remove_top\":true,\"title_element\":\"h1\",\"title_style\":\"heading-medium\"}},{\"type\":\"divider\",\"props\":{\"divider_element\":\"hr\",\"divider_style\":\"\",\"margin\":\"medium\"}},{\"type\":\"button\",\"props\":{\"button_size\":\"small\",\"grid_column_gap\":\"small\",\"grid_row_gap\":\"small\",\"margin\":\"default\"},\"children\":[{\"type\":\"button_item\",\"props\":{\"button_style\":\"default\",\"content\":\"About the Club\",\"content_de_de\":\"\\u00dcber den Verein\",\"icon\":\"heroicons-outline--information-circle\",\"icon_align\":\"left\",\"link\":\"#about\"}},{\"type\":\"button_item\",\"props\":{\"button_style\":\"default\",\"content\":\"Website\",\"icon\":\"heroicons-solid--cursor-click\",\"icon_align\":\"left\",\"link\":\"#website\"}},{\"type\":\"button_item\",\"props\":{\"button_style\":\"default\",\"content\":\"Responsive Design\",\"icon\":\"fontawesome-solid--mobile-alt\",\"icon_align\":\"left\",\"link\":\"#responsive\"}},{\"type\":\"button_item\",\"props\":{\"button_style\":\"default\",\"content\":\"Dynamic Game Results\",\"content_de_de\":\"Dynamische Spielergebnisse\",\"icon\":\"fontawesome-solid--tshirt\",\"icon_align\":\"left\",\"link\":\"#gameresults\"}},{\"type\":\"button_item\",\"props\":{\"button_style\":\"default\",\"content\":\"Germanen Cloud\",\"icon\":\"bootstrap-filled--cloud\",\"icon_align\":\"left\",\"link\":\"#nextcloud\"}},{\"type\":\"button_item\",\"props\":{\"button_style\":\"default\",\"content\":\"Statistics\",\"content_de_de\":\"Statistiken\",\"icon\":\"bootstrap-filled--bar-chart-line\",\"icon_align\":\"left\",\"link\":\"#statistics\"}}],\"name\":\"buttons\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"media_overlay_gradient\":\"\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-3\"},\"children\":[{\"type\":\"image\",\"props\":{\"image\":\"wp-content\\\/uploads\\\/2022\\\/11\\\/fcg_logo_white_with_text_beneath.svg\",\"image_svg_color\":\"emphasis\",\"image_width\":\"200px\",\"margin\":\"default\",\"text_align\":\"right\"}}]}],\"props\":{\"layout\":\"2-3,1-3\"}}]},{\"type\":\"section\",\"props\":{\"id\":\"about\",\"image\":\"wp-content\\\/uploads\\\/2022\\\/11\\\/DJI_0879_copped-scaled.jpg\",\"image_position\":\"center-center\",\"image_size\":\"cover\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"props\":{\"layout\":\"1-2,1-2\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"media_overlay_gradient\":\"\",\"padding\":\"small\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-2\"},\"children\":[]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"media_overlay_gradient\":\"\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"panel\",\"props\":{\"content\":\"\n\n<div class=\\\"uk-panel uk-margin\\\" data-id=\\\"page#1-0-0-0\\\">FC Germania Forst is a local soccer club with over 15 teams and 1,000 members of all ages. The flow of information is vital to keep members and fans informed about games, practices, and events at the club. In the following sections, I'll highlight some of the significant improvements and opportunities provided by the website relaunch.<\\\/div>\",\"content_column_breakpoint\":\"m\",\"content_de_de\":\"Der FC Germania Forst ist ein regionaler Fu\\u00dfballverein mit \\u00fcber 15 Mannschaften und 1.000 Mitgliedern aller Altersgruppen. Der Kommunikationsfluss ist wichtig, um Mitglieder und Fans \\u00fcber Spiele, Trainings und Veranstaltungen des Vereins zu informieren. In den folgenden Abschnitten werde ich einige der wesentlichen Verbesserungen und Chancen hervorheben, die sich durch den Relaunch der Website ergeben haben.\",\"icon_width\":80,\"image_align\":\"top\",\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_svg_color\":\"emphasis\",\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin\":\"default\",\"meta_align\":\"below-title\",\"meta_element\":\"div\",\"meta_style\":\"text-meta\",\"panel_padding\":\"default\",\"panel_style\":\"card-default\",\"title\":\"About \n\n<p class=\\\"contour-text\\\">the Club<\\\/p>\",\"title_align\":\"top\",\"title_de_de\":\"\\u00dcber \n\n<p class=\\\"contour-text\\\">den Verein<\\\/p>\",\"title_element\":\"h2\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_style\":\"heading-medium\"}}]}]}]},{\"type\":\"section\",\"props\":{\"id\":\"website\",\"image_position\":\"center-center\",\"style\":\"secondary\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"media_overlay_gradient\":\"\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"headline\",\"props\":{\"class\":\"\",\"content\":\"A new design\\n\n\n<p class=\\\"contour-text\\\">for a new website<\\\/p>\",\"content_de_de\":\"Ein frisches Design<br \\\/>\\n\n\n<p class=\\\"contour-text\\\">f\\u00fcr eine Moderne Website<\\\/p>\",\"title_element\":\"h1\",\"title_style\":\"heading-medium\"}},{\"type\":\"text\",\"props\":{\"column_breakpoint\":\"m\",\"content\":\"\n\n<p>I made it my personal mission to create a new club image that can hold its own against even the largest clubs from the first and second leagues.<\\\/p>\",\"content_de_de\":\"\n\n<p>Ich habe es mir zur pers\\u00f6nlichen Aufgabe gemacht, ein neues Vereinsimage zu schaffen, das selbst mit den gr\\u00f6\\u00dften Vereinen der ersten und zweiten Liga mithalten kann.<\\\/p>\",\"margin\":\"default\"}},{\"type\":\"grid\",\"props\":{\"content_column_breakpoint\":\"m\",\"content_margin\":\"small\",\"filter_align\":\"left\",\"filter_all\":true,\"filter_grid_breakpoint\":\"m\",\"filter_grid_width\":\"auto\",\"filter_position\":\"top\",\"filter_style\":\"tab\",\"grid_column_gap\":\"small\",\"grid_default\":\"1\",\"grid_medium\":\"2\",\"grid_row_gap\":\"small\",\"icon_width\":80,\"image_align\":\"top\",\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_svg_color\":\"emphasis\",\"item_animation\":true,\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin\":\"medium\",\"meta_align\":\"below-title\",\"meta_element\":\"div\",\"meta_style\":\"text-meta\",\"panel_padding\":\"small\",\"panel_style\":\"card-secondary\",\"show_content\":true,\"show_image\":true,\"show_link\":true,\"show_meta\":true,\"show_title\":true,\"title_align\":\"top\",\"title_element\":\"h3\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_link\":false,\"title_margin\":\"remove\",\"title_style\":\"h2\"},\"children\":[{\"type\":\"grid_item\",\"props\":{\"content\":\"\n\n<p>The new fonts, clearer color guidelines, and subtle changes to the logo are elevating the club's design to new heights.<\\\/p>\",\"content_de_de\":\"\n\n<p>Die neuen Schriftarten, die klareren Farbvorgaben und die leichten \\u00c4nderungen am Logo heben das Design des Clubs auf ein neues Niveau.<\\\/p>\",\"meta\":\"\",\"title\":\"New Design\",\"title_de_de\":\"Neues Design\"}},{\"type\":\"grid_item\",\"props\":{\"content\":\"\n\n<p>All content is dynamically sourced from various places and categorizes to minimize the need for redundant content management.<\\\/p>\",\"content_de_de\":\"\n\n<p>Alle Inhalte werden dynamisch von verschiedenen Stellen bezogen und kategorisiert, um den Bedarf an redundanter Inhaltsverwaltung zu minimieren.<\\\/p>\",\"meta\":\"\",\"title\":\"Dynamic Content\",\"title_de_de\":\"Dynamische Inhalte\"}},{\"type\":\"grid_item\",\"props\":{\"content\":\"\n\n<p>The use of large, high-quality images enhances visual appeal and helps to grab the attention of visitors.<\\\/p>\",\"content_de_de\":\"\n\n<p>Die Verwendung gro\\u00dfer, aussagekr\\u00e4ftiger Bilder erh\\u00f6ht die visuelle Ausstrahlung und tr\\u00e4gt dazu bei, die Aufmerksamkeit der Besucher zu gewinnen.<\\\/p>\",\"meta\":\"\",\"title\":\"Large Images\",\"title_de_de\":\"Gro\\u00dffl\\u00e4chige Bilder\"}},{\"type\":\"grid_item\",\"props\":{\"content\":\"\n\n<p>To improve usability, the menus have been streamlined to give visitors faster access to the content they are looking for.<\\\/p>\",\"content_de_de\":\"\n\n<p>Um die Benutzerfreundlichkeit zu verbessern, wurden die Men\\u00fcs vereinfacht, damit die Besucher schneller zu ihren jeweiligen Inhalten gelangen.<\\\/p>\",\"meta\":\"\",\"title\":\"Simplified Menus\",\"title_de_de\":\"Vereinfachte Men\\u00fcf\\u00fchrung\"}}]}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"media_overlay_gradient\":\"\",\"position_sticky_breakpoint\":\"m\",\"vertical_align\":\"middle\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"fragment\",\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"media_overlay_gradient\":\"\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"image\",\"props\":{\"css\":\".el-element {\\n\\tpointer-events : none;\\n}\",\"image\":\"wp-content\\\/uploads\\\/2022\\\/11\\\/all-in-one-pc-mockup-3.svg\",\"image_svg_color\":\"emphasis\",\"image_width\":\"100%\",\"margin\":\"default\",\"position\":\"relative\",\"position_z_index\":\"3\"}},{\"type\":\"image\",\"props\":{\"css\":\".el-element {\\n    max-height: 60%;\\n    overflow-y: scroll;\\n    max-width: 92%;\\n    margin: 0 auto;\\n}\",\"image\":\"wp-content\\\/uploads\\\/2022\\\/11\\\/Screenshot-2022-11-18-at-23-50-16-1.-Mannschaft.png\",\"image_svg_color\":\"emphasis\",\"margin\":\"default\",\"position\":\"absolute\",\"position_left\":\"4%\",\"position_top\":\"5.5%\",\"position_z_index\":\"0\"}}]}]}]},{\"type\":\"button\",\"props\":{\"grid_column_gap\":\"small\",\"grid_row_gap\":\"small\",\"margin\":\"default\",\"text_align\":\"center\"},\"children\":[{\"type\":\"button_item\",\"props\":{\"button_style\":\"default\",\"content\":\"Visit fcforst.de\",\"icon\":\"world\",\"icon_align\":\"left\",\"link\":\"https:\\\/\\\/www.fcforst.de\\\/\"}}]}]}],\"props\":{\"layout\":\"1-2,1-2\"}}]},{\"type\":\"section\",\"props\":{\"id\":\"responsive\",\"image_position\":\"center-center\",\"style\":\"primary\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"props\":{\"layout\":\"1-3,2-3\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"media_overlay_gradient\":\"\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-3\"},\"children\":[{\"type\":\"fragment\",\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"media_overlay_gradient\":\"\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"image\",\"props\":{\"css\":\".el-element {\\n\\tpointer-events : none;\\n}\",\"image\":\"wp-content\\\/uploads\\\/2022\\\/11\\\/phone-mockup-1.svg\",\"image_svg_color\":\"emphasis\",\"image_width\":\"100%\",\"margin\":\"default\",\"position\":\"relative\",\"position_z_index\":\"3\"}},{\"type\":\"image\",\"props\":{\"css\":\".el-element {\\n    height: 92%;\\n    overflow-y: scroll;\\n    width: 90%;\\n    margin: 0 auto;\\n}\\n.el-image {\\n    width: 100%;\\n}\",\"image\":\"wp-content\\\/uploads\\\/2022\\\/11\\\/Screenshot-2022-11-19-at-12-04-36-FC-Germania-Forst-1909-e.V.png\",\"image_svg_color\":\"emphasis\",\"margin\":\"default\",\"position\":\"absolute\",\"position_left\":\"6%\",\"position_top\":\"2.5%\",\"position_z_index\":\"0\"}}]}]}]}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"media_overlay_gradient\":\"\",\"position_sticky_breakpoint\":\"m\",\"vertical_align\":\"middle\",\"width_medium\":\"2-3\"},\"children\":[{\"type\":\"headline\",\"props\":{\"class\":\"\",\"content\":\"\n\n<p class=\\\"contour-text\\\">Responsive<\\\/p> Design\",\"title_element\":\"h1\",\"title_style\":\"heading-medium\"}},{\"type\":\"text\",\"props\":{\"column_breakpoint\":\"m\",\"content\":\"\n\n<p>For soccer clubs, it's essential to be easily accessible on the go, as fans want to stay up-to-date with the latest results, read articles and learn more about the team. A significant focus of the changes in user experience was to optimize the interface for seamless adaptation between different screen sizes.<\\\/p>\",\"content_de_de\":\"\n\n<p>F\\u00fcr Fu\\u00dfballvereine ist es von wesentlicher Bedeutung, auch unterwegs einfach erreichbar zu sein, da die Fans \\u00fcber die neuesten Ergebnisse auf dem Laufenden bleiben, Artikel lesen und mehr \\u00fcber die Mannschaft erfahren wollen. Ein wesentlicher Schwerpunkt bei den Verbesserungen der Benutzererfahrung war die Optimierung der Benutzeroberfl\\u00e4che f\\u00fcr eine nahtlose Adaptation zwischen verschiedenen Bildschirmgr\\u00f6\\u00dfen.<\\\/p>\",\"margin\":\"default\"}},{\"type\":\"grid\",\"props\":{\"content_column_breakpoint\":\"m\",\"content_margin\":\"small\",\"filter_align\":\"left\",\"filter_all\":true,\"filter_grid_breakpoint\":\"m\",\"filter_grid_width\":\"auto\",\"filter_position\":\"top\",\"filter_style\":\"tab\",\"grid_column_gap\":\"small\",\"grid_default\":\"1\",\"grid_medium\":\"2\",\"grid_row_gap\":\"small\",\"icon_width\":80,\"image_align\":\"top\",\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_svg_color\":\"emphasis\",\"item_animation\":true,\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin\":\"default\",\"meta_align\":\"below-title\",\"meta_element\":\"div\",\"meta_style\":\"text-meta\",\"panel_padding\":\"small\",\"panel_style\":\"card-default\",\"show_content\":true,\"show_image\":true,\"show_link\":true,\"show_meta\":true,\"show_title\":true,\"title_align\":\"top\",\"title_element\":\"h3\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_link\":false,\"title_margin\":\"remove\",\"title_style\":\"h2\"},\"children\":[{\"type\":\"grid_item\",\"props\":{\"content\":\"\n\n<p>All posts are displayed in a grid that is easily adaptable to different screen sizes by adjusting the number of columns.<\\\/p>\",\"content_de_de\":\"\n\n<p>Alle Beitr\\u00e4ge werden in einem Gitter angezeigt, welches sich leicht an verschiedene Bildschirmgr\\u00f6\\u00dfen anpasst, indem die Anzahl der Spalten ver\\u00e4ndert wird.<\\\/p>\",\"meta\":\"\",\"title\":\"Adaptive Grid\",\"title_de_de\":\"Adaptives Grid\"}},{\"type\":\"grid_item\",\"props\":{\"content\":\"\n\n<p>All buttons are large and easy to press with a finger, as well as clearly labeled with their intended function.<\\\/p>\",\"content_de_de\":\"\n\n<p>Alle Schaltfl\\u00e4chen sind gro\\u00df und leicht mit dem Finger zu bet\\u00e4tigen und deutlich mit ihrer jeweiligen Funktion beschriftet.<\\\/p>\",\"meta\":\"\",\"title\":\"Large Buttons\",\"title_de_de\":\"Gro\\u00dfe Schaltfl\\u00e4chen\"}},{\"type\":\"grid_item\",\"props\":{\"content\":\"\n\n<p>To reduce the need for scrolling through a large number of posts, filters were introduced that allow users to easily sort through the most important categories.<\\\/p>\",\"content_de_de\":\"\n\n<p>Um das l\\u00e4stige Scrollen durch eine gro\\u00dfe Anzahl von Beitr\\u00e4gen zu vermeiden, wurden Filter eingef\\u00fchrt, die es den Nutzern erm\\u00f6glichen, nach den wichtigsten Kategorien zu sortieren.<\\\/p>\",\"meta\":\"\",\"title\":\"Filters\",\"title_de_de\":\"Filter\"}},{\"type\":\"grid_item\",\"props\":{\"content\":\"\n\n<p>A significant portion of the club's income comes from sponsors, so it was essential to provide better visibility for their logos and ads on the website, while still keeping the main focus on the content.<\\\/p>\",\"content_de_de\":\"\n\n<p>Ein wesentlicher Teil der Vereinseinnahmen stammt von Sponsoren, so dass es wichtig ist, die Sichtbarkeit von Firmenlogos und Anzeigen auf der Website zu verbessern, ohne den Fokus auf den Inhalt zu vernachl\\u00e4ssigen.<\\\/p>\",\"meta\":\"\",\"title\":\"Space for Sponsors\",\"title_de_de\":\"Sponsoren\"}}]}]}]}]},{\"type\":\"section\",\"props\":{\"id\":\"gameresults\",\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"props\":{\"layout\":\"1-2,1-2\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"media_overlay_gradient\":\"\",\"position_sticky_breakpoint\":\"m\",\"vertical_align\":\"middle\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"headline\",\"props\":{\"class\":\"\",\"content\":\"\n\n<p class=\\\"contour-text\\\">Dynamic<\\\/p>\\nGame results\",\"content_de_de\":\"\n\n<p class=\\\"contour-text\\\">Dynamische<\\\/p>\\nSpielergebnisse\",\"title_element\":\"h1\",\"title_style\":\"heading-medium\"}},{\"type\":\"text\",\"props\":{\"column_breakpoint\":\"m\",\"content\":\"\n\n<p>Manually maintaining match results, league tables, and statistics for each team would be a monumental task for the volunteer members of the club. To alleviate this burden, I utilized an API from a regional soccer platform to load all important content dynamically and in real-time .<\\\/p>\\n\n\n<p>This allows visitors to access the latest match, a schedule of all past and future matches, league tables, and player statistics such as goals scored, red cards, and additional information.<\\\/p>\",\"content_de_de\":\"\n\n<p>Die manuelle Pflege von Spielergebnissen, Ligatabellen und Statistiken f\\u00fcr jede Mannschaft w\\u00e4re f\\u00fcr die ehrenamtlichen Mitglieder des Vereins eine Mammutaufgabe gewesen. Um diese Aufgabe zu erleichtern, habe ich eine API einer regionalen Fu\\u00dfballplattform verwendet, um alle wichtigen Inhalte dynamisch und in Echtzeit zu laden.<\\\/p>\\n\n\n<p>So k\\u00f6nnen die Besucher auf das letzte Spiel, einen Spielplan mit allen vergangenen und zuk\\u00fcnftigen Spielen, Ligatabellen und Spielerstatistiken wie erzielte Tore, rote Karten und weitere Informationen zugreifen.<\\\/p>\",\"margin\":\"default\"}}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"media_overlay_gradient\":\"\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"image\",\"props\":{\"image\":\"wp-content\\\/uploads\\\/2022\\\/11\\\/Screenshot-2022-11-19-at-13-07-48-1.-Mannschaft.png\",\"image_border\":\"rounded\",\"image_box_decoration\":\"shadow\",\"image_svg_color\":\"emphasis\",\"margin\":\"default\"}}]}]}]},{\"type\":\"section\",\"props\":{\"id\":\"nextcloud\",\"image\":\"wp-content\\\/uploads\\\/2022\\\/11\\\/cloud-blue-sky.jpg\",\"image_position\":\"center-center\",\"image_size\":\"cover\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"props\":{\"layout\":\"1-2,1-2\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"media_overlay_gradient\":\"\",\"padding\":\"small\",\"position_sticky_breakpoint\":\"m\",\"vertical_align\":\"middle\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"image\",\"props\":{\"image\":\"wp-content\\\/uploads\\\/2022\\\/11\\\/Nextcloud_Logo.svg\",\"image_svg_color\":\"\",\"image_svg_inline\":false,\"image_width\":\"400px\",\"margin\":\"default\",\"text_align\":\"center\"}}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"media_overlay_gradient\":\"\",\"position_sticky_breakpoint\":\"m\",\"vertical_align\":\"middle\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"panel\",\"props\":{\"content\":\"\n\n<p>Another crucial aspect of the relaunch was the integration of a locally hosted Nextcloud into the club's operations. This enables active members to create and share documents, access their email, and manage calendars.<\\\/p>\\n\n\n<p>Additionally, the Nextcloud is connected to the CMS via oAuth 2.0, providing cross-platform access with a single account and a streamlined user management.<\\\/p>\",\"content_column_breakpoint\":\"m\",\"content_de_de\":\"\n\n<p>Ein weiterer wichtiger Aspekt des Relaunches war die Integration einer lokal gehosteten Nextcloud in den Vereinsbetrieb. Diese erm\\u00f6glicht es aktiven Mitgliedern, Dokumente zu erstellen und zu teilen, auf ihre E-Mails zuzugreifen und Kalender zu verwalten.<\\\/p>\\n\n\n<p>Dar\\u00fcber hinaus ist die Nextcloud \\u00fcber oAuth 2.0 mit dem CMS verbunden, was einen plattform\\u00fcbergreifenden Zugriff mit einem einzigen Konto und eine optimierte Benutzerverwaltung erm\\u00f6glicht.<\\\/p>\",\"icon_width\":80,\"image_align\":\"top\",\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_svg_color\":\"emphasis\",\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin\":\"default\",\"meta_align\":\"below-title\",\"meta_element\":\"div\",\"meta_style\":\"text-meta\",\"panel_padding\":\"default\",\"panel_style\":\"card-secondary\",\"title\":\"Germanen \n\n<p class=\\\"contour-text\\\">Cloud<\\\/p>\",\"title_align\":\"top\",\"title_element\":\"h2\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_style\":\"heading-medium\"}}]}]}]},{\"type\":\"section\",\"props\":{\"id\":\"statistics\",\"image_position\":\"center-center\",\"style\":\"primary\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"media_overlay_gradient\":\"\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"headline\",\"props\":{\"class\":\"\",\"content\":\"\n\n<p class=\\\"contour-text\\\">Metrics<\\\/p>\\nafter Launch\",\"content_de_de\":\"\n\n<p class=\\\"contour-text\\\">Statistiken<\\\/p>\\nnach dem launch\",\"title_element\":\"h1\",\"title_style\":\"heading-medium\"}},{\"type\":\"grid\",\"props\":{\"content_column_breakpoint\":\"m\",\"css\":\".el-image {\\n padding-left: 10px;   \\n}\",\"filter_align\":\"left\",\"filter_all\":true,\"filter_grid_breakpoint\":\"m\",\"filter_grid_width\":\"auto\",\"filter_position\":\"top\",\"filter_style\":\"tab\",\"grid_column_align\":false,\"grid_default\":\"1\",\"grid_divider\":false,\"grid_masonry\":false,\"grid_medium\":\"3\",\"grid_row_align\":false,\"icon_width\":\"75\",\"image_align\":\"left\",\"image_grid_breakpoint\":\"m\",\"image_grid_column_gap\":\"medium\",\"image_grid_row_gap\":\"large\",\"image_grid_width\":\"auto\",\"image_svg_color\":\"emphasis\",\"image_vertical_align\":true,\"item_animation\":true,\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin\":\"\",\"meta_align\":\"below-title\",\"meta_color\":\"muted\",\"meta_element\":\"div\",\"meta_margin\":\"remove\",\"meta_style\":\"h4\",\"panel_padding\":\"small\",\"panel_style\":\"card-default\",\"show_content\":true,\"show_image\":true,\"show_link\":true,\"show_meta\":true,\"show_title\":true,\"title_align\":\"top\",\"title_element\":\"h2\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_margin\":\"remove\",\"title_style\":\"heading-medium\"},\"children\":[{\"type\":\"grid_item\",\"props\":{\"icon\":\"fa6-solid--user-plus\",\"meta\":\"More Visitors*\",\"meta_de_de\":\"Mehr Besucher*\",\"title\":\"82.6%\"}},{\"type\":\"grid_item\",\"props\":{\"icon\":\"zondicons--timer\",\"meta\":\"Average Session Duration*\",\"meta_de_de\":\"Durchschnittliche Besuchszeit*\",\"title\":\"2:43s\"}},{\"type\":\"grid_item\",\"props\":{\"icon\":\"heroicons-solid--cursor-click\",\"meta\":\"Pageviews\\\/Session*\",\"meta_de_de\":\"Seitenansichten\\\/Besucher*\",\"title\":\"3.4\"}},{\"type\":\"grid_item\",\"props\":{\"icon\":\"fa6-solid--magnifying-glass\",\"meta\":\"SEO Score**\",\"title\":\"92%\"}},{\"type\":\"grid_item\",\"props\":{\"icon\":\"fa6-solid--file-code\",\"meta\":\"Best Practices**\",\"title\":\"100%\"}},{\"type\":\"grid_item\",\"props\":{\"icon\":\"fontawesome-solid--blind\",\"meta\":\"Accessibility**\",\"meta_de_de\":\"Barrierefreiheit**\",\"title\":\"92%\"}}]},{\"type\":\"text\",\"props\":{\"column_breakpoint\":\"m\",\"content\":\"\n\n<p>* In the first three months, compared to the previous website in the last three months (Bots excluded)<br \\\/>** Google Lighthouse Score (Desktop)<\\\/p>\",\"content_de_de\":\"\n\n<p>* In den ersten drei Monaten, verglichen mit der vorherigen Website in den letzten drei Monaten (Bots ausgeschlossen)<br \\\/>** Google Lighthouse Score (Desktop)<\\\/p>\",\"margin\":\"default\",\"text_style\":\"meta\"}}]}]}]}],\"version\":\"3.0.10\",\"yooessentialsVersion\":\"1.8.5\"} --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>FC Forst Club Website Relaunch About the Club Website Responsive Design Dynamic Game Results Germanen Cloud Statistics About the Club FC Germania Forst is a local soccer club with over 15 teams and 1,000 members of all ages. The flow of information is vital to keep members and fans informed about games, practices, and events [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,5,7],"tags":[],"class_list":["post-387","post","type-post","status-publish","format-standard","hentry","category-media-design","category-portfolio","category-web-development"],"_links":{"self":[{"href":"https:\/\/2023.pfah.li\/wp-json\/wp\/v2\/posts\/387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/2023.pfah.li\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/2023.pfah.li\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/2023.pfah.li\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/2023.pfah.li\/wp-json\/wp\/v2\/comments?post=387"}],"version-history":[{"count":66,"href":"https:\/\/2023.pfah.li\/wp-json\/wp\/v2\/posts\/387\/revisions"}],"predecessor-version":[{"id":1315,"href":"https:\/\/2023.pfah.li\/wp-json\/wp\/v2\/posts\/387\/revisions\/1315"}],"wp:attachment":[{"href":"https:\/\/2023.pfah.li\/wp-json\/wp\/v2\/media?parent=387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/2023.pfah.li\/wp-json\/wp\/v2\/categories?post=387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/2023.pfah.li\/wp-json\/wp\/v2\/tags?post=387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}