Techniques used in our plugins and themes

 

Google PageSpeed Insights (PSI)

To get high in Google Search it is important (amongst other things) to get a high score in Google PageSpeed Insights (PSI). To achieve this can be quite complicated and unfortunately most themes and frontend builders don’t take that very seriously.

But we do. We have implemented numerous techniques, in both the Swifty Site Designer theme and the Swifty Content Creator editor plugin, that work together to get as high a PSI score as possible. And thus get high in Google Search.

 

Techniques in both Swifty Content Creator and Swifty Site Designer

 

Lazy loading CSS and Javascript files

To get a higher score in PSI we lazy load all required CSS and Javascript files.

 

Lazy loading fonts

To get a higher score in PSI we lazy load all used font files (and no unused fonts). Even Google’s own Web Font Loader technique causes penalties in PSI, strangely enough. Swifty developed a new technique for loading and applying fonts that has no negative effect on the PSI score. The disadvantage of our technique is that it causes a slight Flash Of Unstyled Text (FOUT) effect, where uses might see a short ‘flash’ when fonts are applied. We believe it is much more important to get high in Google Search (thus a good PSI score) than to prevent the FOUT effect.

 

Lazy loading background images

To get a higher score in PSI we lazy load all background images for area’s and columns.

 

Minimal number of files

To get the page to load as fast as possible we force WordPress to only load Javascript and css files that are really needed on a page. When a page does not use a specific functionality, we do not load the Javascript fot it.

And we do not automatically load jQuery on each page. Only when absolutely needed.

 

Techniques in Swifty Site Designer

 

Inline CSS

To get a good score in PSI all css for the first fold needs to be embedded in the html. To achieve that we decided to inline all css in the html, because we are not (yet) able to determine the exact css for the first fold only. This acheives a good PSI score, but causes the html pages to be bigger and thus load a bit slower. We believe the PSI score is much more important than the load speed.

This option can be disabled in the Swifty Site Designer settings. When disabled, all css will be loaded externaly instead of being inlined.

 

Editable areas with variants

A Swifty Site Designer theme has many area’s that can be turned on and off, like top bar, header, navigation bar, 2 sidebars, footer and bottom bar. All of these area’s can be styled separately and they can even be re-ordered.

Each area has a custom post type assigned to it, so you can edit the content of the area at will. Not only can each area have widgets, but it can contain any content, like headlines, tekst, images video’s and navigation. This area content will be shown consitently on any page that has the area turned on. When you change it in one place, it changes on all pages.

When combined with Swifty Page Manager you can turn on and off each area per page.

When combined with Swifty Content Creator you can also turn on and off each area per page. And more importantly, you can create variants for each area. For instance an second header that you can use on a special section of the website. Or a third sidebar that you shown only on pages for logged in users. Area variant are achieved by creating new custom post types.

 

Fully responsive

Of course Swifty Site Designer is fully responsive. Not only does that give a great user experience on all devices, it is also extermely important for the PSI score. PSI even measures the score of small screen separately.

All our responsive techniques are completely automatic. Whenever the screen is small than 640 vitual pixels (hence smaller that most landscape tablets) we reposition and resize area’s and elements (like logo, title, slogan and menu) to fit the screen as optimally as possible. For instance the sidebar moves below the content.

 

Auto generated menu

Normally in WordPress you have to create a separate menu and add pages to it whenever needed. In Swifty Site Designer you can choose wheter to use such a WordPress menu or wheter to use an auto generated menu. When using the auto menu, you do not have to create a separate menu and new pages are automatically added. The structure of the menu is based on the page structure (not on url structure).

When combined with Swifty Page Manager you can optioninally hide pages for the auto menu and you can easily rearrange the page (and thus menu) structure.

 

Fully responsive menu

The auto generated menu is a dropdown menu that also works great on small screens. It then shows a hamburger menu and when tapped it will open the menu full with and also all sub (and sub-sub) menu’s can be opened.

In order for sub-menu’s to be easily used on touch screens we created the menu’s so the first click opens the menu (instead of open on hover) and executes on the second click (only for menu items that have sub-menu’s of course). This gives the best consitent user experience on all devices. This click behaviour can optionally be turned off, so menu’s will open on hover instead of on click.

What we often see happing with menu items that have sub-menu’s is that most visitors will never click the main menu item, only it’s child items. But webmasters do not always realise that and the will put the most important content on the page fot the main item. And thus not many visitors will ever reach that page. By using open on click (instead of open on hover) by default, the webmaster will realise sooner that visitors might not click the main menu item. But now thay might forget to put any decent content on the page for the main item. When combined with Swifty Page Manager you can choose per menu item whether to repeat the menu item itself as the first child it’s dropdown menu. That way you can have the best of both worlds. You can have important content on the page for the main item, and that page will be shown both when the visitor clicks the main item or when he clicks the rist child.

 

Combining layouts, styles, colors and fonts

A Swifty Site Designer theme is generated on the fly by combining layouts, styles, colors and fonts. Resulting in css and html for that specific combination.

 

Optimal order of elements in the html

….

 

Based on Less CSS framework

Most of the magic in Swifty Site Designer happens by combining diverse partial less templates and variables into one big less fille that is then on the fly compiled into css. On top of that both custom less an css code can be added (in the Advance UI panel). Every less variables can there be used and overwritten to influence the final css.

 

Based on Underscores theme framework

Swifty Site Designer is fully based on the excellent Underscores framework that is also used in the latest default WordPress themes, like Twenty Sixteen.

 

Techniques in Swifty Content Creator

 

Full true WYSIWYG

WYSIWYG (What You See Is What You Get) is used by many and can nowadays mean anything. That’s why we say full true WYSIWYG.

When you edit a page you will see the page exactly as your visitors will see it later on. You will see the full theme/template , including all area’s like topbar, sidebar, header, menu, etc. And all content will show exactly as the visitor will see it. No elements will resize or reposition when editting is done. At all. Each letter of all text, each image, video, etc, will remain exactly the same.

So you never have to preview whatever you are creating. You are already previewing while editing!

To achieve this WYSIWYG we render the full page as the visitor will see it and make only the content fully editable. And we do that is such a way that no elements shift positions because of margins, borders or UI (User Interface) elements.

Only when you moude hovers over an element we temporarily show some borders and UI elements, but we do so in such a way that nothing changes position or size! Just move your mouse pointer away from the content and you will not see any borders or UI.

We also show the User Interface panels below the page instead of besides it. This may take a little getting used to, but greatly helps in seeing the whole page as the user will see it, because it is less intrusive / in your face.

 

No distraction free mode (on purpose!)

 

Any shortcode

 

Grid options and floating content options

 

Responsive

 

Images on Swifty certified hosting accounts (like AlphaMega Hosting)

 

Images on other hosting acounts

 

Breakout bars

..

 

Scroll effects

 

WPautop

 

WP-embed

 

Based on CKEditor