Viewing Responsive Design

Responsive Design



User: Roddy 5 years ago
Here is a Demo Page made with responsive widgets that use the CSS Grid Layout Module to create responsive items more efficiently using less code with little or no java script. This module has been supported by all the main browsers for over two years and makes all other grid systems like Bootstrap redundant.

The demo is of a one page site layout that uses off screen modals and more/less grids to conserve space.

The page has a sticky scroll navigation that uses the headings as anchors. The navigation can link to other pages too.

Both the Hero image and the slider use what I call "switch" layout. This allows full width fixed height hero items to switch to fully responsive width and height on mobile devices for a better viewing experience.

The hero image use three image files - one for each device type - for faster download and the slider images are lazy loading with only the first, last and next images downloaded at page load. Since autoplay is not a good idea for pages viewed on mobile devices, it has an option to autoplay and stop at the last slide.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Roddy 5 years ago
The next DEMO shows how to use a splash page and still get the content indexed by the search engines.

There's an example of a flexbox flyout navigation and a CSS grid for images and text.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.


Post Reply
You must login or signup to post.