|
Another Friday, another update!
My client demanded a little break for my current website project this week. This meant I had some time to invest in my own projects as well as another client project in the pipeline.
This lead to many different tasks this week; I designed a logo, developed a small plugin for the Grav CMS and designed more screens for the Wellfunded app.
|
|
by Lella
If you need someone for personal shopping, style advice, wardrobe check, make up – Gabriella does it all.
To get more clients and maybe, one day, be able to do it full time she decided to get a logo and a website, which should represent her personality and services.
She got my contact details from a mutual friend and now I can design her new logo and develop the website.
After a first meeting, I tried my hands on some logo ideas I got based on her input. She want it to speak to women and men alike, include some geometrical form like a square, hexagon, circle or diamond, the font should be a bit squiggly and it should include the colors gold and aquamarine.
After I spent some hours on Monday, I was able to present a first set of logo ideas.
Gabriella gave me feedback and after some back and forth with more ideas I was able to narrow down the options to two logos.
Finally, after a last round of feedback yesterday, we settled on the following logo:
The next step will be the development of the website. She likes the look of printed fashion magazines, so this will be the direction I will go with the design. I'm excited about this project and will report back, after the website is online.
|
|
Grav Plugin Simple Responsive Tables
As it is stated in my company name "Beni Gartenmann Design & Development", I also spent a day doing some software development.
Last week I wrote about the project bauhygiene.ch that I did last spring. The site makes heavy use of tables to display lot of complex data. It is the right form to provide an easy oversight, but unfortunately it didn't work really well on small screens like smartphones. Also, different devices handled the tables differently, in the worst case presenting only half of the layout.
I researched different solutions to the problem, always trying not to put any more work on the shoulders of my client and also providing a good experience for the website user.
The simplest solution was to make the tables scrollable on small screens. I was able to implement this with just changing the CSS and it seemed to work. But after a while we noticed two problems with this solution.
It didn't correctly display small tables on larger screens anymore. There was also no visual indication that a table can be scrolled, leaving it up to the user to find out.
To solve these two problems more coding had to be done. The solution was to wrap all tables within two div elements, allowing for better style handling. This would have been possible to do manually for each table on the site. But as I stated above, I didn't want the client to do more work than necessary.
That led me to write a plugin for the Grav CMS, which does just that. Scan the content of each page to find any tables, wrap them with the needed div elements, and provide the necessary CSS styles. I then also included a small JavaScript snippet, to add visual indicators on the left or right of the tables, depending on the side it can be scrolled.
I know, this was a really technical description, so I made a little GIF to show you the result of all of this:
The ones who want to deep dive into the technical implementation behind it can visit the code repository on Github: https://github.com/bgartenmann/grav-plugin-simple-responsive-tables
I also submitted it to the official Grav plugin repository, making it available to all Grav users as soon as it gets approved.
|
|
Thanks for reading.
And now off to the weekend!
Beni
|
|
|
|
|
