Tag Archives: html

Do You Need a Mobile Version of Your Site?

Posted on by Andrew

As mobile devices become more powerful and less expensive every day, the number of web users accessing sites via smartphones and tablets increases all the time. While most of the newer mobile devices offer web site rendering capabilities that rival those of a desktop computer; bandwidth, screen space, and processing power is often at a premium, so many site owners are creating specialized, low bandwidth mobile versions of their sites. This allows site visitors with mobile devices of all varieties to quickly and easily access their favorite pages from anywhere. But does your site need a dedicated mobile version, or will it suffice to have mobile users browse your website the same way as a desktop computer use would? The only completely honest answer is “it depends.”

To determine whether or not you need a specialized, mobile version of your site, ask yourself the following questions:

  1. Does your current site display and/or function incorrectly on mobile devices?
  2. Do users visit your site for the purpose of getting small pieces of current information in a rapid fashion?
  3. Does your business have a storefront which receives a lot of foot traffic?

If you answered “yes” to any of these questions, a mobile version of your website would likely be of great benefit to your business. If you didn’t, a mobile version of your site might still be a great idea. Suppose you’re ready to move forward with making a mobile version of your website; what do you do next? Depending on the platform your site utilizes, the process can range from extremely easy to fairly intensive. Below we explore a few methods of creating a mobile version of your site, based on the platform you are currently using.

WordPress

WPtouch Pro is an amazing plugin which quickly and easily creates a mobile version of any existing WordPress site. It costs $39 CAD for a single site license. The plugin packs an unbelievable number of features, and allows a site owner to have an attractive, functional mobile version up in minutes. Most importantly, the plugin doesn’t interfere with a WordPress site’s main theme; to a non-mobile user, the site looks and performs exactly as it did prior to activating WPtouch Pro.

Joomla!

Mobile Joomla is a free extension for Joomla which instantly creates a mobile version of your existing Joomla site. While not as full-featured as WPtouch Pro, it is still an excellent component, and allows a Joomla site owner to have a mobile version up and running quickly and easily. Like WPtouch Pro, Mobile Joomla doesn’t interfere with the site’s main (desktop) template.

Static HTML

Creating a mobile site from an existing static HTML site is a task that can be approached from several directions, depending on your design and functionality goals. Free and commercial services exist which automatically convert an existing site into a mobile site, however thus far I have been unimpressed with the results. Someone with basic HTML knowledge could easily create a (static HTML) mobile version of a site, however it would need to be manually updated each time content changes were made to the main site. A custom-developed solution may be the optimal method; a web design/development firm (such as Regal Creative) could provide such a solution.

Adjusting Your Existing Site to be Mobile-Friendly

Perhaps you don’t want to create a mobile-specific version of your site. Instead, you’d just like to make sure your current site is usable on mobile devices. The only way to know for certain is to test your website on several different smartphones and tablets, however these three guidelines will give your site the best chances of performing well on mobile browsers:

  1. Don’t Use Flash - While Flash can create dynamic and exciting web elements, it is not supported on several mobile devices, most notably the market-leading Apple iOS devices (iPhone, iPad, iPod Touch). HTML5 can be used in place of Flash as a modern, well-supported method of delivering multimedia content.
  2. Use Standards-Compliant Code - The majority of newer mobile devices rely heavily on standards-compliant HTML and CSS. If you are using non-compliant methods, proprietary IE-specific code, for example, it is more likely your website will not display correctly on mobile browsers. If you are unable to test your site on a variety of mobile devices, try viewing it on your computer using the (standards-compliant) Firefox, Chrome and Safari browsers. If all these browsers display your site correctly, it is likely your site will look fine on mobile devices.
  3. Optimize Images for File Size - Although keeping image file sizes down is a good idea for all web site owners, it becomes especially important when dealing with mobile browsers, as the bandwidth available to the visitor accessing via a mobile device is generally quite limited. To make sure your images are optimized for quick loading, always use the Save For Web option in Adobe Photoshop or Adobe Photoshop Elements when saving images for use on your website.

If you the owner of a website (whether it be a content management system or a static HTML site) and would like to create a mobile version of the site, contact Regal Creative. We can help you create a fast, attractive, and functional mobile site that your customers can visit anytime, from anywhere.

How to Use Custom Fonts on Your Site

Posted on by Andrew

Since the general public began using the internet in the 1990s, web designers and site owners alike have been frustrated by the limited number of typefaces available to them when creating websites. Despite the fact that most computer users have a multitude of fonts installed on their machines, the selection of typefaces from machine to machine varies greatly. A visitor to your website can only see the fonts you choose for your website if 1. they have those fonts installed on their local computer or 2. you embed the fonts into your site.

Some fonts are considered “web safe”, which means the vast majority of visitors to your site have the font on their local computers; therefore, these fonts can be used without any embedding. They are:

  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier
  • Georgia
  • Impact
  • Times New Roman
  • Verdana

“Wait! Our brand’s font isn’t on that list!” All is not lost. Font embedding makes it possible.

Cufón

Cufón is a font embedding technology which uses Javascript. It is a free, fast, and widely compatible solution. Best of all, it is easy to generate Cufón fonts from the font files on your computer, and free extensions to easily integrate Cufón into your Joomla or WordPress site are available. Although possible, it is not recommended to use Cufón for body text as it may result in slower site performance. Using Cufón for headlines and small blocks of text will not significantly increase load time.

Pros Cons
Easily convert your fonts (here) Slightly slower than @font-face method
Compatible with all modern browsers Not recommended for body text
Compatible with most mobile devices

CSS3 @font-face

The @font-face method works in all modern browsers without the use of any external scripts; it is even compatible with Internet Explorer all the way back to version 5. As it is native technology, the @font-face method can be used for body text, however the output can sometimes look pixelated on some Windows browsers, especially at smaller font sizes. Larger, bolder type typically looks good on all browsers. @font-face can easily be used with Joomla and WordPress, as well as standard HTML sites. TrueType (.TTF) or OpenType (.OTF) fonts can be used right out of the box, however for Internet Explorer compatibility, you must also create an .EOF version, which you can do for free.

Pros Cons
Easily convert your fonts (here) Smaller text sometimes looks pixelated
Compatible with all modern browsers
Compatible with most mobile devices

A Note About Licensing

The fact that you have a font installed on your computer does not necessarily mean you have the right to use it as an embedded font on your website. Always carefully read the license for the font(s) you are considering using, and check with the publisher if you are unsure. Font Squirrel offers a large selection of free fonts which do not have restrictions on web embedding.

If you need help utilizing your brand’s fonts on your company’s website, contact Regal Creative. We’ve helped businesses big and small keep a consistent brand via embedded web typography, and we’d love to do the same for your company.

Which is best for you, HTML or CMS?

Posted on by Andrew

Regal Creative, along with many other web design firms, produces two primary types of websites for clients: static HTML sites, and content management systems. While a visitor to your website may not notice or understand the difference between the two, the inner workings of the two setups are quite distinct. I will briefly explain each method of web development and compare and contrast, to help you decide which type of website is right for your company.

Static HTML Sites

HTML sites (also referred to as HTML/CSS and XHTML/CSS sites) are named for the computer language used to create them. HTML is what a web browser reads in order to create the graphical layout a website visitor sees on his/her screen. Under this setup, the web pages viewed by the browser are created one at a time by the web designer. To modify the pages (for example, to change the text content on a page), one must be familiar with HTML code; as such, website owners not familiar with HTML will not be able to make changes to their site on their own. As a service to our clients, Regal Creative provides free basic text changes to our web hosting customers.

Content Management Systems

Content management systems are powerful, expandable platforms that can be the driving force behind websites with anywhere from 1 to 1,000,000 pages. CMSs store content in a database and create the HTML pages read by web browsers on demand. Content management systems make it easy for website owners without a lot of technical expertise to add new pages, and modify existing pages on their sites. Another advantage of using a content management system is that it becomes much easier to add features to your website such as photo galleries, blogs, message boards, events calendars, and more. Popular content management systems include Joomla, Drupal, and WordPress (a CMS primarily intended for the operation of blog websites).

Static HTML vs CMS - Advantages and Disadvantages

Static HTML - Advantages

  • Very low to no setup cost
  • Low per page cost
  • Compatible with any web server
  • No inherent security risks

Content Management System - Advantages

  • Low per page cost
  • Non-technical user can add, remove, modify pages
  • Extremely scalable
  • Easy to add features (photo gallery, blog, forum, etc.)

Static HTML - Disadvantages

  • Not updatable by a non-technical user
  • Less scalable
  • More difficult to add features (photo gallery, blog, forum, etc.)

Content Management System - Disadvantages

  • Setup cost
  • Compatible with most web servers*
  • More security efforts required vs. HTML site

*Regal Creative provides web hosting solutions finely tuned to give all our content management systems outstanding performance.

Summary

Content management systems are great solutions for a website of any size due to their versatility, scalability, and client updatability. However, if your business website will be less than ten pages and contain only text content (of which you will only want occasional updates), images, and perhaps a contact form, a static HTML website may provide a lower cost solution. Regal Creative offers affordable content management systems and static HTML websites for businesses of all sizes. Contact us so we can help you determine the best web solution for your company.