DyNNamic App Development by DyNNamite

Dynamic App Development by DyNNamite

DyNNamic App Development by DyNNamite

The result of dynamic App Development within the DNN CMS empowers the website administrator to control more complex layout elements without the need for understanding the code or indeed CSS. The suite of controls available makes the administration of your DNN CMS even more seamless, significantly easier and more robust.

DyNNamic App Development by DyNNamite

DyNNamic App Development by DyNNamite

If you have used DNN for any length of time then you will already be familiar with this editor.

It is known as the CK Editor which has been installed as a default editor in DNN for quite some time.

The editor while providing a great UX does have some limitations for the none technical website administrator:

  • Adding custom classes can be problematic as they can be stripped out if you switch views.
  • If you add images, they automatically have inline size styles added which need to be removed otherwise you could potentially end up with squashed images on mobile devices.
  • Images are automatically wrapped in paragraphs.
  • The code for images get unnecessary parameters added to them during upload.
  • Administrators have access to every inline style imaginable which can take a website off brand very quickly (afterall everyone thinks they are a designer!)........

So what does dynamic App development provide that the existing CK editor does not for the website administrator?

A better experience for DNN website administrators – Welcome to 2SCX!

A better experience for DNN website administrators – Welcome to 2SCX!

This is the most basic example of a 2SXC structured content App. As you can see from the image, the editor only displays what is needed for the user to do their job. This application has an image on the left but the text will not float (as it's goverened by the App version).

You do not need to add an image ALT tag either as it is taken from the title (so be careful with your naming!). The Module is also named from the title element so you will never have Text/HTML modules that have been left without a name on your DNN website in the future!

Images are automatically resized using the built in image resizer. This means that even if a website administrator uploads a 5meg image, the image will be resized down for the web site making the page load speed faster and improve the SEO of your DNN page.

For more more information on the image resizer please visit here.

Structured content, built your way

Structured content, built your way

In this example you can see that the text wraps around the image, there is no need for the website administrator to float the image to the left or even resize it!

This function works because classes have been injected into each element on the application, so the website administrator does not have to worry about floats, image resizing or even alt tags as mentioned above!

The code below shows what is going on under the hood in this App. The previous way would require the website administrator to add an alt tag and float it. Floats (left / right) are not good prectice because you cannot control how an image will behave on different devices.

code2

As a note, the original size of this image was 650x650; the image resizer has done its job and displays the image size we have specifed in the App. This ensures that not only does an image load very quickly, but it ensures that your website remains consistent in style, design and identity as well as adds to the overall speed performance and improved SEO.

Advanced mode is still available in the editor

Advanced mode is still available in the editor

If you are feeling brave, the website administrator can still access the advanced mode in the editor. The function is there, however with the ease of use of the dynamic App, why would you want to?

2SXC encourages seperation from the code and the website administrator (the author). If the website needs a basic image floated on the right but the website administrator lacks the basic skills to resize an image then don't sweat it!

The image resizer will handle it and your webpage will remain consistent!

Just choose the app you need, write your copy, add your image, the title and you are done. Your webpage will remain on brand and you will not have to worry about floating images, alt text or having your webpage go off brand. No more squashed images, whatever the device you are viewing the site on.

Notice how the text wraps neatly around the image and you do not have to float it. By the way, you can add your own image into the editor, and float them, but we do not advise it. The whole point of building these mini apps is to take away the extra work required to add simple content on DNN webpages.

App Development Suite for DNN

Below is a Suite of Dynamic Apps the DyNNamite team have developed for DNN which can be integrated in any DNN website using Bootstrap:

App

This is a a Title

This is a a Title

Click the pencil-icon to edit content. This is just a demo-text with Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet gravida magna. Proin in porttitor ante. Vestibulum varius pretium libero nec maximus. Nulla ac nulla purus.

Phasellus condimentum vehicula felis, quis porttitor enim aliquet in. Praesent consequat neque eget nisl dictum malesuada. Nam id efficitur arcu. Donec id mauris viverra nibh volutpat dapibus. Vivamus molestie sem urna, commodo laoreet nisl fermentum rutrum. 

Click the pencil-icon to edit content. This is just a demo-text with Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet gravida magna. Proin in porttitor ante. Vestibulum varius pretium libero nec maximus. Nulla ac nulla purus.

Phasellus condimentum vehicula felis, quis porttitor enim aliquet in. Praesent consequat neque eget nisl dictum malesuada. Nam id efficitur arcu. Donec id mauris viverra nibh volutpat dapibus. Vivamus molestie sem urna, commodo laoreet nisl fermentum rutrum. 

App

Title

Title

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

demo heading test

demo heading test

test

Lightbox Gallery

Learn about the Lightbox Gallery App.

Learn more

Splide Carousel

Learn about the Splide Carousel App.

Learn more

Accordion

Learn about the Accordion App.

Learn more

Responsive Table

Learn about the Responsive Table App.

Learn more

Off Canvas Button

Learn about the Off-Canvas Button App.

Learn more

If you would like to discuss these questions further or have another DNN related issue please get in touch

Default Group
  • Talk to an expert - Contact DyNNamite® now

  • *

Discuss your DNN requirements

If you have any questions about DyNNamite and our range of services, pick up the phone and give us a call on +44 (0)1494 430265

 

Contact DyNNamite