|
   |
| Forum moderator: bigblog |
| uCoz Community » For Webmasters » Custom Solutions » Responsive card / grid / masonry layout |
| Responsive card / grid / masonry layout |
The card layout has seen great success in recent times and is extremely useful for creating modern websites that function perfectly on a wide variety of screen resolutions. But none of the recent free ucoz templates propose such layout.
It is possible to implement a card-based layout on a ucoz website. A few paid templates have tackled the subject, without offering a satisfying solution though. I have listed a few below: https://21-optimus.ucoz.com/ http://boutique.usite.pro/ http://susanna.ucoz.net/ I have followed a tutorial that offers to combine a CSS Grid and Flexbox (see link below) and, with a few adjustments, it works perfectly. https://webdesign.tutsplus.com/tutorials/solving-problems-with-css-grid-and-flexbox-the-card-ui--cms-27468 If someone is interested, feel free to ask me for the HTML and CSS code. At the moment, I'm trying to implement another solution based on another tutorial found online and with promising results.: https://w3bits.com/css-masonry/ Please share your own experience if you already have a card layout on your website. Post edited by karenwirkan - Tuesday, 2019-03-05, 2:35 PM
|
karenwirkan, they are ok. I feel like as long as you know what you're doing, you don't necessarily have to follow every single new design principle that comes out. Just keep proper semantics and code organization on your website and you'll be good.
Flexbox is really useful, grid layout is too but it's not as widely supported yet as flexbox. Even flexbox in itself is not much supported by older browsers, so having a good fallback strategy is always a good thing to take into consideration. I feel like websites that use flex/grid excessively are rather silly. It is more UX-friendly if your content flows in one direction instead of having to jump from one box to another. But as for everything, there are and will be use cases for it (i.e. for galleries or something, I know that because I've done that before). Both of these implementations unlock possibilities that had not been accessible before without "hardcoding" it or using extra JS. But at the end of the day, you still have to load that extra JS if you want to provide a fallback (which you should, btw). So there goes that. hey i'm joe and i do not work for the company anymore, please contact other staff or tech support
icon by ch-chau sometimes i lurk here |
@bigblog
The thing is, I like to "play" with the code, even if I'm not very good at it. I run a non-profit fan site, which means I won't provide a fallback anyway. I might point out, popular websites such as Behance or Pinterest are using grid layout for a long time and users are used to it by now. If two websites offer the same services/products but one has an outdated look & feel while the other one has a modern/trendy layout, which one will be chose by the majority of users (potential customers)? Not everyone needs a grid layout, indeed. At least I'm presenting ucoz users with a way to use these new layouts. |
| |||
| |||