App


Blog 6.0 with Responsive Content

Blog 6.0 with Responsive Content

The new Blog 6.0 uses the latest features of 2sxc 16, including

  1. responsive WYSIWYG content
  2. zen edit experience
  3. optimized toolbars
  4. Razor code using the new TypedEntities

Responsive WYSIWYG Content

Bloggers love to add images to their posts, but this creates a big challenge for perfect websites.

Multiple Resolutions

Images should be served in multiple resolutions depending on the size they are shown in. So every image should automatically be converted to a picture-tag with all the possible resolutions.


Multiple Formats

Some browsers understand modern image formats such as WEBP, while others don't. Perfection is to provide all possible formats and letting the browser pick what's best. 


Screen-Optimized Layout

Images should auto-rearrange themselves to be beside the text on desktop, and above the text on mobile.


Sections

A blogger needs to create sections with texts beside images, and the next section should be below the previous - otherwise the images have strange staggering effects. The section above this one has space beside the image, but this text should not be beside it, because it's a separate section. 

Section splitters can also have additional height (which again varies by screen size) for perfect layouts.


Image Lists

A common need is also to show multiple images - which again should re-arrange themselves as the screen changes. We've added optimized CSS to make sure that 3 left-aligned images 33% will correctly pad themselves:


Zen Edit Experience

Zen-edit-experience

Blogs tend to have a lot of fields, such as tags, publishing dates, author and much more. But as you're texting, you will usually just want the main post, and nothing else. 

We've made this possible thanks to the new feature in 2sxc 16, where a button can open the Edit UI for just one field. So this is what editing the current post looks like ➡️.


Optimized Toolbars

Every dialog / list now has toolbars optimized to each specific use case. The most special is certainly the new field-edit toolbar used for the new Zen-mode. ➡️


Try it Yourself

All this is possible thanks to new features in 2sxc 16. Just for demonstration, we've added some images to lighten things up. Resize your screen to see how the images in this post re-arrange themelves as expected. 

Have fun!

With 💖 from Switzerland,
iJungleboy