I have been hand coding websites since 1996. In 2005 I had just discovered Coffeecup Software, and I immediately fell in love with their HTML Editor. I made my first honey site with it, see result below.
The site was typical for its time, it had all the details that were popular: The design adapted for 800x600 monitors, the Comic Sans font face, the fancy, oversized buttons and the gradient colours. And I had just learnt enough css to be able to separate it from the html code!
After about 5 years I felt that an update was very much needed. So in 2010 the second edition of my honey site was born. I used several Coffeecup tools, such as the Form builder and Flash video.
Monitors had grown, and this design was made for 1024 width. It was still before mobile devices became particularly common, so there was no responsive web design yet. Also, flash was still a very popular thing, and Adobe and Steve Jobs were still in agreement with each other. ;)
About a year after I had finished my version 2, a guy named Ethan Marcotte had some ideas about making websites adaptable to different monitor sizes. It took him another year to create 'RWD' (Responsive Web Design). Various companies got hooked on the idea, and grid frameworks were developed in order to simplify the job of creating responsive websites, so also at Coffeecup Software. So there we are...
After having been a coder for 20 odd years, I have now fired up Coffeecup's 'no-coding' Responsive Foundation Framer (RFF) and set out on a mission to revamp my honey site. It's about time I make it responsive. I would have been able to do this without a special, responsive programme, but I wanted to test one. I would have preferred the Responsive Bootstrap Builder (RBB), but that one has not quite 'grown up' yet, so therefore I'll try RFF. I feel a bit like cheating on the HTML Editor, though.
It's always necessary to plan a bit before setting out. I wanted to reuse as much as possible of the existing elements. I had to find some larger images, and the head image had to be made wider in order to fit a wider viewport, so I 'photoshopped' it a bit. I noticed that the images are not really good enough. Not much I can do about it now in the winter, but during the next season I need to get some better ones.
For the navbar I used one of the built-in components. I had to make sure the menu items displayed column on small screens. That was easy to accomplish and went ok. I also wanted to have less height to the menu bar. I set the height to 40px on the container class 'top-bar'. A bit more fiddling, in order to get all the nested containers the same height and colour, but I got there in the end. Then I ran into an issue - I thought.The menu works great in RFF, but not in Chrome, Ffx and Edge, see illustration. After asking about this at Coffeecup, I learnt that it was not an 'issue' after all. It was supposed to be like this - for now, until they had found a cure for it.