View The Shortcodes
Every line of code in our shortcodes has been re-written to be faster. Our shortcodes have been redesigned to use CSS3 to create common design elements such as gradients. This has greatly reduced the amount of images used by our shortcodes. The shortcodes/images folder, which used to contain 90 images, now contains a single PNG sprite, taking the overall size down from 140kb to 15kb!
We have also taken advantage of new WordPress functions introduce in 3.3 that allow us to better target which pages are using shortcodes and which are not. This means that pages that have no shortcodes will no longer load the shortcode javascrtip, improving the loading time of your entire website. We have also improved our own codebase, making the shortcodes simpler and more efficient. Not only will our shortcodes load faster, but they will perform better on the page as well.
Recently we have been putting a lot of effort into creating responsive themes. Responsive themes are designs that adapt to devices with smaller screen sizes, such as iPhones and iPads. As the size of the browser window gets smaller, the theme will shrink and rearrange itself to insure that everything is readable. Until now, our shortcodes were not responsive, and as our responsive designs “adapted,” the shortcodes did not. Now our shortcodes will change along with our responsive themes, insuring a cohesive and intuitive experience for your visitors.
All of our shortcodes have also been re-coded to be fluid-width, meaning that they are not fixed at a any single width. They are all capable of growing and shrinking depending on what resolution they are being viewed at.
Along with making all shortcodes fluid width, we have applied some additional creative solutions to help insure that no shortcodes break when being viewed on mobile phones.
When responsive themes are viewed on a smartphone, the space available for the content of your page is reduced from 960px across to 320px across. When you take something like a “Tabs” shortcode, and try to squish it down to only a couple hundred pixels, it becomes almost impossible to fit.
If you take a Tabs shortcode that has 10 tabs, no matter how small you make the tabs or the text, they will simply never fit in the small horizontal space allotted. This is why everything looks squished. To fix this we decided to reduce all tabs into sliders as the screen is shrunk. No matter how many tabs you have, the shortcode will still work as the tabs themselves are no longer displayed.
Simplification is often the best solution. Another example is with our most commonly used shortcode: Columns. While columns are great on a page that has lots of space, as you shrink down your screen, trying to fit 4 readable columns on a page that only has around 300px to work with becomes impossible.
Even text becomes unintelligible, as it is broken down to only 1-2 words per line. With our new shortcodes, columns are simply removed when you view your content on a smartphone, and all of the content with the columns are extended to the full width of the page. When viewing a website on such a small device, utilizing the entire screen is extremely important.
In addition to being re-coded and made responsive, all of our shortcodes have also been re-designed with a new sleek, modern look. You will also notice that all shortcodes have a more cohesive style than before.
To update your shortcodes, simply download and install the latest version of your theme from the members area. I hope everyone enjoys these new features. Let us know what you think in the comments 🙂