Serving A Simple Design Paradigm

WHY DO COMPLEX WHEN IT CAN BE SO SIMPLE!

The Flamin' Fig logo, red

ADAPTIVE WEB DESIGN

Optimised for its viewing environment, not jumbled up to fit the viewing screen!

22 January 2021

The early version of responsive website design was called Adaptive Web Design (AWD). There’s very little talk of it now that a newer version called Responsive Web Design (RWD) has become mainstream. They both do the same thing by allowing you to view your website on any sized screen but they differ in the mechanics of how this is done.


With RWD everything is served up from the server to your device whether that’s mobile, tablet or desktop. Your browser, through using the created predefined CSS breakpoints set by the designer/developer, will rearrange your site to fit the screen dimensions it finds itself on, but with that it has served up every element and every bit of code your website consists of as well. This leads to one of the biggest problems on mobile: page load speed. Imagine an A3 sized image (needed for retina display desktops) loading on your mobile and then, the CSS reducing the dimensions (but not the file storage size) down to a manageable screen size so it works on your mobile website layout… are you getting the picture? It’s a bit like trying to fit a wardrobe full of clothes into a suitcase - something has to give! And what if there were, let’s say, 7 of those sized images… well you can imagine how slow this would take to load on your device. You as the user comes to the point of clicking the back button because, let’s face it, who has the time or the patience to wait… so you say ….next!


AWD virtually does the opposite for the end-user. Admittedly, a little bit more work needs to be completed before you launch your website but with the Sparkle app that’s just about a no-brainer! With AWD the server detects the device you are using and will only serve you up what has been optimised for your screen size. The result is a very fast page loading website and a much better experience for the end user.

With Adaptive Web Design (AWD) the server detects the device you are using and will only serve you up what has been optimised for your screen size. The end result is a very fast page loading website!…

Another advantage of AWD is that the content isn’t moved around to fit the screen so everything remains in chronological-marketing order to make the impact you’d intended in the first place!


A third advantage of AWD is that you can serve up an optimised site orientated to mobile users that are on the go. Desktop users, on the other hand, can pay more undivided attention to what they have in front of them. The same content but made adaptive by the web designer (not web developer or program) to the viewing environment it finds itself in.


So, as the name suggests, AWD is very much adaptive to the situation it finds itself in, based on the online presence or marketing campaign behind it. It doesn’t frustrate the end-user with the loading speed, mis-arranged or rearranged layout or font hierarchy. With RWD a lot of the mobile breakpoints are left up to the website builder platform to auto-compile which saves time to build out the website, sure, but results in compromising and frustrating the user’s experience! Did you know that the end-user gives 3-7 seconds of their time when they first view your website on their mobile device? If it doesn’t start loading or doesn’t load properly in that time, you’ve lost them, they’ve clicked that back button and moved on. You don’t want an automated platform process to screw up this important few seconds for you!


As mentioned several times throughout this website, the Sparkle app allows you superb control over the online presence / business that you intend to serve up to the end-user. With it connected to Google Analytics it provides data and feedback on how your end-user is interacting with your website, allowing you to make tweaks and further improve their experience, if necessary.

Flamin’ Fig’s theme kits are based on Sparkle’s adaptive web design approach allowing you control over anything you’d like to serve up. You’ll get a fast page load and clean W3C web standard html/CSS/javascript code making up your website once you hit the publish button. The other great bonus of AWD is the accuracy of the layout and elements. What you see on your local macOS machine’s preview is what you’ll see live in the browser across macOS and Windows10, iOS and Android plus a plethora of modern W3C browsers on desktop, tablet or mobile devices.




POST THOUGHTS

To have you better understand Adaptive Web Design: if you were to look at magazine print (over newspaper print) this will serve as a great analogy and explanation…


A Print Designer has been given a brief and the task to create a 1 page magazine article that will run in a magazine, but also a billboard and a no-fold brochure. Firstly these three different print mediums will be interacted with in very different ways! So it is very much up to the Print Designer to understand the environment these three different print mediums will find themselves in and how they will be interacted with by the end-user. The Print Designer is tasked with making the best connection to the end-user based on their given brief and the three different sized mediums needing to be used (simulating large desktop, tablet, and mobile screen sizes).


Because the bigger of the three mediums will have the end-user see it from a distance, the images and text will be far larger filling out the huge area that the Print Designer has to work with. Being on a billboard, the key points need to stand out to grab the attention and make that vital emotional connection. The magazine is more personal and laid back, being in the end-user’s hands and so the text and images are of a more appropriate size and configuration for reading. It will be the layout and the elements used that will either grab the end-user’s attention or have them flick over to the next page. The brochure becomes tricky as it’s a much smaller area that has to command attention; it has to stand out and emotionally grab the onlooker for it to be picked up and read. Again the layout and arrangement of the elements will be very important so as to garner their attention, pick it up, and then to have them turn it over to read the rest of the content.


If we take what is happening in the automative web design world and apply it to the print world then this Print Designer would have only had to create this print design for the billboard, then clicked a button and have the rest of the work done by the software’s interpretation! Without question the Print Designer has saved a lot of time only designing for one medium but the magazine page and the no-fold brochure are a failure because they aren’t meant to be miniature billboards and this isn’t the expected experience the end-user was looking for!


Lastly, the beauty of AWD is that it’s made for web/graphic designers to have total control over the layout that’s presented to the end user’s device, and doesn’t rely on a guesstimation by the code or browser.

l

Back to Blog Posts

PHONE

EMAIL

WEBSITE

ADDRESS

hello[at]flaminfig.com

flaminfig.com

PO Box 8062, Trevallyn TAS

Tasmania on the world map

FOLLOW US

We are here to help! So you are in a pickle, going around in circles and time is running out to hit that publish button. With our 3 solid years of using Sparkle to create sleek modern websites and templates, we can most certainly help you past those hurdles.  We also have experience in integrating ecommerce platforms like Ecwid, Shopify, Gumroad, etc… Here are a few examples of our work… - https://watertonhall.com.au - https://tngt.com.au   DM us for more information, or hop on over to our website (https://flaminfig.com) where you can make a booking with us.   #flaminfig #byflaminfig #webdesign #webtemplates #sparkletemplates #nocodedesign #responsivetemplates #creativepreneur #creativestudio #creativedesign #sparklesites #nocode #nocodetemplates #nocodewebsites #entrepreneurs #ecoconsciousbrands #greenstudio #designempowerment #greenhosting #ethicaldesign #ethicalbrands #ethicalbusiness #templates #diywebsites #websitetemplates #freelancelife #websitebuilder #draganddrop #solopreneurs #launcestontasmania  * [Image from Pinterest, art by Flamin’ Fig]
Howdy from Flamin' Fig!  Our new Vision Co. landing page template is a Sparkle theme that is ideal for businesses, web studios, online marketers, online portfolio, and much more…  An unique eye-catchy luring design with a vibrant inviting colour palette that grabs attention, with bold text, and a sleek curvy modern uncluttered design… allowing your clients to easily find your call to action… Make a booking! Vision Co. is a fast loading site that will keep the likes of Google very happy! Check out the demo here - https://flaminfig.com/demo/l-p/studio-landing-page/  Vision Co. was built on the Sparkle App platform so everything is editable without you needing to touch any code!  If you need any assistance with your template, our team at Flamin' Fig is here to help - after all It is our jam! * ======================================== We are here to support the soul-conscious world 100%, and better serve the soulpreneurs and ethically-conscious businesses that are moving society into a better way of living and in harmony with our planet. ========================================  #flaminfig #byflaminfig #webdesign #webtemplates #sparkletemplates #nocodedesign #responsivetemplates #creativepreneur #creativestudio #creativedesign #sparklesites #nocode #nocodetemplates #nocodewebsites #entrepreneurs #sparkleapp #greenstudio #designempowerment #greenhosting #ethicaldesign #ethicalbrands #ethicalbusiness #templates #diywebsites #websitetemplates #freelancelife #websitebuilder #draganddrop #solopreneurs #launcestontasmania  * [Image from Flamin' Fig, art by Flamin' Fig]
IT IS JUST ABOUT ON OUR DOORSTEP! 22 MAY 2023!  It has been announced that the next massive iteration of Sparkle is coming - SPARKLE 5. Judging back what came to us when Sparkle 4 was released I would say we are in for a massive surprise and happiness all round! :)  Flamin’ Fig will take full advantage of the new Sparkle 5 and will be releasing new templates to highlight the advances made and the new features and functionality added to Sparkle 5. Stay tuned!  #flaminfig #byflaminfig #webdesign #webtemplates #sparkletemplates #nocodedesign #responsivetemplates #creativepreneur #creativestudio #creativedesign #sparklesites #nocode #nocodetemplates #nocodewebsites #entrepreneurs #ecoconsciousbrands #greenstudio #greenhosting #canva #ethicaldesign #ethicalbrands #ethicalbusiness #templates #diywebsites #websitetemplates #freelancelife #websitebuilder #solopreneurs #launcestontasmania #draganddrop   [Image by Chris Yates?, design by Flamin’ Fig]
Hi Everyone! :)  At Flamin’ Fig we are always testing, innovating, and checking data for insight into the patterns of the everyday website User across, not only Australia, but also around the world. In doing this it gives us a better and more future proof way of presenting our website themed templates that are created for the innovative Sparkle App.  Our learning and understanding has gotten us to take a different approach in how we present our Flamin’ Fig website themed templates when it comes to “devices”, the heart of website responsiveness in the Sparkle App.  Check out our Blog Post to learn more - https://flaminfig.com/just-two-editable-devices.html  #flaminfig #byflaminfig #webdesign #webtemplates #sparkletemplates #nocodedesign #responsivetemplates #creativepreneur #creativestudio #creativedesign #sparklesites #nocode #nocodetemplates #nocodewebsites #entrepreneurs #ecoconsciousbrands #greenstudio #designempowerment #greenhosting #ethical #ethicaldesign #ethicalbrands #ethicalbusiness #templates #diywebsites #websitetemplates #freelancelife #websitebuilder #solopreneurs #launcestontasmania  [Image design by Flamin’ Fig]
Hi Everyone! :) * I have had the time to really get behind Flamin’ Fig and so this February is a busy month - a busy month for a number of template launches… 9 so far to be exact. You can get a sneak peek over at our website Flamin’ Fig - https://www.flaminfig.com. * I’m calling it the “Flamin’ Fig February”! The first template has gone out yesterday! * As mentioned these template launches will be throughout this month, February. * I have also introduced a new family member… Mini-Blocks, that I’m sure you are going to love! They easily slip into your existing Sparkle projects. * Also still working on the revamping of Flamin’ Fig to Flamin’ Fig 2.0 with a whole lot of innovation and a new one-of-a-kind Sparkle blog - dreamy! * As most of you know (and this is one way of many ways in using Sparkle) I have moved all my designs and templates over to the 960 (editable) and 320 (editable) devices, and auto-scaling the 768 and 1200 devices. For me this is an efficient work flow, but it is also based on User-research gathered over the last 7 years. * Over the next few days (I was going to wait for the launch of Flamin’ Fig 2.0 but alas…) I will be publishing a detailed blog post on it which I think will be a good read just to further clarify my reasoning for using the 320 and 960 devices and auto-scaling the rest. * Thank you for all your support, and I hope you like our next round of Flamin' Fig templates. * ** *** #flaminfig #byflaminfig #webdesign #webtemplates #sparkletemplates #nocodedesign #responsivetemplates #creativepreneur #creativedesign #sparklesites #nocode #nocodetemplates #nocodewebsites #entrepreneurs #ecoconsciousbrands #nocodeapps #designtools #greenhosting #ethical #ethicaldesign #ethicalbrands #sparkleapp #ethicalwebdesign #diywebsites #websitetemplates #freelancelife #websitebuilder #sustainable #tasmaniadesign #launcestontasmania *** ** * [Image created by Flamin’ Fig]

At Flamin’ Fig, we not only love the online simplicity that we offer in our theme kit templates, we also love our planet and feel humbled that we can offer you both in this new age of awareness!

© Copyright , All rights reserved   |   Created by Flamin’ Fig   |   Product of GREENSKIN.MEDIA