Dear CoffeeCup Site Designer Developers,

I hope this suggestion finds you well. As a loyal and long standing user of CoffeeCup Site Designer, I've come to appreciate the efficiency and user-friendliness of your software. However, I'd like to address a feature that seems to be missing but could greatly enhance the performance and user experience of websites created with your platform.

Fonts play a crucial role in web design, but they often come with a downside: slow load times. One common issue is the flash of invisible text (FOIT) that occurs while custom fonts are loading, particularly noticeable in certain browsers. To mitigate this, the CSS property "font-display" can be employed within the "@font-face" declaration, with the value "swap" being particularly useful. This instructs the browser to temporarily display system fonts until the custom font loads, thus avoiding the FOIT issue.

Unfortunately, the lack of support for the "font-display" property within CoffeeCup Site Designer means users have to resort to manual editing of CSS files after exporting their projects. This not only adds an extra step to the workflow but also makes it less convenient to implement best practices for web performance.

I believe that integrating support for the "font-display" property directly into CoffeeCup Site Designer would be immensely beneficial for users. Having the option to set font loading behavior easily within the Typography tab or Font settings would streamline the process and ensure that websites created with your software are optimized for performance from the outset.

For reference, here's an example of how the "font-display: swap;" property is typically added to "@font-face" declarations:

/* Custom Fonts Definitions */

@font-face {
font-family: Le Havre Light;
src: url('../custom_fonts/Le Havre Light Light.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: Le Havre Regular;
src: url('../custom_fonts/Le Havre Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: Roboto Regular;
src: url('../custom_fonts/Roboto-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}

For further information on the "font-display" syntax and its benefits, please refer to the following link: https://developer.mozilla.org/en-US/doc … nt-display

Integrating this feature would not only align CoffeeCup Site Designer with modern web design best practices but also empower users to create faster and more responsive websites without additional hassle. I hope you'll consider implementing this enhancement in a future update. (See attached sample of including the Font Display option into CoffeeCup)

Update to most recent version of Bootstrap. Now it's at v5.1 and the Bootstrap site even says that v4 is considered end of life.

Could the container and image borders be set up so that one can change their size by clicking on the border and moving as one would an image in Microsoft Word or other programs? It would be so intuitive and familiar to do so. Or at least right-click on an image and get some options, like a choice between "replace (only this image)" and "replace (all instances of this image)" options, and clicking on the appropriate option brings up a file search window (and when you replace, it actually replaces)?

Most of what you are asking is possible but not the way you describe it, I am not at home at the moment so can't do a demo video, but I will later if nobody else chips in first

Yes, you can highlight the current page in a drop-down menu using CSS and JavaScript. Add a .current-page class in CSS for the highlight style. Then, use JavaScript to check the current page's URL and apply the class to the corresponding menu item. This will visually indicate the page you are on.

Agree with that.

Hello,
I allow myself a suggestion, because I find searching in the SD drop-down menus tedious.
if an alphabetical order could be added it would really facilitate the searches for class names, attributes etc...

http://img.cd91.eu/sitedesign/1sugestion.jpg

http://img.cd91.eu/sitedesign/2sugestion.jpg

Default breakpoints and Disabled breakpoints.



The ability to do this is pretty neat especially when first seeing up a project, but also even for established projects,
However it is difficult for a lot of users to spot the difference.
How about making the Disabled Breakpoints option even more noticeable by having it a different colour altogether or even not displaying any breakpoints. ?? Or would that confuse people even more.

And or how about an overlay type of thingy in the bit that the breakpoints are displayed with a warning text

BREAKPOINTS ARE DISABLED
or words to that effect

Or even simpler open site designer with ALL BREAKPOINTS ENABLED then the user has to actually choose to disable them if they want,

It used to be like that, with the effect that many users started styling their pages and could not understand that the styles didn't stick if they viewed it from another viewpoint.

But we have this overlay that sometimes pops up, saying that some breakpoints are hidden. Something like that could also be used to warn about disabled breakpoints.