There are several ways to create modern and responsive web layouts. Templates and themes are mostly implemented with UIkit, Bootstrap or Foundation, because it seems simple and easy at first sight.
Even without a framework, responsive websites can be implemented with acceptable effort. Without a framework, significantly faster loading times can be achieved, which leads to a longer dwell time of the visitor on the website. Another advantage is that Google places fast websites better.
The necessary used techniques for responsive websites I have presented in this talk at the JoomlaDay 2019. Especially the techniques CSS Flexbox and CSS Grid are discussed.
The following points will be covered in the lecture on web layouts:
- Differences between Flexbox and Grid
- responsive column layout with image and text
- CSS Padding Bottom Trick
zum Schwerpunkt CSS Flexbox
- Alignment of elements with CSS Flexbox
- typical examples with CSS Flexbox
- CSS Flexbox Browser Debugging
- Calculation of the size of the child elements of CSS Flexbox
and focus on CSS Grid:
- Grid alignment of the elements
- Grid Template Areas
- Grid auto-fill und auto-fit
- CSS Subgrid
- Implicit und Explicit Grid
- Grid Browser Debugging
CSS Grid and Flexbox allow fast loading times of the website, since no framework for the website layout is needed. The advantages like higher conversion rate and more individual layouts support this implementation.
To the --> Slides about modern web layout with flexbox and grid
To the --> Video about modern web layout with flexbox and grid
Progressive Web App (PWA)
Progressive Web App - essential for every website? Read more...
Joomla PWA
Realization of the Progressive Web App with push messages in Joomla for a commune.Read more...
PWA oder Nativ?
Speaker at the Digital Breakfast in Stuttgart "PROGRESSIVE WEB APP (PWA) AN ALTERNATIVE TO THE NATIVE APP?" Read more...