Archive for June, 2012

27Jun

Responsive layout enjoys great popularity among web designers today, as the part of mobile traffic in general internet output constantly increases. A lot of online merchants make money on advertizing. It’s rather distressing, but the ads may simply disappear or become unreadable when a website contracts to 320px, for instance.

Here are some major impediments responsive advertising has come across:

  • great amount of sites lean on advertising;
  • ad blocks are fixed and have standard sizes; (most of them do not fit multiple layout options)
  • ad units are sold and created according to their size and position on the page;
  • ad types are various including takeovers, video, pop-overs, flyouts and interactions (most of them are not supported by mobile platforms).

Processing from the necessity of ad blocks compatibility with responsive layout, there are several ways out of the awkward situation. The easiest way is to adapt the ad with the help of HTML and Javascript (works best for static ads, below you will get to know how to realize it) or to use the responsive ads framework, which is one of the most efficient solutions for the moment.

* * *

Responsive web design still stays a new technology; we believe that special responsive advertising know-how will emerge before long. So far, web site owners can use one of the stated above solutions, placing one ad per page, which can be easily modified to fit almost all screen sizes and resolutions.

Nevertheless, online newspapers and magazines need much more ads of bigger sizes to stay afloat. The most called-for format is 300x250px.

Beginning with the smallest size (usually 320px wide) and going up to 1382px wide definitely makes sense – especially when it comes to advertising. If you are able seamlessly integrate advertising into your design at 320px wide, the same operation at bigger resolution shouldn’t be too difficult—it’s a matter of shifting elements and thorough ads positioning. Planning beforehand always saves efforts.

Possible solutions:

  • Traffic redistribution
  • Responsive HTML ad using Javascript interface
  • Flexible Responsive Ad Framework

Actually, large ad formats such as 300x1050px or 970x250px do not fit the iPhone screen, but it is possible to hide them and reveal only for the users surfing from a stationary computer. Even the usage of display:none function doesn’t save the situation, the ad code will be loaded, resulting in new problems.

It would be much more efficient to use Javascript for screen width estimation and impediment a particular div section from loading, JS can be turned off by the user, though most of the ads are displayed with its help.

Traffic redistribution

The best possible solution might be better planning! When you launch an advertising campaign on your responsive website take into account the scope of traffic and do the following.

Due to the extensive traffic flow, you may dispense your registry and retail advertising packages for mobile devices, tablets and PCs separately. It will be a great alternative, convenient both for you and your customers.

Responsive HTML ad using Javascript interface

The option is helpful only for static ads, it can’t fix the issue with rich media and ad server implementation but the positive moment is that it is rather easy to carry out. The ad is being built with HTML, actually it turns into static image. Instead of incorporating the responsive logic into media queries you can add a JavaScript interface, the configuration part of which is like this:

// Ad config
var ads = {
  leaderboard: {
    width: 728,
    height: 90,
    breakpoint: false,
    url: '728x90.png'
  },
  rectangle: {
    width: 300,
    height: 250,
    breakpoint: 728,
    url: '300x250.png'
  },
  mobile: {
    width: 300,
    height: 50,
    breakpoint: 500 ,
    url: '300x50.png'
  }       
};

banner

The trick lets you define some parameters to your responsive campaign and then JavaScript will do the rest. The method applies window.matchMedia, currently available in Chrome, Firefox, and Safari browsers.

Flexible Responsive Ad Framework

Similar to the way designers approach RWD with different frameworks for development and laying out varied designs for diverse views, you can use a framework to manage ads direction and network party ad tags across the website.

responsive ad

* * *

The Boston Globe website is a bright example of responsive ads implementation, where they incorporated an MMU ad unit. They have fixed the width of the column and made the ad block occupy that space as the viewport is reduced to a single column. The method is rather sophisticated, yet very productive.

The Boston Globe

* * *

As you see, the ideal solution hasn’t been worked out yet. All of us need it badly and the sooner the better, as there is a threat that responsive layouts might lose a lot of adherents due to their inability to preserve the ad contents under any circumstances and screen sizes. We are sure that this complex urgent task will only whip up web developers’ creativity and we will get a powerful lightweight tool for swift and simple ad accommodation in the nearest future.

25Jun

We hope you are in good health and high spirits! Right now, we are going to raise it even higher with our next freebie – Free Website Template with jQuery Slider for Powerful Business Startup possessing creative appearance and very high performance. We hope you can’t wait to test it yourself.

As you might have already noticed, the layout of the template is executed in pleasing colors, comfortable for the eyes. The template is full of amazing visual elements. The author uses handwritten fonts along with strong functional features necessary for boosting your online business project. With the help of this free solution you will get an efficient instrument to convey your business ideas to the customers in the engaging manner. Of course jQuery slider is present and revives the header. You can view free template’s live demo following this link.

Free Website Template with jQuery Slider for Powerful Business Startup:

free template

You are welcome to get this free website template with PSD source files. Please visit Free Website Template with jQuery Slider for Powerful Business Startup download page at TemplateMonster and type an email address that you want the free template package to be delivered to (don’t forget to uncheck the newsletter subscription checkbox in case you’re already subscribed, otherwise you may not be able to download the zip file). Please, feel free to use this template for your business, but you are not entitled to resell it to third parties as a template.

Download Free Website Template with jQuery Slider for Powerful Business Startup with PSD files here

NB: Kindly note that TemplateMonster’s support services don’t cover neither this template no any other free template. We provide support services exclusively for the products, which are being purchased from our website. All of our free templates correspond to the latest web standards, we applied our best efforts to make the process of customization as easy and stress free, as possible; if you have at least initial web development experience, there shouldn’t be any trouble during modification process. In case you lack the required experience, we suggest you to apply theme tutorials or community forums to know more about the software on the bases of which the template was developed, or to turn to the professional to make all necessary updates.

22Jun

The current year was marked by several considerable sweeps in web design and technology. Notwithstanding the increased availability of various web development resources and libraries, designers still have the space for perfection.

Creative web masters’ minds continue working out new trends and technologies of website development; some of them enjoy general recognition. Today we can observe appearance of the enormous quantity of various handheld appliances such as iPhones and iPads. Some of those portable devices even surpass PCs in performance and capacity. With the invasion of those small occupants, it has become absolutely essential to keep two versions of the same website “a full-size and a tight one” for narrow screens of mobile appliances. As it is not always convenient to run several website options simultaneously, we can assert that portable device popularity resulted in total use of responsive websites.

Most of the recent web design trends are based on specific tablet control. As iPad owners browse the web with the help of their finger tips, website designs were modified to make their surfing convenient considering the constraints of small screens.

Later, web developers arrived at the conclusion that optimizations tailored for “portable web surfing” are not bad for regular websites either. Their implementation makes websites lighter, cuts down the loading time and creates excellent user interaction, especially combined with HTML5 and Javascript (both of them are supported by mobile platforms, except Flash that causes indigestion in iOS powered devices), which results in more satisfied customers.

With the advancement of HTML5 there is no need to utilize heavy Flash plugins, however, they stay rather popular among web designers no matter their negative feature to crash from time to time.

Now let’s study some of the most evident trends in WordPress themes design of 2012.

  • Responsive WordPress Themes
  • Grids in WordPress
  • HTML5 & JS
  • 3D Effects
  • Social Media Integration (Widgets)
  • Typography Explosion
  • Image Gallery Slideshows
  • Multilingual Themes
  • Black and White
  • Minimalistic WP
  • Large Background Photos, Big Headers…Huge Footers

* * *

Responsive or Touch Screen Friendly WordPress Themes

The progress never stops. You can observe the incredible quantity of portable devices of all sizes and screen resolutions filling the market, so web content presentation of websites’ mobile versions can’t satisfy the demands of users any more. Fluid grid based websites are perfectly displayed on any screen, but mobile versions usually neglect the essential part of valuable content. Here the responsive design becomes very useful.

Below are the main screen resolution options supported by responsive websites:

  • desktop layout (980px);
  • tablet layout (768px);
  • smartphone layout – landscape (480px);
  • smartphone layout – portrait (320px).

Besides, persuant to Google report, responsive websites are better digested by Google’ crawlers, because there is no need to crawl through multiple pages optimized for various devices. So, it is better to run responsive websites instead of keeping two versions, a full-size and a tight one. This will considerably improve your SEO.

You are welcome to view some beautiful examples of Responsive WordPress templates from TemplateMonster:

CMS & Blog Business WordPress Theme

wordpress template

* * *

19Jun

We are happy to advise that WordPress 3.4 version has finally seen the world. The issue was named “Green” after the famous jazz enthusiast Grant Green. The upgraded CMS can boast multiple new features particularly in the aspect of customization. Custom headers, Twitter embeds and image caption are only few introduced enhancements.

New specifications facilitate more comprehensive customization and are intended either for users or administrators. Here are some of the most impressive characteristics of WordPress 3.4:

Total theme control:

Theme Customizer lets you modify template’s options before activating a new theme;

With Theme Previewer you get the possibility to customize current theme without changing the front-end design.

Media improvements:

HTML support in image captions.

Under the Hood improvements:

WordPress internationalization and localization perfection (more info);

Different split in POT files translation for process acceleration;

Codex XML-RPC information update accessed via XML-RPC_WordPress_API;

WP_Query improvements.

You are welcome to get more detailed information at WP codex.

We invite you to study the customization options more meticulously:

New Options for Users

The most essential sweep in WordPress 3.4 is the theme customizer letting you edit current appearance and settings without publishing them. Besides you can vary theme colors, backgrounds and paste custom image headers.

If you drop a glance at the control panel, you will notice plenty of new options intended to simplify your job.

If you have more than one theme, new features let you browse through them without paging. If you want to utilize the images from your media library to fill custom headers, just select the height and width of your header images.

Live Theme Preview

WordPress 3.4 gives you the possibility to customize the theme without activating it! (Nevertheless it should be installed on your blog.) Moreover, you can modify the current theme with the help of live preview mode.

Twitter Embeds : Share Tweets with Personal Style

Try to insert individual tweets into the posts; you can do it with 3.4 revision. Action links are provided, so the user doesn’t need to abandon your website and can reply directly to the tweet. All you need to do is just copy paste the tweet URL on its own line, that’s it!

wp 3.4

Please view the Codex issue on Embeds for more links and useful information.

Better Image Captions

WordPress 3.4 offers basic HTML support for the caption field in image uploader. Thus you gain the possibility to add links, photo credits, licensing details and basic formatting such as bold and italicized fonts.

wp 3.4

New Settings for Developers

The new WP version contains hundreds of under-the-hood enhancements. The most worth mentioning are hiding in XML-RPC, themes, custom header APIs, WP_Query and translation system. The Codex provides a comprehensive summary of the developer features; you also can turn to Trac directly. Of course the developer’s guide is here for your examination.

Have you already upgraded to the new version?

If the answer is “no”, please follow our instructions:

1. First of all, start from extensive back-up, in order not to lose any important information during the process of upgrade in case if something accidentally goes wrong. Click the Tools icon in the left sidebar and then Export. On the next screen click the Download Export File. You may create a new Folder on your hard drive to store all you backed-up Web site files. It will be useful to back up the files once a month even if no update is needed.

2. The second step is to backup your WP database. There are many ways to do this; here you will find helpful resources and plugins for WP database management.

3. Double-check your framework/theme developer to make sure if there are any issues with their themes and the most recent WordPress update. The most disappointing thing is to find out that WordPress update has ruined your theme…

4. Deactivate all plugins before upgrading.

When you are finished with those four steps, please follow the links in the nag bar (it’s called a nag because that yellow bar will be up there nagging you until you take care of the important issue noted) and update your site to the latest version of WordPress.

You further action will be the reactivation of plugins. Plugin developers update their plugins regularly, you can also do it with one click. Now you’ll notice the yellow nag bar under the plugin name in the plugins area with a link to “upgrade automatically.”

Please don’t ignore or postpone the update. Keeping your WordPress and plugins up to date guarantees a premium operation of your website.

We guarantee that all TemplateMonster WordPress templates are fully compatible with 3.4 version as our developers have carried out all necessary tests immediately after WP 3.4 release.

18Jun

If you are seeking out a starting point for your catering enterprise, our Free Website Template for Restaurant Business with jQuery slider may be just in time delivery. With the help of your imagination and our freebie, your business project may come into life in the nearest future.

If you are hesitating as to our Free Template, let us state a few arguments to its benefit. What do you appreciate in commercial websites? We consider great design and high functionality the major specifications crucial for the attended website. Our freebie has a professional, stylish layout and unobtrusive color scheme, making the customers’ browsing experience pleasant and convenient. Be sure that your restaurant will have a powerful web presentation cause besides the above mentioned features; the template possesses a built in jQuery slider in the header and a sweet gallery for your images. Use the best products developed by the artistic hands of our designers! You are welcome to view free template’s live demo before downloading the theme.

Free Website Template with jQuery Slider for Restaurant Business:

free template

You are welcome to get this free website template with PSD source files. Please visit the ‘Free Website Template with jQuery Slider for Restaurant Business’ download page at TemplateMonster and type an email address that you want the free template package to be delivered to (don’t forget to uncheck the newsletter subscription checkbox in case you’re already subscribed, otherwise you may not be able to download the zip file). Please, feel free to use this template for your business, but you are not entitled to resell it to third parties as a template.

Free Website Template with jQuery Slider for Restaurant Business (80,0MB)

NB: Kindly note that TemplateMonster’s support services don’t cover neither this template no any other free template. We provide support services exclusively for the products, which are being purchased from our website. All of our free templates correspond to the latest web standards, we applied our best efforts to make the process of customization as easy and stress free, as possible; if you have at least initial web development experience, there shouldn’t be any trouble during modification process. In case you lack the required experience, we suggest you to apply theme tutorials or community forums to know more about the software on the bases of which the template was developed, or to turn to the professional to make all necessary updates.

11Jun

We hope you are waiting for our Monday meeting as impatiently as we are. As usually, we have prepared a new freebie for your inspirational online business projects. Today it is a gorgeous Free Website Template for Spa Salon with jQuery Slider and Zoomer Effect.

If you work in the sphere of rendering varied spa and beauty services, try to launch the online version of your business project with our cool creative template. Neutral engaging color palette of the template will suit any images you might want to upload during customization. You can place all essential information about your enterprise in carefully organized content blocks. Design elements are perfectly visible on fair background. JQuery slider introduces special appeal to the composition and lets the user view the images with captivating Zoomer Effect. Free template’s live demo will give you a better notion of all strong points of the given template.

free template

You are welcome to get this free website template with PSD source files. Please visit the Free Website Template for Spa Salon with jQuery Slider and Zoomer Effect download page at TemplateMonster and type an email address that you want the free template package to be delivered to (don’t forget to uncheck the newsletter subscription checkbox in case you’re already subscribed, otherwise you may not be able to download the zip file). Please, feel free to use this template for your business, but you are not entitled to resell it to third parties as a template.

Download Free Website Template for Spa Salon with jQuery Slider and Zoomer Effect with PSD files (49,3MB)

NB: Kindly note that TemplateMonster’s support services don’t cover neither this template no any other free template. We provide support services exclusively for the products, which are being purchased from our website. All of our free templates correspond to the latest web standards, we applied our best efforts to make the process of customization as easy and stress free, as possible; if you have at least initial web development experience, there shouldn’t be any trouble during modification process. In case you lack the required experience, we suggest you to apply theme tutorials or community forums to know more about the software on the bases of which the template was developed, or to turn to the professional to make all necessary updates.

8Jun

The term of typography is much deeper and more important in web design than it seems at first sight. Typography is a unique language your website speaks to the user. An apt combination of typefaces with various effects can help enormously to convey the content to the user, to make it unsophisticated for comprehension, not too boring and confusing, to stress and underline all essential moments. The typography speaks instead of the author diversifying the voice from command tone to tender whisper.

Previous years, web designers’ creativity was rigidly limited to the choice of several fonts, supported by all popular browsers. The beauty of content presentation was a hostage of technical possibilities. However, rapid web development and introduction of @font-face CSS rules changed the situation completely. Today web designers are free to use nearly 50,000 fonts instead of five, which work well in all browsers. Such variety inevitably leads to explosion of creativity and segregation of some common trends, which turn to be the most functional, good looking and informative. The boldest experiments from time to time give unexpected results; hereunder we will try to enumerate the most successful and trendy of them.

1. Font Sizes Larger than Before

Application of larger fonts has its technical background, as wide screen monitors are on the peak of their popularity now, moreover, larger fonts has been set as default by many manufacturers of contemporary portable gadgets with high screen resolution. No more standard 12px fonts, large headlines are easy to read, they serve as outstanding design elements, appealing the user.

Maximum Zen Cart Template

zen cart template

* * *

Hizay Website Template

website template

* * *

Pets Store PrestaShop Theme

prestashop theme

* * *

5Jun

Let’s run over the most professional and creative Free Website Templates from TemplateMonster’s Spring 2012 Collection. With those inspiring designs you will be able to start your online business without any stress or troubles. This entry is a kind of compilation of basic solutions for your spectacular online projects, created with our free high-end support. Our team is always ready to provide you with quality templates; we hope they will be useful in realization of your high-flying business plans.

Below you will find a selection of free web templates, created this spring. Their topics are varied in order to meet the needs of different kinds of businesses. All designs conform to the most recent trends and possess strong design concepts in order to make your web presence profitable and efficient. Each and every free template is extremely beautiful and functional. The collection includes Full JS templates and themes with excellent jQuery sliders, contributing a lot to website attractiveness. So, if you are still choosing a suitable design, here they are again for your consideration. Please, view our fresh templates created during three spring months and pick out your favorite, perfect for your needs.

* * *

Free Website Template with JustSlider, jCarousel and FancyBox

free template

Click the image to go to download page

* * *

Free Website Template with JustSlider for Art School

free template

Click the image to go to download page

* * *

1Jun

Internet has become an integral part of our lives recently. Almost all modern gadgets provide internet access, varying only in screen sizes, which from time to time may become an urgent problem. The issue is that content of some not responsive websites doesn’t adjust to different screens, leading to poor representation. Thus, the matter is not so terrific, as it can be completely solved with the help of responsive design.

Let us present you the newest TemplateMonster product – Responsive Joomla 2.5 Templates, which look equally great on all pick-and-go devices. You need one and the same template and your website will work for you notwithstanding the gadget, your prospective customer exploits. Responsive Joomla Templates are able to accommodate and alter to fit the screen of any size if it’s mobile phone, iPad or the widest monitor. You will be a welcome guest in the gallery where you can find TemplateMonster Responsive WordPress, Responsive Drupal and Responsive JavaScript Animated templates. Please note that all responsive Joomla 2.5 templates are compatible with previous versions of Joomla.

Like any other responsive web templates from TemplateMonster, the brand new Responsive Joomla Templates possess several layouts optimized for various screen resolutions. Here are the major ones:

  • desktop layout (980px);
  • tablet layout (768px);
  • smartphone layout – landscape (480px);
  • smartphone layout – portrait (320px).

To test how design elements and content blocks adapt to different screen widths, you can resize your browser window and enjoy the wonderful flexible features of Responsive Joomla Templates in action. Please feel free to view Responsive Joomla Templates gallery, select the best one for your business and develop an amazing fully-responsive website.

* * *

Photography Responsive Joomla Template #39308

responsive joomla template

* * *

Business Responsive Joomla Template #39290

responsive joomla template

* * *

You are currently browsing the Web Templates Blog blog archives for June, 2012.