A Creation for Creatives
[/ws-scrollimation] [ws-scrollimation infromleft=’true’ onscroll=’true’ repeat=’true’ style=’margin-top:15%;font-weight:600;’ duration=’1000′ delay=’500′][ws-column columns=’1/2′ first=’true’ align=’center’ background=’rgba(50,0,0,0.8)’ radius=’5px’ padding=’5%’]Make your background images stand out with multiple parallax effects on desktops.If you’re on a desktop you will see Fiona move differently from the band as you scroll. As if she is closer to you.
That’s as simple as putting the links to the images in the WithSmiles full width background shortcode….
and it does much, much more.
[/ws-column] [ws-column columns=’1/2′] [/ws-column] [ws-column columns=’1/2′ first=’true’ align=’center’ ] [ws-slider-trigger slideindex=’0′ trigger=’play’ class=’button’ style=’border-color:white;color:white;text-shadow:none;’]Find Out More[/ws-slider-trigger] [/ws-column] [/ws-scrollimation] [/ws-full-bg] [ws-full-bg bgcolor=’#fff’ patb=’10%’]Make slides from the same shortcode
The very same shortcode that made the full height section above with parallax effects can make slide shows. These slides have the same versatility as the sections.
You can make them full height, 50% the height of the device or have the height change from slide to slide.
You can clone sections for the slide show and change the content dependant on whether you are viewing a clone for a slide or the section that was cloned.
And just like the ‘Find Out More’ button above you can trigger sliders to navigate and play from outside the slider.
Sliders don’t have to be containers for advertisements, they can contain figures for courses that links in your content can navigate to. They can contain album information and, in some music/video dedicated themes based on the WithSmiles framework, the audio/video tracks can trigger the navigation.
I think versatility is the word.
Find out how responsible this design is in the slider below.
(The Scrollimations you see here are for another discussion. Yes. I said Scrollimations.)
[/ws-full-bg] [ws-full-bg slide=’true’ bgcolor=’#8D102E’ img=”/wp-content/uploads/2015/09/ISS.jpg” parallax=’true’ fullheight=’100′ slidetime=’5000′ padtb=”20%” align=’center’ color=’#fff’ style=’text-shadow: 0px 0px 3px #333′ slidetime=’8000′] [ws-scrollimation infrombottom=’true’ onscroll=’true’ repeat=’true’ duration=’500′ ]Not just mobile responsive but mobile responsible.
[/ws-scrollimation] [ws-scrollimation infromright=’true’ onscroll=’true’ repeat=’true’ duration=’500′ delay=’1000′ position=’absolute’ left=’20%’ top=’55%’]
The WithSmiles framework is designed to be extremely versatile, with the best of current UX designs built right into it. Full width content, full height content, animations, sliders and much more created with mobile responsibility and page speed in mind. Your Google rankings will vastly improve and you can be as creative with your design as your imagination will let you.
[/ws-inline-style] [ws-full-bg slide=’true’ img=’/wp-content/uploads/2015/10/Withsmiles-fore.png,/wp-content/uploads/2015/10/Withsmiles-mid.png,/wp-content/uploads/2015/10/Withsmiles-back.png’ bgcolor=’#fff’ fullheight=’100′ slidetime=’8000′ padtb=”20%” align=’center’ color=’#333′ style=’font-weight:600;’ parallax=’true’][ws-column columns=’1′ align=’center’ background=’rgba(255,255,255,0.8)’ radius=’10px’ padding=’5%’ ]Maybe you’ve heard of mobile responsive design. WithSmiles is responsive. Change your browser’s window size to see.
It will adapt to suit all sizes of windows and devices. Hence Mobile Responsive.
But what’s this Mobile Responsible lark?[/ws-column] [/ws-full-bg] [ws-full-bg slide=’true’ video=’/wp-content/uploads/2015/10/foliage_bokeh.mp4,/wp-content/uploads/2015/10/IrishMist1Loop.webmhd.webm,https://withsmiles.com/wp-content/uploads/2015/10/IrishMist1Loop.oggtheora.ogv’ poster=’/wp-content/uploads/2015/10/foliage_bokeh.jpg’ fullheight=’100′ slidetime=’12000′ align=’center’ padtb=”20%” color=’#fff’ style=’font-weight:600;’ overlay=’rgba(0,50,0,0.5)’][ws-column columns=’1′ align=’center’ radius=’10px’ padding=’5%’ extras=’min-height:33%’] [ws-scrollimation fadein=’true’]Take this video background for a start. On an iPhone most libraries that WordPress themes use will remove the video on the users device because iPhone’s force the native player. A big iOS play button is not good for a video background. But you still pay the ‘mobile tax’ when you check your Google page speed. WithSmiles doesn’t even add the video if the device is an iPhone. That’s RESS. REsponsive design with Server Side components.[/ws-scrollimation] [ws-scrollimation fadein=’true’ delay=’3000′]We won’t pay no mobile tax.[/ws-scrollimation] [/ws-column][/ws-full-bg] [ws-full-bg slide=’true’ sliderreverse=’false’ img=’/wp-content/uploads/2015/10/Foreground-dust-2.png,/wp-content/uploads/2015/10/Background-dust-2.png,/wp-content/uploads/2015/10/Schwirin-Spiral-Iris-Blur.jpg’ mimg=”/wp-content/uploads/2015/10/Schwirin-Spiral.jpg” parallax=’true’ bgcolor=’#8D102E’ fullheight=’100′ slidetime=’14000′ padtb=”20%” align=’center’ color=’#fff’ style=’font-weight:600;’ overlay=’rgba(100,0,0,0.5)’][ws-column columns=’1′ align=’center’ radius=’10px’ padding=’5%’ extras=’min-height:33%’] [ws-scrollimation fadein=’true’]WithSmiles loads most of it’s scripts in the footer of your pages to enhance the page speed. But what if your mobile users suddenly lose their connection. For most themes it means a lot of the content is hidden because the script hasn’t been loaded and made that fancy user experience. Try disabling your javascript and reload this page. These slides appear as full width sections. There won’t be any animation and the slide show won’t work but your content is still visible.[/ws-scrollimation] [ws-scrollimation fadein=’true’ delay=’3000′]That’s being mobile responsible.[/ws-scrollimation] [/ws-column][/ws-full-bg]
‘Where can I get the WithSmiles framework?’, you say.
You can’t just now. This framework was designed for this site and the many uses I may need in the future but I am planning on providing it and themes developed for it to other creatives out there.
Follow me on one of my social networks to keep up to date on when this framework will be available to you. The framework might even come free. That’s yet to be decided but it seems likely at this time.
Leave me a comment if you are a musician, videographer, photographer, etc and think you’d like to see certain features in this framework.