Publish Date:   2017.03.07              

OPTIMAL & UNIVERSAL   Web Page Template
with WYSIWYG editing capabilities

Technologies:   HTML, PHP, JavaScript - no JQuery

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.

INTRODUCTION

I have made this presentation to quickly show up my abilities and working style. I am really deep into cross browser PHP and Javascript functionality and finding really cross browser responsive solutions became my passion recently. I assumed to spend about 1 day to create this tiny 'system' of presentation based on a single high-and-narrow picture to describe the ideas I have been working on over the last three months. After all I have spend two days on this presentation - much of it was text editing and polishing things - and additional two days struggling to find a workaround to a tiny piece of code not working properly on Samsung Galaxy Android smartphones.

Functionality used here might be also useful to make other kinds of presentations. For example - to describe large areas by the means of huge photos at the background - just like in the following example. The big photo seems to load reasonably fast. Horizontal Sample is the one I have been fighting with for additional two days and there are still things to be done about it but no time for it now:   Horizontal Sample

While preparing this presentation I have collided several problematic points where I had to work on special solutions in                          

order to achieve cross-browser effects. But actually the Horizontal Sample mentioned above was much bigger problem. In horizontal situation the picture width is unpredictable so everything has to be measured in percentages. But the real problem is that Samsung Android Chrome Browser does not interpret height:100% the same way as all other browsers do. So this hereunder accessible system of floating informative DIVs at vertical Web Page seems to work fine at every device/browser, but the Horizontal Sample has some problems at Samsung Android.

I have spent over three months recently deeply studying and utilizing mostly pure Javascript. I try to avoid jQuery. But I feel it is high time to enter technologies like Angular, React, Redux. For quite a bit of time I am preparing to enter those technologies. While travelling I often read articles and watch tutorials about it - so I am already theoretically initially prepared. And I have a really strong will to study those subjects but I need a job to be able to continue with my programming passion. Looking at your jobs announcement somewhere in the net I figured out it might be something special for me. Is there a way to get a job with the above                          

mentioned technologies although I do not have experience with them? I have lot's of programming experience but no Angular, React nor Redux. With my passion and hard working nature I believe I might achieve good productivity level quite quickly. In return I can offer huge - over 35-years of programming experience, deep understanding of DOM, PHP, pure Javascript, XML, Java and many other languages, good work organization, good coding practices, teamwork abilities, responsibility, precision, ability to cope with high complexity, ability to search for knowledge, flexibility and willingness to work hard.

So - returning to the subject - this application has been tested in Chrome, Firefox, Opera, Safari, IE and several mobile phones - in BrowserStack and also at the real devices in Media Markt - a large electronic equipment mall. It seems that everything works fine in Chrome at all smartphones in LANDSCAPE orientation. Off course much should be improved here and my lust for perfection forces me to continue improving but I have to return to my main project now so I will stop at this point.

FULL-HD 1920 horizontally resolution is essential

Complexity with the possibility to resolve every problem
is probably the feature that makes programming so much fascinating

The Idea

...to create the POSSIBLY UNIVERSAL template with CMS which is 100% responsive and works really flawlessly on all popular mobile devices. CHEAP BUT FUNCTIONAL solution. The USER must be able to choose various functional blocks, specify their sequence order, choose color schemes, etc. Everything must be configurable through CMS to fulfill the needs of most final non-programmer users. The CMS must be really simple - the ultimate solution is the WYSIWYG page editor - which is under construction and actually almost ready - where the user just clicks on a page element and edits contents ON THE PAGE - without any CMS.

Lots of small companies have Web Pages not fully responsive.

In the era of fully responsive Web there might be something like 'OPTIMAL Page Layout'. The solution that fulfills all needs of vast majority of Internet Pages. Looking at modern Web services we can clearly distinguish quite small set of used blocks/mechanisms which are almost identical and repeated over and over throughout all Internet. These similarities are evidently the consequence of the requirement for every Web page contents to be 'smartphone ready'. Texts and pictures inserted into Page must be ready to be displayed on huge desktop screen and a little smartphone in Portrait orientation as well.

So the contents itself is severely influenced by this rule - messages must be short. There are also numerous other reasons to keep things compact.

People are in rush nowadays - so they do not have time to read much. Short messages reach our brains much easier.

Messages displayed to the user
must be possibly short and informative

To assure comfort of reading text should be organized in reasonably narrow columns - even on huge screens. Blocks                          

of text should be possibly small. Little size of a block forces the Web page content creator to invent short sentences - and this is good - especially at smartphones.

It is wise to restrict the amount of information to required minimum


If we want to be friendly to the wide range of targeted users - like older people - the font used can not be small. Controls - buttons, links etc. - must be big enough for big fingertips.

Even on a small smartphone
fonts and buttons must be quite big


On the other hand there are situations where much text is inevitable. So the Page Layout must be configurable to allow little font in specific situations. And in general in every Web page entry the user must be able to display anything like this (the green one is a link) - in almost every entry of a page.

Users must be able to control
the appearance of all page elements


Everything must work & look well in a huge bunch of differently behaving Web Browsers. bootstrap.css is amazing but I find it not wise enough. Its creators have thrown all smartphones and small tablets into a single category. But there is so wide variety of sizes and screen resolutions of mobile devices and so much screen space is wasted as empty. So I've payed attention to always utilize full screen width and display things pretty way on every kind of device.                          

Flawless and fully responsive
cross browser functionality


Touchscreen and mouse operation must be smooth. All sliders, photo galleries and other controls must react immediately. Clicking, touching and swiping must be a pleasure. While watching photos the gallery is automatically switched to full screen and three Full Size photos are downloaded - the chosen one, the previous-in-sequence one and the successive one. So when the user swipes left or right there is no any waiting.

All active elements must react immediately
swipe gestures must be performed quickly and smoothly


And finally and very very importantly the page performance must be good. The page must load quickly. Or at least from the user perspective the beginning of the page must be quickly accessible - the rest may load afterwards.

The user must gain access to page
shortly after he starts loading it


In addition...

The CONTACT form must be protected against automatic spamming bots and all email addresses displayed on the page must be invisible for bots but accessible for humans as text in the form of mailto: element.

CONTACT FORM MUST BE SPAM-PROTECTED
All email addresses must be INVISIBLE FOR BOTS

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.