Responsive Highly Dynamic UX and SharePoint
I had to do some really fun client side development with a spattering of server-side code. The challenge was they wanted to make the site fit on any device, have it respect WCAG, be multi-lingual, support Twitter Bootstrap and prevent as many screen refreshes as possible. All this while proving a media rich and very socially driven site.
Below is a sample landing page showing several of the web parts like: a Featured Article, a list of article thumbnails in 16.x, a survey that has been augmented to show inline on the page with embedded video, comments and most liked article lists. Notice that the layout is using Twitter's Bootstrap and the interface is in French (mostly - it is a dev. site ).
Since all the web parts worked together and were simple to configure, the client was able to apply it throughout the site to present various SharePoint elements like photos, blogs, custom list items... In this case the photos were to be presented in 16x9 rather than square thumbnails (a fun challenge!) with dynamic category, date, comment and like filters.
Below is the same but for blog posts.
We also incorporated the PNP Responsive from Microsoft and all the web parts were responsive from a 4K monitor right down to the smallest smartphone. They will collapse columns and layouts as required and change the screen presentation for the navigation, headers and footers.
All of this was really cool on its own. Every single part of the interface below the blue navigation bar is dynamically generated and dynamically translated. When the page loads, it detects if there are any screen elements coded to be translated or if there are any of our web parts that need to be fleshed out.
It first checks if it needs to load translations using REST asynchronously to get the Pointfire Multilingual Translations (not required that you have PointFire, but I did in this case) then it cycles and corrects any static screen elements like the footer and the image logo and then loads any other objects it requires to present within the Web Parts - Photos, Articles, Custom list items, Surveys... and after that is cached it presents it.
As users "Like" objects the screen will dynamically change to present the new changes.
A fun project that just shows that SharePoint isn't a simple OOTB product and it can create very responsive dynamic interfaces in many ways.
This solution was an on-prem solution but it could have just as easily have been created for Office 365 replacing the web parts with content editor web parts that just present a DIV tag and load our script.