Web Design

WordPress Theming

Delving into WordPress themes

/ Web Design / By

The way that I design websites has evolved over the years. From simple HTML written in Notepad to custom websites coded in programs like Dreamweaver to the use of content management systems such as WordPress. Each method has it’s pros and cons and the demands of my target audience have often been a key factor in how I design my websites.

In the beginning

Pen

When I started creating websites I would code everything by hand. I would also create my own graphics and learn to code whatever functionality was required. As you can imagine this was a time consuming process and required proficiency in many related disciplines – web design, web development and graphic design. I enjoyed doing this though because it allowed me to learn a lot and the end product was always unique. The downside was that it took a lot of time to roll out a website and would also cost more than a template based approach. Allowing clients to update their own content would require the creation of a content management system or the use of a software solution such as Adobe Contribute (since discontinued).

What works now

Tablet layout

Nowadays, nearly every client I come across wants control over modifying and updating their website content in-house. The simplest way of doing this is with a content management system (CMS). There are numerous options when it comes to choosing a CMS but I find that WordPress is one of the easiest to use and manage. As a result of this, I design quite a few websites using WordPress. There are a lot of themes and plugins available for that platform which makes getting a website up and running much quicker than if I had to code from scratch.

Merging both worlds

Pen + tablet

While content management systems make life easier, they can also give websites a cookie cutter look and feel that lacks originality and does not stand out. Just imagine another website using the same theme and layout and you can see how brand recognition can be affected. While themes can be tweaked and CSS can be modified, I am exploring the option of creating my own WordPress themes for both personal use and for my clients. This will bring back some of the originality of a hand coded website while keeping the valuable content management aspects of WordPress.

The journey continues

Ellipses

As I delve into the world of WordPress themes I have been directed to valuable resources for developing a new theme. Underscores is a starter theme which allows you to set up some basic details about your theme even before downloading it. I also intend on spending some time in the Theme Development section of WordPress Codex.

The end result of all this will hopefully be a more unique look and feel for my personal sites and business websites along with those of my clients. This is an interesting challenge and any feedback or tips are always welcome in the comments.

Google Analytics Skewed Results

Fixing metrics skewed by bots in Google Analytics

/ Web Design / By
Seamalt Block

While checking my website statistics in Google Analytics I noticed something very strange. The bounce rate (percentage of visitors that leave the website after visiting only one page) had increased significantly for a number of websites I manage. I had never before seen a bounce rate higher than 90% on any of my websites, so I decided to investigate. The culprit turned out to be a slew of “referrals” from the website semalt.com with each having a bounce rate of 100%.

Semalt claims that it’s bots crawl sites mimicking real users in order to “gather statistical data”. Since I have never signed up for Semalt’s “service” these visits are annoying and they skew the statistics that Google Analytics shows by default. The website offers a removal tool to have your website excluded from it’s crawler but some users have also claimed that this simply causes Semalt to try using alternative referral sites and may actually cause the crawling to increase in frequency.

I found a workaround for this referral spam problem on Google Groups. You can exclude semalt as a referral from all your websites or exclude Semalt as a referral from individual websites.  I chose to try out the filterring solution first of all and from early assessment it seems to be working. Besides semalt.com I also excluded kambasoft.com and savetubevideo.com since websites with from those domains were also creating referral spam.

Google Analytics Referral Exclusion

I will continue to monitor my website statistics to see if the problem reoccurs. If anyone has noticed similar activity I hope this workaround can help. If you have discovered a better solution please feel free to share it in the comments.

Domain Search

Switching domain registrars

/ Web Design / By

Namecheap websiteRegistering a domain is one of the first steps necessary to get your website online. A domain is the unique address that can be used to access your website over the internet. I recently moved my final domain away from GoDaddy – the domain registrar I started using when I first began designing websites. When I first began creating websites GoDaddy was among the cheapest domain registrars and by using coupons I could always get a discount on the listed price. The company however faces competition from many other companies both in idealism and price.

GoDaddy, like many other domain registrars advertises it’s suggested products through the checkout process. GoDaddy does this very prominently and you have to be careful not to purchase anything more than what you intend to. The user interface for the website has been infamous for being convoluted which has led the company to redesign the site. This has helped somewhat with the user interface of its website.  I have never had to contact the company with a problem so I do not have any experience with the company’s tech support.

I have gradually been transferring my domains to Namecheap and I recently moved my last one over. Despite wanting to keep some domains on a different registrar the benefits of doing this do not justify having to deal with different domain pricing and different control panels. The .com domain names are cheaper at Namecheap than at GoDaddy and the website is simpler to use. Since I design websites for clients the price point is an important selling factor. If one domain registrar disappoints the domain name can be transferred to another one so there is no threat of your website name being kept hostage.

Once the nameservers for your website are configured and the domain name propagates there is little interaction required with the domain registrar other than to renew the domain or update contact information. As a result of this the domain registrar you choose may seem trivial. I have selected the cheaper and simpler domain registrar and have not had any problems with them so far.

PHP Coding

Delving back into the code

/ Web Design / By

PHP CodingWhen I first started creating websites I did it all by hand without any WYSIWYG tools. In fact, I started coding in NotePad. Throughout the years I began using more sophisticated tools such as Dreamweaver and Photoshop and my design habits changed. My need for coding became more peripheral with the rise in popularity of content management systems. It is much easier and quicker to get a CMS site online than a hand coded one.

There are many advantages of hand coding websites which cannot be replicated by pre-existing solutions. Coding yourself gives you the most control over how the website actually works and this allows you to uniquely address clients’ needs. Coding allows for maximum customization.

I am therefore taking a renewed interest in the code behind the applications that I deliver to clients of SeizerStyle Designs. I do not intend to code everything by hand, but I would like to provide more unique web applications. Hopefully this will create some interesting new projects that will challenge me and benefit my clients.

 

 

Featured nathvibe brand

Migrating from Flash to HTML5 video

/ Web Design / By

HTML5 Multimedia PerformanceI spent the better part of the last few days migrating some multimedia learning aids from Flash to HTML5 video. Flash was suitable a few years ago when HTML5 was not widely supported by mainstream modern browsers but it now seems unnecessary for simple video playback.

Preparing for conversion

Since I had never actually used HTML 5 video before i had to do a little research. This led me to W3Schools. There I learned about the 3 supported formats of web video: MP4, Ogg & WebM. Each format’s support varies based on browser type. Since the source files that I had used to create the multimedia learning aids were not in any of these formats I had to do some conversion. To ensure cross browser compatibility I also realized that I would have to use more than one format so I chose MP4 and Ogg.

Converting Videos

Miro Video Converter screenshotTo convert the original videos I needed a transcoder capable of saving in MP4 and Ogg. This led me to Handbrake which I had used before to create MP4 files. Handbrake, however, did not transcode to Ogg so I continued to search until I found Miro Video Converter (be sure to opt out of installing additional toolbars during installation if you only want the video converter). Using these 2 tools I was able to convert all my video files to both MP4 and Ogg files.

Editing the code

Editing the HTML code using the <video> tag was very straight forward and produced much less code than the previous Flash embedded approach. I included both the MP4 and Ogg files as the source files for the video and  included a courtesy message for browsers that do not support HTML 5 video. Since the multimedia learning aids are being used in an environment where the hardware and software is standardized and all browsers support HTML 5 I did not include a fallback to the Flash versions of the videos. I tested the videos using Safari and Firefox on Mac and they played properly in both browsers.

Conclusion

HTML 5 code is simpler to understand and creates smaller webpages than those used to embed Flash into websites. Videos have to be converted to a suitable format or multiple suitable formats for maximum compatibility across browsers. This leads to more video files that take up more storage space on the server but also results in a standards compliant website that does not need plugins to display content.