Frailwords

Last week we were ask some questions about our new Warp 5.5 theme framework. This was a part of the research done by Team EaSE for their Joomla! Template Tools Part Three article which is published in the latest Joomla! community magazine issue. We don’t want to hold back this interview so everybody can enjoy reading! Here we go:

Why is a framework needed for template development after all?

Each time when you are developing a template you usually deal with the same things, for example you use a certain folder structure to organize your PHP, CSS and Javascript files or you rely on features like layouts, compression and caching. And because you dont want start from scratch coding all these features all over again and again, you better use a framework to provide you with a structure how to organize your template files and also a rich toolset to solve your common problems. That way you take your time and focus on the more important individual parts of your template design.

Is your template based on a third party layout system, e.g. one of the grid systems out there?

In our current Warp Framework version 5.5 we do not use a third party layout system. The CSS layout we use, is a composition of all the best-practices we learned about in last years developing templates. Typically our layout system evolves over time and we update it to match the latest web standards and capabilities of modern browsers.

Is your template based on page elements regarding usability and SEO?

Yes, we built in SEO features to improve the overall website search-engine friendliness. First all our template mark up validates to current web standards to provide a clean HTML output with no bloated code. Also we use graceful-degradation for the template Javascript effects, so if your browser has its Javascript support disabled you are still able to navigate through the website, because the dropdown menu will be working with CSS hovers. Further when using a 3-column-layout we order the websites HTML output in a way that the main component output will always be first followed by the left and right column. That way the your websites main content gains importance compared with left or right column.

How does your framework differ from those of your competitors?

When developing the Warp 5.5 theme framework we wanted it to be as modular, flexible and extendible as possible. We also looked at other template frameworks but we did not found anything that meet our expectations. So we started to design the new framework in a way that every tool or helper as we call them in Warp, is a modular component doing a single task. Like the good’ old unix philosophy: “Write programs that do one thing and do it well.” Also we wanted a clean separation between the individual template and the framework. So we extracted the framework from the template, and now the new Warp framework is placed in a separate directory. Applying updates or patches to the framework is easily done now, because all the generic framework source code can be updated independently from the individual template code.

Which products are currently in production release utilizing this framework?

We recently updated all our YOOtheme templates starting from 2009 to use the Warp 5.5 framework, which are 20 Joomla! templates in total.

Can you tell us a little about the team who helped develop it?

Developing the Warp framework involved our whole team at YOOtheme with each one focusing on different aspects of the framework. Basically each team member brings in the in-depth knowledge of a subject like HTML, CSS or Javascript. Bringing all these creative minds together made it possible to build the theme framework like Warp.

What are the obstacles facing novice users of a framework? How should they prepare for a project which uses one?

In general its really easy to install an YOOtheme template which uses the Warp framework because it uses the normal Joomla! extension installer. And within templates settings you can also change the templates options and choose form the preset styles which are included. This is everything pretty easy for also the novice user to get started. Further we have provide documentation page which provides all the answers to common questions for beginners.

Are there users whom, in your opinion, should not use a framework for their Joomla project? Why or why not?

We think, its recommended to use a framework for your template development. Basically the framework and its toolset provides a solid foundation which you can build upon, also if you don’t use every feature framework has to offer. Even if you design basic template for a micro-site you can benefit from framework features like a layout which is cross-browser compatible by default. Once you have understand how to use the framework you will save some time to built a template for your next website.

Is there any update functionality built into the framework? Either an “click here to update” or a latest version notification?

At the moment we are working on this update notification feature and we plan on releasing it with our usual Warp framework updates in the next weeks.

What is the future for frameworks? How will you develop yours through future iterations?

As the web standards like HTML and CSS evolve, our Warp framework will progress too. We constantly look through the web for new stuff and innovation regarding frameworks and template design. If we learn about a new feature we will evaluate it and extend our framework to implement it. Right now we have a lot of new ideas we want to add to our framework over the next months. You can follow all our announcements of framework updates on our YOOtheme blog or through our twitter tweets.

We hope you enjoyed reading. More update on Warp comming soon!

View full post on YOOtheme News Feed

This month we proudly present our new template “Noble”. It’s stylish and individual design in combination with our new ZOO blog template make it perfect for your private website or blog. To give our new template a noble touch, we used discreet retro colors, lots of whitespace and played around with the typography. You also have the option to enable some nice Google webfonts!

To give you a wide range of different color variations you can choose a color style for the content, different background colors, textures and illustrations. You can combine all these setting which makes up to 480 different template variations. We already arrange 8 nice combinations which are available as presets in the template configuration.

Feature list

• A variety of template color variations
• Lots of modules with color variations, endless combinations with icons and badges possible
• Built with the Warp5.5 template framework
• Utilizes different webfonts
• Compact size, using minified CSS/JS, gzip and data-URI’s
• Fully compatible with the latest Mootools Version 1.2
• Works with all YOOtools

View full post on YOOtheme News Feed

Over the last couple of months we developed the new Warp 5.5 theme framework which is the new foundation of all our YOOtheme templates. In this time we have rewritten the complete Warp theme framework to make it more modular, flexible and also extendible. Currently all Warp 5 templates are updated and six more will follow in the next days so all our templates since 2009 run on the new framework. This means 20 templates will use Warp 5.5! In this article we want to highlight some of the key features of our new Warp 5.5 theme framework. Enjoy!

Framework Core

Basically Warp 5.5 provides a rich toolset for crafting a modern template. We designed the new framework in a way that every tool or helper as we call them in Warp, is a modular component doing a single task. Like the good’ old unix philosophy: “Write programs that do one thing and do it well.” So we created a bunch of helpers to do just a single task for example like rendering layouts, minification, caching or XML parsing. This makes the framework really flexible as we can use only the helpers we need when creating a template, the framework also ensures that only helpers are loaded which are currently used. Since every helper has a modular design its makes it easy to add new helpers anytime to extend the frameworks functionality. Also we extracted the framework from the template, so now the new Warp framework is placed in a separate directory called “warp” in the templates directory. Applying updates or patches to the framework is easily done now, because all the generic framework source code can be updated independently from the individual template code.

CSS/JS/Image Compression

With Warp 5.0 we introduced a really great feature to automatically combine, cache and compress stylesheets and javascripts of a template. You can find more information about it in the “Faster loading with Warp5” article. As a result a template will speed up its overall loading time in the browser, because it needs less HTTP requests and also all resources are compressed on-the-fly using the GZIP data stream compression. Warp 5.5 takes this concept even further and now minifies stylesheets and javascripts. This means all unnecessary characters are removed from the stylesheets and javascripts sources. These unnecessary characters usually include white space characters, new line characters and comments which are used to add readability to the code during the development, but are not required for it to execute. The minification is now a part of the caching process and its enabled by default so you need worry about it. Finally the minified stylesheets and javascripts will save some more KB’s of bandwidth to improve the templates loading times.

But that’s not all! We like to introduce a brand new compression feature: Data URIs! Since Warp5 we already minimize the image requests by merging image slices into so-called CSS sprites. This means that we put as many image slices as possible into a single image file which significantly reduces the loading time of your website. But of course there are still some neccesary image request left. With Warp 5.5 we use Data URIs to get rid of them. Data URIs allow to include images and other files in-line in HTML and CSS as if they were external resources. This means that all template images which are smaller than 30KB are now embedded into the templates CSS and there no extra HTTP request required to load the images. In most cases only 2 HTPP file requests (CSS + JS) are necessary to load a template. That’s it! Isn’t this awesome? This feature is only available for modern browsers (Firefox, Safari, Chrome, Opera, IE8). But you don’t have to worry about older browsers like IE7. They are still loading the images the normal way.

Mootools 1.2 ready

The recently released Joomla version 1.5.20 adds support for using Mootools 1.2 as your primary Javascript library. Therefor Joomla now includes a new plugin called “mtupgrade” which will include Mootools version 1.2.4 instead of the old Mootools version 1.1.2. With the new Warp framework 5.5 we included native Mootools 1.2 implementations of all the template Javascripts! Further the framework auto-dectects if your are using the Mootools upgrade plugin or not and will include the compatible scripts to match your Mootools version.

Presets

We introduce a new preset parameter in the template configuration. With presets you can define and load a specific configuration of the template parameters. Currently the presets only change the “Template Color” parameter but future templates we will use more options than just the “Template Color”. Further you can “Allow dynamic presets”, which means a preset configuration can be loaded adding a HTTP get parameter to your website link like: &preset=blue. And last but not least you can disable dynamic presets so it is not possible to change the preset by adding the &preset parameter to a link. This means it is no longer possible change the color variation of your template if you don’t want to allow it.

New Versioning

When updating all our templates we also changed the template versioning. The first two numbers are now referring to the Warp framework version and not the Joomla version which the template is created for. So you can immediately check which framework version the template is using. We did this to avoid confusion in the future because the new Warp 5.5 theme framework not depends on the current Joomla version.

Future

Currently we are very focused on our Warp framework and a lot of development is going on. With Warp 5.5 we updated the whole php code base. Now Warp is a platform independent CMS theme framework. This improvements on the framework level were very important to add more features in the future. This means you can expect more Warp updates soon…

We hope you like the new Warp theme framework as much as we do! Enjoy!

View full post on YOOtheme News Feed

Today we are very happy to present you the next icon set release for our icon club. The Boxes Icon Set! We put a lot of effort in this release and we are proud that it is the biggest club icon set in our portfolio now! It contains 34 high quality icons in 32-bit transparency PNG file format and in 8 different standard sizes, ranging from 16×16 to 512×512 pixels. This makes 272 extremely detailed icons which are handmade and optimized for each specific size. Of course vector PDF files are available so you can change the colors and customize the icons!

The boxes icon set contains all kind of boxes: cardboard boxes, wooden boxes, metal boxes, shoe boxes for the ladies and more. Each has different colors and variations like closed, opened or filled with paper. The different colors makes them perfect for organizing different categories, for example your product-bundles. We also included a nice paper bag in the set. Don’t worry, it’s 100% recyclable! Take a look at all the different boxes:

Spice up your websites, catalogs or shops with our new boxes icon set. Our Premium members will also get all the vector PDF files for easy customization and resizing. Have a look at this set and join our icon club today!

We would be very happy to get some feedback. Please post a comment with your thoughts about this set and your wishes for future releases.

View full post on YOOtheme News Feed

Today we are really exited to announce the BETA release of ZOO 2.1! The release comes with the most anticipated feature for ZOO: Frontend Submission! But it is not just another frontend submission. We really tried to raise the bar and take frontend submission to the next level in design, usability, simplicity and flexibility.

In this blog we put together a comprehensive walkthrough of all the new features. This helps you to explore all the new things we implemented in ZOO 2.1. Take some time, get yourself a coffee and enjoy reading Here we go:

Frontend Submission

Your brand new frontend submission for ZOO allows you to create submissions for any content type of your ZOO apps. For example authors can submit articles or the latest movie reviews.
It can also be used as a form builder for any kind of form, e.g. an application or contact form. Create multiple submission forms for your content types with different fields and layouts for your user groups.
Not only submissions by registered users even public submissions are possible. Everything can easily be managed from the submission manager of the ZOO administration.

Submission Interface

We’ve put a lot of effort into the design of the submission interface to create a great user experience. The forms are well-designed, clearly arranged and simplified for all the different elements of ZOO.
For example link, email and video elements now use simple input fields. Fields that currently have the focus are nicely highlighted. Required fields are marked with an asterisk. And help messages appear whenever the submission fails due to requirements not met.
Of course users don’t have to enter data twice if a submission fails. They’ll only have to fill out the missing fields that are nicely emphasized.

Field Labels

We provide an elegant solution for labels in elements with more than one field. The label appears in a light gray inside the field even if the field has focus. It doesn’t disappear until the user actually enters the first letter. These small things help the user to follow through the submission and give an overall better user experience.

More Options

Some elements like link, email, image and others can have some extra options. If you enable these options a little Show Options button appears in the submission interface. For example the extra options for a link element are a custom text, title, rel tag and whether the link should open in a new window.

Upload fields

One of our little highlights is the upload field of the image and download elements. The file upload field is by far the worst field to style and it is difficult to get the same look in all browser.
So we are proud to present a well-designed upload field which works in every browser. As icing on the cake it only displays the selected file name without the whole path which is normally really annoying.

Tooltips

You may remember that you can add a description for each element in ZOO when creating a new content type. These descriptions show up as tooltips for each element in the ZOO administration.
They can also be enabled for the frontend submission form to give users some help to fill out the form.

Form Builder

Of course we introduce a new submission layout where you can arrange your content elements via drag ‘n drop from the administration backend. This makes creating your submission form a breeze!
Just drag ‘n drop the elements of the submittable type to the layout positions.
This key feature makes ZOO very versatile and easy to use. For example you can build an application or contact form with just a few clicks!
The layout parameters allow you to define what elements are required when filling out the submission fields.

My Submissions

Ok, submitting content is the first part but what if you want to review or edit your submitted items in the frontend? Well, here we go
We implemented a “My Submission” Page that lists all items of an author. It got all the basic features like pagination, filtering items by type, editing and creating new items.
You can also preview an item before editing without loading any new page. The preview looks exactly the same as the item view. Awesome!

Upload Size

For each image and download element you can define a maximum upload size. If the file size is too big the user gets a help message.

Restricted File Types

Again for each image and download element you can define the valid file types that are allowed to upload.

Backend revamped

While designing and developing a beautiful frontend submission we came up with the idea to revamp the form fields in the ZOO administration as well. For example the item creation form looked a little messy in ZOO 2.0. So why not kill two birds with one stone? ZOO 2.1 now has the same polished form fields the new frontend submission has. All forms are now clearly arranged and and the user interface is simplified! You will feel much more comfortable while working in the backend. Isn’t this awesome?

What’s next?

The ZOO 2.1 BETA is exclusively available for members only. As soon as ZOO 2.1 goes STABLE it will be released for the public. Members can go straight to the download section in the member area and take ZOO 2.1 BETA for a test drive! Be aware that it is a BETA version. It is not intended to be used on a production web site just yet.

View full post on YOOtheme News Feed

Enjoy Neo, the latest YOOtheme template. Neo comes with three basic themes, each of them has different color variations to choose from. They contain a plain variation, a gradient variation and a retro variation. This makes it suitable for all kinds of websites, from stylish individual blogs or portfolio websites to impressive business sites.

Again we implemented some new features in this template. We put in a broad range of module variation, for example the brand new transparent glass style, an additional list-style called “hoverbox” and our “retro” and “gradient” variations make use of the Google webfonts API, which can easily be switched off in the template settings, if needed. We also use the new ZOO template for the blog app!

Feature list

• A variety of template color variations
• Built with the Warp5 template framework
• Multi-column dropdown menu
• Lots of modules with color variations, endless combinations with icons and badges possible
• 2-1-3 column ordering for search engine friendliness
• Compact size, using gzip and image sprites
• Works with all YOOtools

View full post on YOOtheme News Feed

Today we released a new minor ZOO version 2.0.3. In addition to the bugfixes we updated our blog app and put an additional template called “Sans” in this app. The new template is based on the default blog template and beside some small improvements it uses a sans-serif typeface for the headlines. We created this template to make our blog app fit a wider range of websites which uses a sans-serif typeface. So with this new template you can easily change the style of your blog, without changing any of the css styles. Read more about the other improvements and update ZOO today.

Further Updates and Changes

With the new release, we also got rid of a few bugs and introduced some changes. Here is a not complete list of bugfixes and changes to the ZOO 2.0.3

• + added new sans template to blog app
• + added “above title” media alignment option to the default template of the blog app
• + added k2 version 2.3 import support
• + added requirements check button to administration
• ^ general performance upgrade
• # all template positions are now being saved on type slug rename and copy
• # fixed bug where an items tag would show, even though the publishing date was in the future
• # fixed bug where .flv movies would only play if set to autoplay
• # fixed some HTML markup validation errors
• # replaced deprecated ereg function from googlemaps helper
• # fixed bug with tags view and pagination
• # fixed bug where Joomlas email cloaking plugin would introduce a leading space to the email address
• # fixed bug with chinese characters in slug
• # removed unused helpers/menu.php file (caused problems with Advanced Module Manager)
• ^ changed “READ MORE” to “READ_MORE” in all language files
• - removed needless $params in teaser layout (only documentation app)
• ^ changed how layouts are called in the item template
• ^ removed article separator if article is last in all templates of the blog app (CSS)
• ^ changed padding for last elements in text areas (CSS)
• ^ moved comment rendering from layouts to item view (all apps)

Download ZOO and the new template today.

View full post on YOOtheme News Feed

First of all thanks for the great feedback we received for our new icons stuff! We are very happy that you folks like our new icon club we launched last week – And today we want to bring you the complete social bookmarks icon set as freebie, including all sizes and even the vector source files. Using social bookmarks icons on your website has never been prettier. Easily share and bookmark content and spread it all over the world! We provide our social bookmarks icons with a high brand recognition, looking straight-lined and equally fresh styled. Of course they are designed to match with all our club icon sets.

This freebie features most popular web and social media icons, such as Facebook, Twitter, Flickr, Google and many others. For each of them we created different color and shape variations to give you a wider selection of matching icons for your website. The whole set contains 47 high quality icons in 32-bit transparency PNG file format and in 8 different standard sizes, ranging from 16×16 to 512×512 pixels. This makes 376 extremely detailed icons which are handmade and optimized for each specific size. The set also includes vector PDF files of all icons that are compatible with Adobe Illustrator and can be rescaled to any size without a single loss to the details.

So download, enjoy and and please feel free to Twitter, Digg or recommend them. Are you missing your favorite social media icon? – Tell us and we’ll see what we can do about it!

View full post on YOOtheme News Feed

Its July and YOOtheme delivers its brand new template “Royal Plaza”. It comes with 3 main color variations to give your site a new and individual look. They differ completely in module styles, typography and the whole look of the site. Its like three different templates combined in one! We have a modern and neutral business look, a vintage style with some more retro elements and finally a shiny premium look. These different styles make the template really versatile to fit all kinds of websites. Additionally you can set your template to a plain style of each variation, to turn off the wrapper edges of the site.

We built in a second menu position “menuright”. Now you are free to place the menu at the left side, the right side or even menus at both sides of the menubar. These positions give you the freedom to publish the logo anywhere in the header, even in the middle between both menus. Further we put a second row of bottom modules into the footer of the site.

Feature list

• A variety of template color variations
• Built with the Warp5 template framework
• Multi-column dropdown menu
• Lots of modules with color variations, endless combinations with icons and badges possible
• 2-1-3 column ordering for search engine friendliness
• Compact size, using gzip and image sprites
• Works with all YOOtools

View full post on YOOtheme News Feed

At the end of our “YOOtheme templates – An inside look!” presentation, we did at JandBeyond, we showed the audience a little teaser of our secret project we were working on the last 9 months: Our new YOOicons! And today we are very proud to open the gates to the new website presenting our icons.

You may already use one of our templates to build good looking websites. But what about your content? Wouldn’t it be great to have some real eye-catching icons to beautify the content of your website? Icons are an essential content element for web design. Today almost every major website uses icons to highlight important parts in their content. This is why we came up with the idea of creating handcrafted icon packages for web and print projects. With YOOicons we will offer commercial icon packages as well as free icon sets. We start with our first commercial icon package: the Basic Package.

The Basic Package

The Basic Icon Package is packed with 125 high quality icons. It includes useful icons for your company website, many social icons and all the standard icons you need for web applications. All icons are available as 32-bit transparency PNG file format in 8 different standard sizes ranging from 16×16 to 512×512 pixels. This makes a total of 1000 extremely detailed icons which are handmade optimized for each specific size. Adobe Illustrator compatible vector PDF files of all icons are also available so that the icons can be rescaled to any size without a single loss to the details.

The Design Process

Let’s take an inside look into the process of designing of the Basic Package.

We started off with a blank sheet of paper and produced our first ideas from scratch. While we used our imagination to come up with new and inspired designs, we went along the line of trial and error, to find out what would work and what didn’t. In doing this, we got a better understanding of how our icons should look and feel: crispy, clear, lively and fitting a wide variety of needs.

Now for the second step. We began to translate the selected scribbles into vectors. Lovingly taking care of every detail, we began with the largest size of 512 x 512 pixels. To keep a consistent look, we arranged a vivid and harmonic color palette and we where enthusiastic to see our icons taking form.

Next we prepared the smaller sizes, taking perfectly care of a beautiful result. Most important in this step was designing with the pixel grid. We needed a good feeling for which detail to highlight or ditch in every step of downsizing. Of course there were many modifications and sometimes it was a hard fight until we were truly satisfied.

With the slices we’d already build in Adobe Illustrator it was easy to export the icons as PNG. To play safe we singly checked each one of them in Adobe Photoshop and cleaned up scruffy edges if necessary. The final step was to export the source file as vector PDF – Et Voilà, here they are!

Visit our icons website and enjoy browsing through all icons!

View full post on YOOtheme News Feed