Category Archives: Technology

Automatic Upgrades – nursing your CMS installation

Posted on by haga

Open source CMS platforms like WordPress and Joomla regularly work on their core codes, issuing frequently next version for the upgrade. We are so used to constant upgrades of our computer software that clicking that upgrade button is not anything most of us think twice about.

Should you always upgrade to the most current version?

This simply sounding question does not have a straight-forward answer. It is really a complex issue and coming up with a right answer goes back to the planning stage of your website. Let’s talk about the most popular Content Management platform today – WordPress.

As the popularity of the WordPress increased exponentially in the last couple of years, so did the number of available themes and plugins that make the flesh and experience of our sites. Many of intermediate programmers contributed with their excitement to this development. Not nearly half of them continue to support their original, publicly available code. Unfortunately, this code was used in newly created sites all over the world, because it offered attractive functionality and aesthetics at the time. Website designers and project managers alike proceeded in good faith, not knowing whether or not the plugins and themes used in their clients’ websites will be abandoned a month or a year later.

Long gone the development phase, now the sites are in the hands of the “administrators” that know nothing about the codes. They are the end users. As soon as they see the upgrade notification pop up in the admin interface, they hit the button. Who does not want to have up-to-date website?

This one click can result in a disaster. With any incompatible plugins or themes the site becomes slightly or completely broken. You should have had a backup!

Precautious developers hide the upgrade notifications from the end users. Others are warned not to do upgrades on their own. Some part of website owners just don’t care what version do they run, and never upgrade – there is business to be run, who has the time for the back end!?

Staying with the originally installed version of your CMS also has its pitfalls. Yes, your site may function Ok as is, but that’s not guaranteed. Between the improvements in browsers technology and dangerously growing day by day cyber security threats, your site may not look or function the same after a while. It can become inaccessible on the newer devices, like iPads, smart phones and electronic appliances, or be easier hacked with every ignored security update. You may also miss all the newer, nicer functionality offered in the current version.

So what’s the smart plan?

If you are aiming to save yourself time – have a professional developer on retainer or frequent short-time contracts to keep up with security and functionality upgrades. They will evaluate your plugins’ compatibility over time, when the new versions come aboard. The best is to have original developer do it, as the ‘secrets’ of your installation may not surface until new elements are at play. It’s as delicate as a pharmacist’s job – hard to predict interactions amongst all the plugins used over time.

If you are set to save yourself money – you need to follow all the upgrades announcements, and do the due diligence about published compatibility of each of the plugins and themes that are on your site, before upgrading. Have a good, working backup, and keep in mind that compatibility of each plugin does not add up as joint compatibility in a new version. Vinegar is Ok on it’s own, and so is baking soda – but join the two and foaming may overflow your bowl. The same is true about your upgrades and plugins.

Why some websites have performance problems?

Posted on by haga

When you had your website built, it was most probably handed to you in a good state. Page loading times can deteriorate over time, or quickly and abruptly, when certain events occur on the server or in the process of content maintenance. What are some reasons for a slow loading times of a fairly simple website?

  • Running forums
  • Very large content (hundreds of pages)
  • Large media files (images, video, audio, attachment files like PDF brochures etc.)
  • Excessive use of plugins
  • Excessive use of scripts (scripts that come with plugins, traffic analytics, marketing, forms, visual effects)
  • Administrative overhead of user-friendly back end theme options
  • Using custom fonts
  • Sloppy or bloated code
  • Overly analytical code, with excessive use of “if” statements checking for user agent / browser version / size
  • Errors in user’s content management usage resulting in pages hanging or malformed
  • Overcrowded web host server or server having issues, including security breaches and online attacks
  • Sudden increase in website’s traffic due to marketing event or viral popularity (we all wish to have this problem)

One of the most popular ways of dealing with slowly loading pages is installation of the super cache plugin. It was downloaded over 3 million times just for WordPress sites – millions more times for other sites.This plugin generates static html files from dynamically created pages in content management systems. The static file is served instead of processing the comparatively heavier and more time consuming scripts used to generate page dynamically. This idea has several pitfalls, as you may already see. First of all, your viewers are served cached content – many times resulting in seeing old content. Plugin itself requires reasonable maintenance. Additionally logged in users will not get cached content, so they will still experience long delays in page loading. It just seems like a problem masking prop rather than real solution. I’d rather scrutinize inefficiencies, and review poorly thought-through design than use a sloppy or bloated process and slap accelerator on the top to make things better.
Many plugins are installed “just in case” by hungry for everything owners, and not vetted for only necessary ones to ensure desired functionality. Many originally looking fonts are used purely for vanity, not adding much value to the site.
And which developer did not hear a request to upload image files “in high resolution” to enhance viewing experience? – website owners not familiar with web standards, do not want to believe that all these images will be reduced to 72 pixels/inch by every browser, every time.

When troubleshooting performance problems, it is always worthwhile to look at the server logs that may reveal quickly what was the reason behind slowing down your site.

Many online tools are available to asses the loading times of the websites. You will need a healthy dose of common sense reading the results and recommendations steaming from these reports. They would frequently ignore large media files, adding hundreds of kilobytes to loading times, but point finger at minifying css (style code) file that can only save tens of kilobytes. You should read such recommendations carefully to understand their true impact on what you are trying to achieve.

When building and optimizing your website for speed, everyone has to come together – creative director, designer, programmer, content writer, photographer, support staff, and web host. Understanding an impact of each of these areas is critical for smooth user experience.

The importance of message

Posted on by haga


A clear message is well designed, well read. Because not many viewers like to stay on a website cluttered with information until they understand what is being sold, presented or simply said. Our attention is so thorn between all the messages that bombard us daily that is only fair to make yours as clear and understandable as possible. Simple is Good.

Website design trends 2012

Posted on by haga

The twenty-two year old Internet is in it’s fifth generation. Generation rollover is accelerating, and so website design is experiencing more diversity than ever. 65% of small business owners have a website, leaving more than 30% without one. Of those who do have a site, some 20% update it only once a year. Bearing in mind that viewers only stay on sites which don’t engage their attention for a few seconds, the importance of good website design becomes clear.

Our research of the most popular and emerging trends in website design allows us to predict the following trends for 2012:

One-page websites

One-page layouts are on the rise with several variations that include: Vertical scrolling with link-embedded content, in absence of traditional navigation; Parallax scrolling; Design under the fold, where interesting content does not end above the first-visible area of the screen.

Large images

Billboard, Print and luxury Magazines designers invaded traditional web domain with striking imagery that is worth a thousand words. Variations include oversized headers taking full height of the screen, large sliders trending against flash designs (flash usage peaked some time ago, especially as many mobile devices don’t accommodate it), large background images where it does not compete with the content.

Mobile design

Mobile websites are no longer just text-only alternatives made available via plug-ins. Today, responsive designers create separate mobile editions of the main website with their own set of rules and technologies. Swipe-touch, no hover effects, fluid width and feel, and many different device viewport sizes. With the huge increases in the number of mobile smartphones and tablets we’ve seen already, and no signs of slowing growth in this area, mobile website design has become a critical component of most website projects. Let us show you how we can turn your site into a mobile friendly one.

Minimalism

This one evolved, too. It is not your old black and white layout with lots of white space and one font. New minimalist is rich and sophisticated in a subtle way. Make everything as simple as possible, but not simpler. Simple is Good. Minimalist design pronounces clear message, right to the point, without clutter. One-page websites are part of this philosophy.

Perspective / 3D

More designers will favour 3D designs over the more traditional desktop perspectives. We’ll see more side-shot perspectives that make the page more attractive and adhere to a more realistic view, as long as it still shows well on mobile devices. It may include rich surfaces, where applicable.

Fat footers

We seem to have reached agreement not to throw things that didn’t fit into the main navigation menus into the footer any longer. Fat footers are now designed for richer content, personalized experiences and desirable extras; not as overflows for the main content.

Interactivity

Is not going away, but it becomes more embedded in context. Interconnected with social networks, includes modal boxes with facebook sign-ups to site, sharing what you surf or watch (scary, isn’t it?), interacting with corporate sites in a game playing way.

Built-in activism

Fairness, environment and community involvement interlaces with business models of many new startups. We are going to see more of it, in times of suppressed economical growth.

Typography

This subject has been discussed in new year trends for some time now. Makes you think that designers are yearning to distinguish themselves with funky fonts, no matter what the technology cost. Keep in mind that non-standard fonts are mostly not compatible with a diversity of Internet devices.
Slab Typefaces – all capital letters, bold and imposing, as in western’s ‘Wanted’ posters have their purpose and strong place as elements of design in the new year, but not as a main theme.

In new design elements trends, one very visible one is Quick Response, or QR codes. They are being used more, especially with their associated digital art. Taking advantage of the huge amount of information that can be crammed into the small area of the code, QR codes are popping up everywhere including on small merchandise objects, real estate, business cards, T-shirts, wearables, tatoos, and street advertising. Another visible trend is metamorphism or otherwise called mutant advertising, which is using mutant human appearances to exaggerate advertised message, which are then remembered for longer periods.

Color schemes are very utilitarian, with modern neutrals, grays accentuated with red or orange, and some blueprint inspirations. Greens reflect organic influences in references to anything environmental. Large imagery fills sites with lots of vibrant, stunning colors.

So there you have our take on website design trends for 2012  - and don’t forget that facts and opinions blur all the time: the only reality is our own.

Mobile website first?

Posted on by haga

Your website does not look correctly on 4S?, on other smart phones neither? In fact, it does not even load? Oh, no… What are you going to do?

We first create a website, and then ‘adapt’ it to mobile website, viewable on mobile devices. And how are we doing it? There is lots of ways: mobile plugins, responsive design, conditional css, using grid etc. You can look it up… Shouldn’t though mobile version be created first and given the right to it’s own set of rules and best practices, before treated as hand-me-down version of something bigger and better? You’re right it should!

It may seem like a nuisance to design (and more importantly, maintain up-to-date) a separate mobile website just for mobile devices, but it does make perfect sense, if you know how websites and servers work.

You may think that when the code detects small device, just execute ‘display:none’ for complicated elements and resize your high resolution images and everything will be all right. What about beautifully designed block menus, sparkling with colors on ‘hover‘, centered across fixed width template? What about sophisticated backgrounds and elaborate horizontal galleries? Plugins to popular content management software are well developed to take care of most challenges with mobile web design, but here is something to think about:

Responsive design wakeup call: not displaying large element on a mobile device does not prevent it from being download anyway! What does it mean? Simply, all large files still have to end up on a mobile device before the pages are displayed, even when these large files are already coded to not being shown. It has been proven by looking at the server log files.

Why it matters? Because mobile devices work not on a broadband cable or fiber internet connection like standard computers, but on telecom data packages that have much smaller capacity and are more expensive per megabyte transmitted that way.

It does make a lot of sense to design separate mobile site. Mobile devices are gaining market share as a primary internet channel and cannot be ‘adapted‘ from your main website any longer. Mobile users have specific needs that need to be addressed to sell your products, services, ideas and information.

Focus on one transaction is base of a mobile experience. Content overload has no place on a small screen.

Because of touch screen capabilities, various operating systems and technology, color or greyscale screens – Say NO to:

  • Flash
  • Fixed-width layout
  • Complex navigation paths with submenus
  • Playing with hover features
  • Low contrast designs

Remember:

  • Less is more
  • Engage better with focused interaction
  • Use simpler interface, text rather than logos with details
  • Forget about partner promos, loosely related links, multiple sponsor logos, big ‘About’ pages and fat footers – too much content
  • Click on button evolves to touch-and-swipe – be open to NEW

And face it: Your website cannot be all things to all people.
Its functionality and convenience are more important for the best consumer experience than haute couture look and reference library stack of resources combined.

Website Accessibility

Posted on by haga

website accessibilityWebsites of the companies that offer goods or services to the public in Ontario must be accessible to people with disabilities. If you have at least one employee and offer goods or services, you are legally required to comply with the Accessibility Standards for Customer Service. Private and non-profit sector organizations will be required to comply by January 1, 2012.

So is your website’s content accessible?

Here are some considerations that need to be addressed in order to achieve accessibility standards. First: don’t despair – there are resources and organizations that can evaluate your website and guide you through fixing most of the problems found.

To make your website accessible, you need to keep in mind that not everyone is using mouse and not everyone has good vision, in addition to computer hardware and internet connection limitations. There are variety of devices that want to “see” your website, like screen readers, audible enhancers, tablets, mobile phones etc.

We will not discuss old browsers and operating systems. The pointers below will only focus on design layout and development guidance that includes people with disabilities and compliance with provincial standards.

Basic issues that need to be addressed are quite simple:
Text size, contrast, keyboard-only navigation, descriptive images and links and content access.

Text size:
Make it easy for the viewer to increase the text size at will, without breaking your tediously developed layout. Check it easily on your finished site by clicking CTRL+ good few times and verifying that it actually changes the font size.

Contrast:
Strong contrast is required between text and background, and that includes visited links, hover attribute and all of this. Test it by taking screenshot of the site’s front end and viewing it in grayscale only. Better yet, ask a senior if he/she can see your website’s content easily. Maybe your designer’s choice of colours was not that cool after all.

Keyboard only navigation:
Not everyone can use mouse to navigate your site and make selections on the screen that seem normal to able bodies. Test how someone using only keyboard can get to the choices you provided for viewers, including all links and form controls.
In many sites created with Content Management Systems for instance you can’t select any of the submenus with a keyboard only. Find alternative ways of navigation. These may include skipping submenus, displaying submenus as main menu in the content of all top level pages, using access keys or tab index etc. Also: stop using the tables already!

Descriptive images and links:
Think about it in terms of the TV’s descriptive video feature. Visually impaired viewers want the images described to them, not missed. To describe your images and links you may use alt and title attributes, tooltips or note boxes. Provide text alternatives for images and audio. And yes, you – Flash developers, are on your own. Good luck with that!

Content access:
This last part deals with screen resolutions and horizontal scrolling. Test that your content is visible on variety of screen sizes and does not require any horizontal scrolling. If you have pdf documents for download, they should be text, and not image based. Scanned and pdf-ed manual or designer-style brochure where you can’t select text, won’t cut it.

Finally, do you know that besides GUI browsers like FireFox, Chrome, Safari or Internet Explorer, there are also non-gui browsers, like voice browser or text browser? Does your website make any sense in one of those?

Isn’t it time you talked to your boss about the accessibility standards implementation deadlines?

For more details on subject, google accesibility standards, WCAG, AODA.

How html5 can benefit you

Posted on by haga

html5 will reach full recommendation status in 2022, so why talk about it now?

html5 specs

Well, thanks to a push by Apple and Google – html5 is already a strong, practical implementation. Some parts of it are more mature than others, and can be used today. With the release of IE 9 (currently in late beta state) it will have the support of all major browsers. It can make flash developers a littlenervous, as it makes advanced presentations possible with just html, easier editable by site owners than flash sites.

What are immediate benefits?

For website owners:

Html5 provides you automatically with great outlines of page content, and packs some suitable parts of it (like full articles), ready for independent distribution across the net.

Its better handling of coding errors ensures your site does not choke on some browsers or platforms.

It lays the foundation for using rich media.

html5 makes it easier for search engines to pick up the essence of your content, although html5 tags are not treated in any different way than previous html versions.

Your website automatically displays gracefully on mobile devices (iPhone, Android) without making separate website versions.

For website developers:
The specification for html5 is 900 pages long, but don’t let this put you off – it’s more of an evolution than all new things to learn. What’s most important, thought, is that it’s backward compatible. Whatever you coded previously will still work. You have an opportunity now to experiment  with the new elements and add through progressive enhancement.

New elements, like article, section, aside and nav add meanings to page structure.

You know how complicated doctypes can be and how difficult they are to remember or get right. Now there is one doctype: <!doctype html>. That’s it – so simple!

Html5 is focused on creating consistent user experience, so no more multiple versions of the same site to ensure they work in all browsers. It features detailed algorithms for parsing errors, so your site will display gracefully even with errors.

Html5 reduces the need for 3-rd party tools and plug-ins. Most nice effects are handled in native language.

Once major players decide on which video codec to designate as open standard (legal issues pushed this currently further into future), it will handle videos with one simple tag. The battle is between h.264, ogg theora and VP8 web video standards. You are still able to use simplified video tags right now.

It features integrated APIs: audio, video, offline apps, editable, drag&drop, history, protocols.

And don’t be fooled – these are not html5:
Every new browser trick presented by an individual company, css3 transitions, web sockets, geolocation, svg, css @font-face.
Michael Mahemoff (@mahemoff), famous software architect with 23 years of programming experience said – “html5 is a brand”.

Play with it:
http://www.html5rocks.com/
http://diveintohtml5.org/

Brad Neuberg, former Google developer, says about html5 usage: “Small pieces, loosely joined,” and shows how technologies such as HTML5, CSS3, SVG, canvas and geolocation can be used together to create stunning applications within the browser. Flash is not a must.

Various browser manufacturers seem to be racing each other to incorporate support for html5 as quickly as possible.

In the midst of information evolution

Posted on by haga

A decade ago people were proud to have a website. Today, as of July, 2010, there were more than 768 billion distinct domain names. Every one of them scrambling to get noticed. Search engine optimization has become pseudo-science, reinforced by college courses and expounded upon by hundreds of eBooks. Many white and black hat techniques have come and gone, following the evolution of the search engines algorithms struggling to separate reputable content from aggregators of someone else’s content or just plain chafe.

A decade ago websites equalized small and big businesses. Published material on products or services on the web told a similar story regardless of whether you were a one-man-band or a large company, unless, of course, it represented a famous brand. Today money and resources differentiate businesses again.

With the rapid evolution of technology we now see a spectrum of websites – from one-page brochures to the Content Management System equipped websites of mid and large companies, to sophisticated websites with complex back-end databases and automated analytical processes. Some websites today are equipped with marketing automation systems that record the digital footprints of visitors across the site, and determine the quality of prospects based on their activities on the site.

And lately, big and small business are using social networks to sell their products in direct and indirect ways on Facebook and Twitter.

The Internet is now used on mobile phones, tablets, appliances and via other devices on our TV sets. It reaches into our  kitchens, cars, schools. It’s used for medical care and government-community interactions, and even by law=enforcement and the judiciary.

The architecture of the Internet is extremely diverse today. So many languages (verbal, written and programmed code), connection types, networks, forms, just about everything… It’s a lot like modern architecture itself: Advanced models are turning architecture into signage instead of placing signage on the architecture.

So, is your website serving your business model? Would you like a second opinion?