A Pretty First-Born Responsive Animated WordPress Theme

TemplateMonster is glad to announce the birth of its new child – Responsive Animated WordPress Theme. The name is too long as for me, though it clearly defines what it is.

What you see is the result of great work made by our development team. During the production we considered the best practices that resulted in an absolutely unique product. Here is live demo of this theme, keep it open in a new tab because you will need it while reading the blog post and since not all of the animated elements can be caught on a screenshot. In the meantime, you can browse through the template’s pages before we start looking closer at this jewel.

What we saw when we scaled the responsive page previously? We saw how it gradually adapting to the width of the window rearranging the content. Try out this theme, rescale the page and you will see how the content smoothly adapts to “the new resolution.” There are no separate layouts, as it was previously, and that’s why this theme is truly responsive without any points of reference.

***

When you scale the page what happened to images? They also changed their size, becoming appropriate for the lesser resolution and covering the whole width of the page.

***

Now look at the background, it has a full-size image slider that changes pictures with the help of Ajax.

***

Now try out the menu: cool, huh? The content attached to a specific item is also loaded with the help of Ajax, no more boring page reloads!

Look at the logo of the template, depending upon the screen size of the device the site is rendered with the logo being scaled with the help of CSS. Also you can replace the image of a logo with the text through the admin panel and add styles to the CSS file – simple as a pie!

On smaller screens the site menu disappears revealing the dropdown menu with all menu items. This is done to save space on smaller screens and improve overall usability. Following practice is really popular today (visit Smashing magazine website and you will see the same thing).

***

Now open the menu item BLOG, on the right side you can see the Categories and Calendar sidebars called < Aside > they are absent in mobile version, and guess why, to save some space on your screen.

***

Mobile users will cry of joy when they see the button “Back to top” that is screen-wide and is very easy to tap!

***

When you change the screen orientation, the moment of turning over is caught by the JavaScript called jQuery mobile.

Info for users of Android devices powered with earlier versions: parameter position fixed is not realized in versions under 2.2; higher versions did not have such problems.

Also mobile version includes buttons (right/left) at the bottom of the page, which allow to change the background image if it feels notorious to you.

***

As I already mentioned, during the development only the best practices were used, that’s why our gurus took two grids, dissected them, and picked only the best parts.

Responsive.gs – gave us the CSS3 media queries technology
Heroku Grid – shared its percentage scale algorithm.

Testing time! Our boys used Adobe Shadow and Screenfly resource to test all features of this great theme. Both of these showed great results and were extremely helpful during the development.

***

As you can see TemplateMonster’s innovations keep evolving, this theme once again proves the motto of the Monster to deliver only the best templates on the net! And even more amazing stuff is in development right not, so stay tuned for more great things to come!

Guys, we’d also appreciate your feedback in the comments section!

Comments are closed.