OpenHAB's main web site

Following up on the discussion about openhab marketing, I’d like to make a few suggestions regarding the current web site, or at least start a discussion and gather feedback or even hopefully find some volunteers. My graphic design skills sucks.

My suggestions are as follows:

  • On the home page, change the highlighted area below to include some form of a screenshot of an openhab dashboard / mainui / basicui. Even better if it could be a slideshow, or a video showcasing different screens / capabilities.
  • Change the current demo linked from the main page, so that instead of showing two massive buttons “Home/Away” and a list of “Scenes”, into a bunch of controls (e.g. turn lights on/off, and information display, e.g. graphs), or a floorplan map.
  • Review / improve the demo. The community can offer / submit suggestions for what can / should be on it.

I understand that there’s a demo there, so why should we put up screenshots? Well… I for one have never bothered clicking on that demo link and it seems that I’m not the only one. People are generally lazy. When they landed on a page, they want to see something immediately. They aren’t going to start clicking around launching something that they are not familiar with. To be honest, even I feel a level of apprehension to “launch” the demo myself.

A screenshot / slideshow would at least give people some idea what they’re getting themselves into.

1 Like

The main website repo is GitHub - openhab/website: This repository contains the final artifacts from which the project website is served. and it’s written using Vue when what ever changes to be made are decided upon. I’d say that if this discussion doesn’t go anywhere to open an issue and way.

The demo is a little trickier. There was a discussion about getting the demo into source control and deployable from source control here but I’m not sure anything has been done about it since. It would be good to resurrect this so we can more collaboratively build up the demo.

From an SEO point of view, more than 1 image makes loading the visible part of the website heavier and most people scroll down without looking at them. I suggest having only one image showcasing the most important/attractive message we want to convey. It could even be a video but it must load immediately.

The slider with screenshots could be put somewhere below.

All images not seen when the website is loaded should be lazy loaded, and the javascripts, and CSS (Defer non-critical CSS) files that are not required for the top elements should be deferred.

yeah! make it look like this


From this post