I fully support the first paragraph.


I find the easiest way is to use the Element Tree.

If the new element is to go immediately after a non-container element (referred to below as X), I use the keyboard up or down arrows to select X, and then in the Content panel click on the element to be added.

If the new element is to go immediately after a container element, I do the same as in the paragraph above, but then go back to the Element Tree and click on the newly-added element. It will probably be inside the container, and I simply do the following on the keyboard: ctrl+left_arrow then ctrl+down_arrow.

Until one has played around with the keyboard ctrl+arrow keys for moving up and down the Element Tree and for moving elements from parent level to child level, or from child level to parent level, the matter can indeed seem difficult.

It's particularly worth remembering that to make an element (X) a child of a container element, one positions X immediately above the container element, and presses ctrl+right_arrow. Pressing ctrl+left_arrow will be seen to reverse this.

Frank

'Fallback Image' support

One of the main factors determining how quickly a website loads is the file size of the images. Most people expect a website to load virtually instantly but with the trend leaning more towards image heavy sites, particularly full screen, this is becoming more difficult to achieve using the .jpg format without compromising quality.

Ideally all websites would now be using .webp formatted images which offer typically 25 -30% more compression than .jpg images without any loss of resolution, with even more significant savings when compared to .png.

It's simple enough to use .webp images (SD allows import of this format to the image folder) but the problem comes with browser support. Most recent updates of browsers already support the format but there are some notable exceptions, not least Safari which currently only offers partial support. IE has no support for .webp and despite being 'retired' a long time ago is still a very popular browser. See this link for details of browser support:

https://caniuse.com/#feat=webp

I would like to see an option within SD to enable a 'Fallback Image', similar to 'Fallback Font' already available for non-websafe fonts, whereby a second .jpg/.png image can be selected in a picture element for browsers that cannot display .webp.

I appreciate that this can be handled in the code but it is not practical to have to adjust this every time the website is published.

It sounds sensible, but since it is the first time I ever hear about the .webp format, I had a look in Photoshop for it, and it doesn't seem to be possible to save an image with it. What image programmes can you use for that?

I use Corel PaintShop Pro which fully supports the .webp format.

There are also free software packages available which can convert the images for you:

https://developers.google.com/speed/webp/docs/precompiled

I understand that Google has released a free plug-in that enables WebP support in Adobe Photoshop.

Link to plugin:

https://developers.google.com/speed/webp/docs/webpshop

I would like a very small addition to SD for Materialize.
I would like to make a PLAIN Div and not a container Div or any of the others shown.

eg. No assigned classes.

Thanks in Advance

A div is per definition a container. Give it an ID if you want to avoid a class name.

don't apply any styling if you don't want to have a class name.

I use photoshop then I use https://tinyjpg.com this is a site that optimises JPG and PHP image files for free, and is very simple to use (NO CONNECTION TO ME ) it can greatly reduce file sizes without losing visual quality(especially good for those large hefty background images.)

Like Inger never heard of webp format until now, and am unlikely to ever use it until it becomes mainstream so to speak.
but I wi;; watch for future development with interest.
Thanks, Jeremy for the original info.