Your website may need a makeover, better functionality, stronger branding or improved technology to deliver the experience your users expect. With CNP Integrations as your partner you can have the confidence to do more while maximizing your time and minimizing your costs. Our roadmap to success will ensure you have the security and competence to move forward with your priorities and objectives while respecting your budget and timeline.

Contact

Email: support@cnpintegrations.com
Phone: +1-508-644-1553
Postal Address: 385 Columbia St., Fall River, MA 02721

Follow

Call us

Call us: +1-508-644-1553

CNP Blog

hero small-flying-300

Do you have a slow loading site? Most people do but did you know that increasing your site’s performance will not only save you money in hosting, but also decrease user rejection rate, effectively increasing both your Return On Investment (ROI) and your SEO ranking.

Still not convinced that website load times are important? Let’s say your home page takes 30 seconds to load and then consider that the same page would load in 4 seconds after optimization:

After 1 million page views your users would have wasted a total amount of time of 57 years waiting, while only 7 years after optimization, effectively making your entire user base 50 years younger!

In the coming weeks and months we will be presenting a series of articles detailing the most important aspects of web site performance and how to make all your websites load super fast. Every article is intended to teach you something new about the proper use of images, website design, how web servers work, SEO, internet psychology, code compression / minification and much more! All in an easy to understand non-technical manner.

Top 10 image optimization tips for Joomla CMS!

Image optimization is the single most important factor in reducing your Joomla based website load time, and also one of the easiest to fix. It's considered important not only by your website users, who often have no time to wait and came to hate the look of a blank webpage, but also by search engines who reward the fastest loading sites with better rankings.

Did you know?Note: Today’s technology make it possible to add beautiful high resolution photos to your website, but the easy availability of large resolution miniature cameras are also the downfall of image intensive websites.

TipTip One: Keep image height and width as small as possible

Crop any unused extra space and make sure your image size reflects the actual interface, if your interface element has a 100x100 pixels size, make sure that your image is no more and no less than 100x100px.

Did you know?Note: Some images will need at least a certain amount of whitespace, a good tip for avoiding reserving the extra space when saving the file is to use CSS padding: img {padding:10px}

TipTip Two: Save your image in the correct file type

There are many kinds of images we can use in a web page and for each image you will need a different compression method, some are designed using vector Illustration Software, and therefore we must make use of compression methods that work best in images with the low range of colors characteristic to illustrations, GIF and PNG-8.

To save your image as GIF or PNG in Adobe Photoshop go to: File > Save for Web and then pick PNG-8 or GIF. You will notice that new options are available in those specific formats, the most important ones you need to pay attention to are Colors, Web Snap, Dither and Transparency. The lesser amount of colors you use and higher the Web Snap, lower the image size will be, you really need to play around with these settings till you find something optimal, as it varies in image to image basis. As for the transparency checkbox, only use this if your image actually requires transparency.

Photoshop image optimization example

Alternatively you can use this noted free tool for PNG compression: http://pnggauntlet.com

Did you know?Note: If you need high quality transparencies, such as ones involving shadows and opacity, you need to save your file as a transparent PNG-24 image, otherwise these neat details will not be available.

For most other cases you should save your file as JPG. In order to do that in Photoshop go to the  File > Save for Web and pick JPG. Make sure to select a quality value between 80% and 40%.

TipTip Three: CSS First

While working on your website template, make sure that your css files are loaded BEFORE the Javascript ones. This makes sure that your interface styles are loaded quicker.

TipTip Four:  When saving the image always make sure to NOT save any meta data

Meta data and thumb miniatures are useful at desktop environments, but not as much over the web. This can represent up to 30% of file size, so make sure to select Meta as NONE when saving a file.

TipTip Five: What if you don't want to optimize the quality of your images?

That is fine too, another way of doing it is actually saving it as 100% quality, and then using an online service such as Dynamic Drive Image Optimizer for the job: http://tools.dynamicdrive.com/imageoptimizer/

TipTip Six: Try to optimize images only once

In case you need to change your image, make sure you have a backup of the full quality one to work with.

If you have downloaded your image from the Internet, and it’s already low quality JPG compressed, there’s this neat free software that will reverse a good deal of the compression noise: http://www.neatimage.com

TipTip Seven: Don't use images as text, text should be rendered as html

This is a common mistake to make, but actually easy to fix, all you need is some CSS related website makeover.

Google can't index the text inside of images, resulting in bad SEO. Loading extra files also slow down page load time. If you want to use custom fonts, try using the Google Fonts service instead or a tool to convert your font to a web optimized format:

http://www.google.com/fonts/
http://www.fontsquirrel.com/tools/webfont-generator

A general professional website design rule to follow is to not use more than 3 different fonts over your entire site, this will allow you to achieve consistency and improve branding, while making the site faster.

TipTip Eight: Avoid parallel downloads

Browsers have limitations regarding how many files they can download at once, not only that but the time it takes to connect to each one of those files can also add up considerably.

A way to fix the parallel downloads problem is to make sure you only load files when necessary.
Instead of using images as gradient backgrounds, try using css instead:
See this link for a useful tool:
 http://www.colorzilla.com/gradient-editor

Another useful trick is using Sprites, sprites are combination of images such as bullets or menu buttons, that instead of being loaded in many different files, everything gets packed into a single one. The way it works is by adding your buttons at specific positions into the Sprite, and then using css to only load the specific position you need.

This single image has two arrows: Image sprite example

In order to load only one arrow at time you need to apply this css/html:

<div class="arrows" alt="Image Sprite Example"></div>
.arrows {background: url('/images/image-sprite-example.png') -31px 0px;width:31px;height:35px;}

Resulting in:

 

TipTip Nine: SEO Optimization - Meta data, Social Media and Image Sitemaps

One of the best ways to improve SEO is to insert keywords to the alt tag image parameter setting. Another option to consider is the naming conventions you use for your files. If your file is named IMG035690.jpg it will mean nothing to search engines, but if you’re more descriptive in your file naming, by using targeted Keywords, it will improve your rankings ever so slightly.

Did you know?Note: Attention to details as they relate to your keywords can make a significant difference as your content collection grows.

When web pages are shared over Social Media, such as Facebook, it’s important to make sure that your URL’s are properly configured with their respective OG data formats, such as og:image (page  thumb) and og:description (shared page description). This free Joomla tool will help you in this process: http://e-max.it/joomla-plugins/easy-open-graph

Image sitemaps are very useful when trying to get your images to show up in Google Image Search. This issue is a bit technical though, you can find out more about it here: https://support.google.com/webmasters/answer/178636?hl=en

TipTip Ten: System caching, load your images only once!

There are system cache options available in Joomla and several 3rd party extensions that can help you manage caching. Choosing the right one is important since some can actually hinder your site’s performance. In addition to our own internal team’s site analysis we work with an independent company that specializes in performance audits, helping us achieve the very best results. The process requires setting up a complete clone of your site, analyzing the specs of the hosting environment, your content, chosen template frameworks and many other criteria. The different configuration settings, extensions and tools are tested to determine where the site can be improved upon.

One of the tools you can use to test the current status of your sites performance can be found here: http://gtmetrix.com/ simply type in your URL and review the results.

http://www.cnpintegrations.com/extensions/

Did you know?Note: Here is one code snippet you might find useful;

Go to your site’s FTP root folder and add the following to a file named .htaccess:

<IfModule mod_expires.c>
   ExpiresActive On
   ExpiresDefault "access plus 14 days"
   ExpiresByType text/css "access plus 1 week"
   ExpiresByType text/plain "access plus 1 month"
   ExpiresByType image/gif "access plus 1 month"
   ExpiresByType image/png "access plus 1 month"
   ExpiresByType image/jpeg "access plus 1 month"
   ExpiresByType application/x-javascript "access plus 1 month"
   ExpiresByType application/javascript "access plus 1 week"
   ExpiresByType application/x-icon "access plus 1 year"
</IfModule>

This will prevent your visitors from loading your files again every time they visit.

Stay tuned for our most useful extensions directory where you can quickly access our preferred extensions for site performance optimization and cache management.

TAG-CommunityIf you’re trying to build an online community, and you lack programming experience, then Joomla CMS is the only real choice you should consider.  Drupal and Wordpress can both achieve this, but each has their own pitfalls and challenges that Joomla has risen above.

With Drupal, the learning curve is very high, and as a Content Management System, its better suited to individuals with programming backgrounds.

Wordpress has plug-ins that are basically workarounds on the author system, and it can take a lot of time to develop a road map towards anything that makes sense for your needs.  If you want to make a change in your community structure, you’re going to be in for a rough time.

Joomla CMS since version 2.5 has made setting up, organizing, and maintaining your online community very easy.  Joomla now has incredibly flexible Access Level Control (ACL) features and the latest version of Joomla 3.x supports tags natively so you have endless ways to organize and manage your contnent. Customizing pages that either require your permission, or a certain fee, are as simple as installing one of Joomla’s many free or commercial extensions and configuring them to your specification.  In addition the new Joomla 3.x allows you to use responsive templates for responsive front end designs and the default administration template is responsive (mobile ready) allows you to manage your portal from your favorite mobile device.

What makes Joomla the best choice for building effective online communities, beyond all of the other reasons mentioned above, is the fact it has the largest global community of web developers supporting it. You can get free support from many forums and a ton of free or professional training resources online. Just type in Joomla in Google or Bing and see what I mean. In addition since the boom and wide spread adoption of open source technology there are thousands of great companies offering professional support specific to the Joomla CMS.

add-new-user-details

Adding a new user, and categorizing them is as simple as filling out this form:

 

Joomla CMS has made setting up, organizing, and maintaining your online community very easy.  Customizing pages or content that either require unique permission or implementing advanced data models are as simple as installing some of Joomla’s many free or commercial extensions.  if you have more enterprise level requirements Joomla is more than a CMS it offers an application development platform. This means you can future proof your online business technologies and keep using Joomla as your business needs grow.

So if you consider, like we do, that every web site is a community of like minded visitors coming to you for whatever reason, a natural extension to this if you are more social oriented in your portal concept is to add some type of community building framework. In this case you should consider an extension like JomSocial as a top contender for a robust social interactive community building suite of tools. With JomSocial your users will be able to share content in activity streams, share photos or videos and collaborate in groups both public and private. You can also set up profile types and interact with e commerce or subscription management and many other tools.

You can take all of this a step further, and create a totally customized experience, tailor made to your specifications by a Joomla Development Specialist.  This individual, or team, will ensure your vision is realized and your online community will experience your message the way you see fit. Working with a team of experts will help you move faster, make better decisions and reduce costs of maintenance and development.

Our team at CNP is dedicated to creating success stories with online community portals whether we are your chosen team or not so if you want to learn more about how to become a success story visit our community page where you can download our exclusive Seven Pillars of success brochure and access to other information that may be helpful for building your online community : Build sustainable online communities

can-hp-smManaging your web presence as a non-profit brings up a lot of questions.  There are numerous factors to take into consideration including  membership-access, e-commerce, calendar-management, SEO, security, mailing-lists, donation-collection, blogging, image-galleries, documentation, and the list goes on.  

 

If you’re planning on building a site for your non-profit, you should consider the Content Management System [CMS] thousands of government services use, Joomla!  

 

Joomla development is the ‘middle-path’ for open-source CMS’s. It balances the construction of powerful web applications with a clean and simple way to put it together.  Every one of the questions I brought up earlier can be built right into Joomla through their simple to navigate Joomla extensions directory.

 

The big 3 CMS’s went head to head at SXSW in a competition building a community oriented website. Joomla really shined in every category.

 

Image taken from CMSWIRE.com article SXSW Web Content Management System Showdown (Update 2)

 

Joomla web development is an exciting experience.  You’ll get this when you team up with a Joomla expert.  While anyone can manage Joomla, to fully realize the potential of one of the most popular CMS’s on the planet, you’ll want to team up with a Joomla development company.  

joomladiyAre You Off Color?

As a schooled graphics and Joomla web designer I have learned first hand that the colors you choose for your branding can really make or break you. It’s true that color choices are highly subjective, yet there are some fundamental choices that are viewed as ugly or inappropriate by an agreeable majority. Taking this reality a bit further, it is safe to assume that the colors you choose may not be appropriate to your audience or industry.

You have to choose colors that best project your industry and best convey the right message to your audience. For example, if you are a travel agency, you may not want to use too much black but instead use dark blue or dark green, etc. to coincide with outdoors. Keeping in mind that light shade of a color vs. the dark shade of a color can also impact your message. Pastel colors may seem relaxed and soothing, but can also backfire and give a wishy-washy impression if used in the wrong industry type or audience. The combination of light and dark also play a part. Too much use of light or dark can dilute your message or brand. For example choosing the shades of one color is more acceptable (black, grey, silver) than a mix of shades from more than two color groups.

Usually, professional services should have a strong color choice to project an objective, firm “we get the job done” attitude. A washed out light color will give an impression of uncertainty and unsure attitude. For example, a light color theme may not work well for legal professionals – but may work well for healthcare professionals who need to portray them as very caring.

If your website is a CMS and you are using a template, you may have a shortcut or a cheat way to get your colors coordinated. As a Joomla website designer, when I choose a Joomla design template, I look for one that best represents the industry style I’m working on, then I choose the best color combination that the template offers for my Joomla website design theme. The idea here is to match my branding colors from the template. As WordPress and Joomla web designers, we are very fortunate in that there are literally thousands of templates for us to choose from that offer infinite combinations.

The reason why this works well is because professional WordPress and Joomla web designers that create these templates choose their color pallet from harmonious swatch groups and themes. Following their color choices keeps my Joomla web design within the proper color group. For example, their blue and red work well together on their Joomla design sample, whereas, your blue and red may clash and make your Joomla website look amateurish.

Are You The Right Type?

You have probably seen graphics that seem as though they were created in the fifties compared to others that look as fresh as “today”. Often times it is the style of shading and type fonts used. A retro font automatically looks like a throwback whereas a tech font may not. Use the typeface that best matches your industry type. A high tech manufacturer may not be well served with a nineteen-sixties looking font. This is common sense but if you search you will be surprised how often this is overlooked.