Gemeindeverwaltungsverband Schwäbischer Wald
Background
The Swabian Forest Association of Municipalities is an association of the municipalities of Mutlangen, Spraitbach, Ruppertshofen, Täferrot and Durlangen. It is responsible for a wide range of tasks within this association. These include, for example, financial tasks, issuing of permits, and other billing transactions as well as waste water.
The customer wanted an internet presence that clearly structures these areas of activity and more and enables communication with the residents.
Challenge
Get to know Typo3. Since I have never worked with this CMS before, this project was the perfect introduction. Since I have experience with HTML and CSS as well as graphic design, it was a matter of linking them with Typo3.
Goals
- Input: The client wanted to be able to create and expand the content themselves, without having any programming knowledge to do so
- Clear structure and transparency: The tasks of the GVV should be presented in a clear and concise way
- Overview of the associated communities
- Interactive map of the associated communities
- Easy communication: For inquiries there should be a contact form on the website
Scope
UI Design, Webdesign, Frontend
Tools
Adobe XD, Adobe Illustrator, Adobe Photoshop, HTML, CSS, Javascript
Role
UI Design, Frontend (CSS, HTML)
Duration
one week
Working with Typo3 CMS
Having never worked with this content management system before, this project was my introduction to Typo3. It is an extensive open source content management system with a large, active community. It is constantly being extended, improved and updated. For Typo3 there is also a large selection of extensions, as well as the possibility to write extensions yourself. Typo3 is highly customizable and offers an extensive backend interface that allows users to add content without any programming knowledge.
Clean install of Typo3 with main architecture
Tasks:
- Styling (css)
- Main carousel (graphics)
- Contact form
- Map (typo3 extension)
- Svg hover map (html, css, illustrator)
CSS
You can simply include a .css style sheet in Typo3. You could declare extra classes in the back end, but I found it cleaner to write everything into the .css file, so that it's all in one place.
Carousel
Typo3 comes with a variety of ways to display text and images. Carousels are just one of these options. It shows pictures of all the town halls of the participating municipalities. I decided to create an overview graphic as the first image, showing all the member municipalities, as well as their coats of arms.
Contact form
This is part of the base Typo3 installation. It was a matter of simply learning how to piece it together and add the appropriate validators.
Map extension
For Typo3 there is an extensive extension repository. The installation of each extension is always the same in the first steps:
Install the extension and add it to the template. Everything else can be found in the corresponding documentation.
Svg map
This was never added to the website due to time restrictions.
Update from future Natha: After a year of experience with Typo3 I know it is possible to add html code snippets via iframe. It is also possible to include custom .js files. So my approach would be:
- Create this map outside of Typo3
- In BE, add html code part
- Include .css and .js files, upload to server
- Finetuning
Map - Showcase
Gemeinde Mutlangen
Gemeinde Spraitbach
Gemeinde Ruppertshofen
Gemeinde Täferrot
Gemeinde Durlangen
Showcase
Hover over the map to show info
The customer asked for this feature specifically. It is a simple svg map which hides and displays information on hover. However, it has never been implemented due to a tight time frame.
Tools
Adobe Illustrator, html, css, jquery
SEO - Search Engine Optimization
Background
Since the GVV did not have a web presence until now, and wants to actively use it for communication in the future, it is important to our client to appear as high as possible in search engine results. Our goal was to reach first place in a search of "GVV {related municipality}".
Research
How do I optimize SEO specifically for websites created with Typo3? What possibilities does Typo3 itself offer me, can I improve the SEO with extensions?
Problem
Adjustments in Typo3 resulted in first place in DuckDuckGo only. However, Google would place us at page six. So i had to figure out specifiacally how to optimize everything for google, since this would be the most used search engine.
Solution
By adding us as owner of the website, adding some html into our hoster and uploading a sitemap, we managed to appear on page one of google search results.
Final Design
Design
The logo of the GVV provided a green color, which I incorporated as a guiding element. I often used the dot matrix of the logo for graphics in the background. The curves can also be found in the submenus. It was important to me to work with a lot of white space to give the website a modern and open look and feel.
Color choices and accessibility
Public websites should be accessible. for this reason I focused on high contrasts and good readability of text elements in the design. Typo3 offers options to make graphics readable for screen readers. Since the client had never worked with Typo3 before and wanted to add content on his own, he received training from us on how to add content and how to complete it according to optimal SEO and accessibility.
