CMS and Data Repository: Contentful.com
GIT - BitBucket, BrowserStack
This is a very simple - two days of research and work from scratch - presentation.
It is NOT RESPONSIVE - it is designed for FULL-HD screen.
Please use a bigger device and maximize the size of your browser window.
Functionally it works well even on ~probably all~ smartphones but it is designed for a bigger screen.
Complexity with the possibility to resolve every problem
is probably the feature that makes programming so much fascinating
Flawless operation at all popular smartphones is the Highest Priority
Very quick and smooth UI reaction is at the second place
Then comes configurability, adaptability and simplicity
After thorough research I have chosen the following template as the basis and elaborated it to achieve the above described goals. The original from Graphberry.com simply does not work in so many situations - I had to rework everything. Now it works well on every device and it can be easily modified and expanded with new 'blocks of functionality'. All the page contents is fetched from Contentful database. For the time being all the configuration is performed through Contentful but I already have nice achievements working on WYSIWYG editing capabilities.
The goal is to make an automatic service where users will be creating their own web pages using this system
I can not show you the working page today. I am just working on huge performance boost.
Please keep on scrolling down to display floating 'black-glass' descriptions.
Do not hurry too much - each glass FADES IN so it needs a bit of time to show up.
1. All page elements are fetched from contentful.com database. Only elements with status PUBLISHED are taken. The style of each element can be adjusted individually.
The big slider at the beginning of the page is adjusted to screen size by intelligent algorithm. For every slide of the slider the HREF is defined. So if the user clicks any element of current slide the page will scroll down to appropriate location.
The slider works very smoothly with SWIPE on touchscreen.
2. The width of contents is dynamically adjusted to the screen width. Whole width is utilized so everything looks nice at every smartphone or tablet - Portrait or Landscape. At 737px there are 3 columns again.
3. The Navigation Bar with logo and menu becomes transparent when the page is scrolled down at mobile device (LOOK HERE AT MOBILE VERSION VIEW ON THE RIGHT SIDE). The bar is also transparent for touch/click actions. This is particularly useful in Landscape orientation at smartphones.
4. When the user clicks/touches a gallery thumbnail additional panel is displayed containing detailed information on particular topic with additional photo and/or video objects.
5. When the user moves mouse cursor over a Team Member - or touches it at a touch device - a mask is displayed with additional information.
6. Color and style of each element can be configured in CMS including the background of each section.
HTML is accepted as a contents of each entry thus the appearance is configurable at a single character level.
7. Absolutely perfect solution for Photo Gallery is used. It is outstanding among other available solutions. Initially the gallery loads only little thumbnails - so there is no heavy loading at page openning. The first full size picture is loaded when the user clicks a thumbnail. Immediately the adjacent full-size photos are loaded to the cache in the background. So when the user swipes left or right, the full size image is ready there. Swiping is a real pleasure. You can swipe photos even with a mouse. There are many advantages of our photo gallery. The first of all is the awesome performance.
8. All email addresses on this Web Page are encoded and invisible for Web Bots. So there is no threat of stealing an address for spamming. On the other hand each email address is visible for human users. They can be copied and pasted or just clicked as a mailto: element.
'Send a message' form is protected against spamming bots. We use special techniques to block the possibility of using the Contact Form to send spam.