Our Blog

Tag >> Web Developement

We wanted to take this time to update everyone on some very exciting news coming to Shape5 this June. First, we will be releasing Vertex 1 for our Wordpress Themes Club, and all future Wordpress themes will be released on this new platform! This will bring many of our newer design techniques, and features such as the S5 Flex Menu, custom row sizes, and a lot more to our Wordpress themes. Second, we will be releasing version 2 of our Joomla Vertex framework, which includes the very anticipated responsive design layout along with many other great features! More information will follow in the coming weeks about this new version but for now we wanted to explain our approach to responsive design.

Responsive design at its most elementary definition is simply the use of css media queries and some javascript to rearrange a website's layout to fit multiple screen sizes. This can range from a wide screen monitor down to the smallest of smart phones. It is done all through the same site, same installation, sharing the same files, and no extra layouts needed as in the past. Unlike many pixel grid based templates, Shape5 Vertex templates are already built on a fluid width layout based on percentages, with an option pixel width wrapper, which is what responsive layouts require. The transition to responsive designs is both relatively straight forward and a natural progression for our templates because of our already existing layout. There are several approaches to responsive layouts, each have pros and cons. Some responsive designs simply use a series of floating divs that re-arrange themselves on the page and add columns as the screen width increases or decreases and remove columns as the screen becomes smaller. The biggest con to this approach is it can become very confusing as to where you content will actually exist on any given screen; making it very hard to create a layout and confusing for a client; especially those with specific product and content placement needs. The most common approach to responsive designs is simply to start with a standard desktop website, like you are used to seeing and creating with rows and columns, and then apply css media queries to reduce widths, fonts, and re-arrange a minimal amount of elements on the page. Some great examples of this approach can be found here:


This is the approach that we will be taking at Shape5 for all on-going Shape5 Vertex templates. We believe this is the best approach and will be the most user-friendly for our members. Some template providers have begun releasing special editions of their framework that allow for responsive layouts on a particular template, and that is the only layout that can be used on those templates with very minor adjustments to the layout. We wanted something concrete and permanent; something that can be expected from template to template as part of our official framework, not a special version of our framework. Our approach allows our customers to use the already existing Vertex layout and simply enable or disable responsive media queries if they wish. That's right, it's completely optional! If you're not familiar with responsive layouts then you do not need to use it, simply use the default fixed or fluid layout instead. The responsive option will work with both set pixel widths and fluid designs. Fluid designs are already a part of all Vertex templates for support of very wide monitors. We've added the ability to stretch images and increased column widths for extra wide monitors on the responsive layouts, everything else already exists in the Vertex layout.

There are a lot of factors to consider when using responsive designs: Will my extensions works with responsive layouts? (most do not) Am I comfortable enough with responsive layouts to use this functionality (That is why it is completely optional in our framework). When designing templates and frameworks we have to keep in mind that we are developing for advanced programmers and people brand new to setting up websites. Our approach to responsive designs was to allow for the flexibility to meet everyone at their own skill levels, and not create something too advanced for the average user and to not leave developers looking for me. Our approach to responsive design gives you all the options you could ever need when setting up a template! Vertex and it's responsive options is by far the most flexible framework available to date!

Just a quick note about third party extensions. Most third party extensions will not work with responsive layouts, but we are confident that many developers will adjust their products for these types of layouts in the near future, as are we. Because not everything is compatible with responsive layouts, you have the option to turn the responsive layout options off, or you can hide certain areas of the template when it reaches tablet size or mobile size. This option makes it possible to hide modules that were not built for responsive/fluid layouts so that your overall page layout is not effected.

In addition to choosing the best layout approach, we have been working around the clock at coding with the best techniques and technologies available. Many responsive designs use overloads of javascript to accomplish their layout goals. The most common scripts are done through jquery or adapt.js. It is our opinion that javascript should never be used unless it is absolutely necessary. The truth is that most layouts can simply be done through well thought out css media queries. While others use entire javascript libraries to obtain their desired look, the core layout of our Vertex templates will use only 8kb of javascript to make some minor adjustments to the left and right columns, and even that is only true if both right and right_inset are published on the page! The rest is handled strictly through css! Keep in mind that when looking at responsive templates or designing one the purpose of this technology is simply to allow your site to adapt to any screen size. The purpose is not to create unnecessary javascript effects that transition the layout on browser resize; that many of us developers love to gawk at :) These additional javascripts that some use often slow down your site and cause overload on your server.

The best part about our approach is it is completely backwards compatible! All the great features of Vertex that you are familiar with and love such as custom column widths, fixed or fluid body width, custom row sizes, etc. will all still be available to you even when responsive layouts are enabled! The rows and columns will not be set widths, you will still have control over your layout and know exactly where your content will appear on any given device.

Ok now for the best news of all! Our June Joomla club template will be our first official template built on Vertex 2 using it's responsive features! But wait, there's more, we will also be re-releasing our very popular free Vertex template upgraded to Vertex 2 with responsive layouts already enabled! That's right, a Vertex 2 powered responsive design all for FREE! In addition to that we will be publishing an upgrade tutorial for anyone currently using the free Vertex template that will allow them to take advantage of the new responsive features as well with very minimal changes needed! The upgrades to this template are close to being completed, and will most likely be released around the same time as our club template.

More information about Vertex 2 and the free Vertex template will come over the next few weeks. Stay tuned!

We are greatly concerned with the following bills being presented in the United States Congress right now. These bills have an underlying potential of removing the freedom of speech, and business development we've all experienced on the internet thus far. These bills would also hinder and kill jobs for people already in need of work. Please step up and take a stand against these bills by signing the following petition, it will only take a few seconds of your time:


If you need more information just check out the internet's largest search engine and what they have to say:


Information on H.R.3261 - Stop Online Piracy Act (SOPA) 

Information on S.968 PROTECT IP Act (PIPA) 

More Resources:

Post and accept bids for FREE!

Need a programmer for your web project? With no hidden costs or fees, the Shape 5 Hire a Coder program is a free service offered to both paid and free members of our site.  Anyone may post their project for free but only members with an active developer membership may bid on projects; this ensures that you are receiving bids from our top notch members!

Developer Members - Here is your chance to bring in new clients. Bidding on projects is totally free to any member with an active developer membership. Be sure to check our site often for new projects.

Why Use Shape 5 Hire a Coder -

1. It's free! Posting projects is completely free. There are no hidden costs or fees to post your projects.

2. Receive competitive bids on your projects and choose the one that is right for you.

3. Review a coder or post a review on a coder's work.

To view this new service or to start bidding on or posting projects please visit the following link:


S5 Resources

Throughout the years that Shape 5 has been creating templates for the Joomla CMS we have come across many sites that we've bookmarked and frequently reference for resources to build our templates with.  We hope the following post will expand your current tool set of sites and boost the quality of the sites you output.

Free Vertex Template & Theme

Free Joomla Template
Are you new to Shape5 and the Vertex framework? Then download our totally free Vertex Joomla template or Wordpress theme to experience the power of the Vertex framework for yourself! This is the same framework that our club products are built off of.
  • Fully Responsive Layout
  • Integrated Bootstrap Styling
  • Easy To Upgrade Framework
  • Custom Module And Column Widths
  • SEO Optimized Layout
  • Right To Left Support
  • And Many Other Great Features!
Joomla Details:

Live Demo Learn More

Wordpress Details:

Live Demo Learn More

From the Shape 5 Blog

Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.