New Website for Evolve – We’re Really Proud of This One

Evolve Kitchens approached us a while ago looking to build a new website that was optimized to rank the second it launched.  It is always a fun challenge to integrate the culture of a company into a website, and Evolve made it easy with a wonderful body of work to draw from. Their gallery of kitchen cabinets is awe-inspiring.

Here is a capture of their website before they came to us, pulled from the Wayback Machine.

Evolve kitchen's old website about kitchen cabinets.

Evolve Kitchen’s Old Website

It had a few problems affecting its performance.  It didn’t fill up modern screens and was hosted on an old server that made loading times longer than they should be.  It was built using a now defunct Apple web design program, causing huge headaches to make even the most basic of updates.  The navigation was clunky and hard to follow.  It wasn’t mobile responsive.  In short, it was very lacking the areas that define a modern, well-built website.  It needed a complete overall, and we were excited to build them something new from the ground up.

Many hours of hard work later, our design team produced this beautiful new website:

Evolve kitchen cabinets new website

Evolve’s New Website

This modern website reflects Evolve Kitchen’s exceptionally high standards for good quality and good design – values that we share and were happy to infuse into their site.  Our mission was to create for Evolve the same feeling of walking into a kitchen of beautiful new custom made cabinets, when customers entered their website.

While also being mobile responsive! Here is what their site looks like on a phone:

evolvemobile

You too can get your website problems solved at Ducktoes Web Design.  With us, you’ll receive a website design that is visually appealing and displays your strengths and corporate or company culture and also is fast and looks good on any screen.

Facebooktwittergoogle_plusredditpinterestlinkedinmailFacebooktwittergoogle_plusredditpinterestlinkedinmailby feather

How to Make your Site Mobile Friendly

Intro: Why Make your Site Responsive

by Joshua Van Oosten – Web Developer at Ducktoes Computer Services
With the growing number of people surfing the web on smart phones, tablets, TV’s and even car dashboard displays, it’s never been more important to ensure your website is usable on any size screen.

Responsive Website Desktop View

Desktop View

Responsive Website Tablet View

Tablet View

Responsive Website Smartphone View

Smartphone View

Here is the Calgary plumbers’ site.

Important for SEO

Being mobile friendly is also important for search engine optimization. Google and other search engines don’t want to send people on smart phones to mobile unfriendly sites. If your site is not mobile friendly it will be less less likely to rank.

Select a Mobile Responsive Theme

If you are building a website using a CMS (Content Management System) like WordPress (or another CMS like Drupal or Joomla!) it’s as easy as looking for the word ‘Responsive’ when selecting a theme.

Mobile Friendly Html/CSS

However, if you have a website that is built using custom HTML (HyperText Markup Language) and/or PHP (PHP Hypertext Preprocessor – yes really) it might be a little more complicated, and often times the ‘themes’ are created by hand using CSS (Cascading Style Sheet).  If this is the case with your website, and you would like to learn how to make your website look good no matter what the screen size the user chooses to view it on, then you have come to the right place.

The Viewport Meta Tag

The first, and arguably the most important, thing you will want to do is to include the viewport meta tag in the < head > of your document :

< meta name=”viewport” content=”width=device-width, initial-scale=1.0” >

This meta tag tells the browser to scale the web-page to the size of the viewport (the area in the browser where the web-page is visible).  Keep in mind this does not include the bookmarks bar or the url bar or the browser ‘frame’ usually called browser chrome (not to be confused with the Chrome browser, but this is where google got the name for their browser).

It is recommended to build your website CSS styles for smaller screens first and then build up to larger screens.  The reason for this is that the browser loads the HTML and CSS from the top down (hence the Cascade in CSS) so the mobile styles are applied first.  This is important because it is possible that a user viewing your page from a smartphone is accessing your website via a slower 3G or EDGE internet connection.  Anyone that has ever used these connection types can testify to how painfully slow they can be.  So if we are loading the mobile styles first, the perceived load times seem faster and the person viewing your page can start using it much faster than if they first have to load the desktop version, then the tablet version(s) and finally the mobile version.

That being said, if you already have a desktop version and are just looking to scale the page down for mobile, read on.

For the sake of simplicity, we are not targeting older browsers (IE 9 or older versions of Internet Explorer)  However, if you would like to accommodate these aging technologies, there are resources for doing so.

Media Queries

This is the bread and butter of mobile responsive styles and they look something like this:

@media only screen and (min-width:400px) {
     /*styles for screen sizes no smaller than 400px wide*/
            div.content {
            width: 100%;
           }
}

Essentially what this does is tell the browser to apply the styles declared within the media query ONLY if being displayed on a screen (as opposed to printed from a printer, or read from a screen reader) and only if that screen has a resolution (size) larger than 400 pixels wide.

 

Conversely you could use:

@media only screen and (max-width: 1920px) {
      /*styles for screen sizes no larger than 1920px wide */
            div.content {
            width: 100%;
            }
}

This tells the browser to apply the styles but only if the screen resolution (size) is smaller than 1920 pixels wide.

**It is important to keep in mind that any styles declared before the media query will remain, you do not need to reapply styles that do not need to be changed (like font color for example).

There are other parameters that can be applied, for example you could target:

(max-width:1000px) and (min-width:500px) { … }

Applied only if the resolution is between 1000 pixels and 500 pixels.

Or

(orientation:landscape) { … }

Applied only if the browser viewport width is greater than it’s height.

More information.

Relative vs Absolute Values

Images

When creating styles for many different screen sizes it is recommended to use ‘relative’ units (like % or rem) instead of absolute units (like px or pt).  For example, images don’t look so good when they grow out of the content on smaller screens or shrink to postage stamp sizes on larger ones, so we would use something like :

img.full-width {
            width: 100%;
            height: auto;
}

Applying this class to our image tags will guarantee that the image will scale nicely as the screen width changes.  The image will always fill the entire width of it’s parent element and maintain it’s aspect ratio.

Content Areas

It is not uncommon for a webpage to have a main content area with a sidebar next to it.  In this case I would recommend you use something similar to the following:

#sidebar {
            float: left;
            width: 25%;
}

#content {
            float: right;
            width: 75%;
}

 

When the screen size gets too small to accommodate both sidebar and content areas next to each other you could declare something like the following:

@media only screen and (max-width:500px) {
      #sidebar {
            float: none;
            width: 100%;
      }

       #content {
            float: none;
            width: 100%;
       }
}

Now when viewing on a screen with a resolution of 500 pixels wide or narrower, the sidebar and the content area will stack above or below each other (depending on the flow of the HTML).

 

All About Breakpoints

A breakpoint is where our design tends to “break” because the screen resolution (size) gets too big or too small.  It is at these breakpoints that we create our media queries.

Ideally you would want to target at least three breakpoints: Desktop:1024px, Tablet:768px and Mobile:425px, but often more are needed.

It’s a good idea to load your page in a browser with a plugin like ‘Window Resizer’ that has many popular screen resolutions pre-loaded that you can choose with the click of a button.  But it also provides a handy little display at the bottom of the browser that displays the current viewport and browser width and height (don’t forget the viewport is the browser without the chrome). This allows you to simply resize the browser, watching for when things start looking bad, then create a media query based on that width.  Don’t be afraid to create a media query that is used only to change the font size in order to prevent widows (very short lines at the end of a paragraph or column) or orphans (short lines or single word appearing at the top of a page or column), or to prevent your navigational elements from wrapping creating extra space.

Conclusion

This article is by no means an exhaustive guide to creating a mobile responsive web page.  I do hope you also take some time to check out the links below to gain a more comprehensive understanding of the technologies and techniques used by professionals to build responsive sites that are compatible with any device/browser combination.

If you need help with your computer or website, Ducktoes.com is your one stop solution.  Check out our website for great deals on desktop computers, laptop computers, computer accessories, website redesigns, new websites, SEO, computer and laptop repair, virus or malware removal, and data recovery.

Links:

http://www.w3schools.com/css/css_rwd_viewport.asp – w3schools has a lesson chapter for the viewport meta tag, and is a great place to learn everything there is to know about web technologies. The lessons on the site are written in a way that even the most novice of users can understand.

https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/ – Let Google teach you how to build a responsive website using best practices that can even help with your Search Ranking.

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries – Mozilla Developer Network has a very comprehensive guide on media queries.  The guides found here are more technical, but if you’re up for the challenge this site can greatly expand your understanding of building amazing websites.

https://modernizr.com/ – Modernizr is a lightweight bit of javascript you can customize and include on your website to make it easier for you to accomidate older browsers that don’t support newer technologies like media queries

Window Resizr – Download and install this Chrome extension in order to emulate various screen resolutions at the press of a button. It’s perfect for testing your website layouts for a variety devices in different orientations.

Ducktoes Web Design (Calgary Web Design) can make your site mobile responsive. Contact us today for a quote. We also do SEO for Calgary businesses.

Facebooktwittergoogle_plusredditpinterestlinkedinmailFacebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Ducktoes is Responsive Now

Ducktoes Computer Services is well known for being responsive to our clients. We’ve created a warm, inviting place of business that works hard at fulfilling the clients’ computer repair and website needs, while respecting and enjoying the clients as the wonderful people they are at the same time.

But now we’re responsive in a different way too.  We now have a mobile-responsive website that looks good on any size screen from smart phones to large monitors and tvs.

This is what our site used to look like on smart phones:

Our website before it was mobile responsive.

As you can see, before we made the site mobile-responsive, it was difficult to see  and to navigate from one page to another. You had to scroll sideways as well as up and down to see the whole page.  It did not function well for visitors.

This is what it looks like now:

post-mobile-responsive

Look at the difference! Being mobile-responsive makes a dramatic improvement for use with smart phones and tablets.  The links are easy to touch click on.  There is only vertical scrolling going on, no horizontal.

The Ducktoes web design team can also apply these mobile-responsive skills to our clients’ websites, making them look good and function well on any size screen too.

Click here to view Calgary plumbers Quicker Rooter’s site.  We took their existing plumbing and drain cleaning site and made it mobile-responsive.

We can do this for your site too.

Your website needs to be mobile-responsive so clients searching on their smart phones or tablets for your services and products will be able to find it easily.  Mobile-responsive sites rank higher. More importantly, when they arrive on your site they’ll be able to easily touch click anchor text and icons and view your services and products with ease. They’ll surf your site without having to awkwardly zoom in everywhere by trying to spread their thumb and index finger on tiny screens.

Being mobile-responsive is being responsive to your clients’ and potential clients’ needs since it makes your website easier and more convenient to use.  It shows consideration for visitors to your site. It will improve ranking in search results, especially with mobile searches. and decrease bounce rate improving your SEO.

Please visit our Calgary web design services page for more information.

Facebooktwittergoogle_plusredditpinterestlinkedinmailFacebooktwittergoogle_plusredditpinterestlinkedinmailby feather

New Web Design: Oil Spill Group

Here’s our newest web design for an oil spill preparedness group in Saskatchewan. It is a straight-forward informational site for their members.

Need more information on our web design services? Click here.

Facebooktwittergoogle_plusredditpinterestlinkedinmailFacebooktwittergoogle_plusredditpinterestlinkedinmailby feather

How to Attract People to your Website

Attractive web design is symbolized by  tattoo arm offering a pinkish purple flower to a pretty young woman.

To attract people to your website you need one or more of the following:

  • SEO (Search Engine Optimization)
  • Advertising
  • Referrals (Word of Mouth)
  • A Great Website

Search Engine Optimization

You need search engine optimization to increase your rankings in search results.  Otherwise no one can find you.  The most important ingredient of SEO is having great content and information on your site that people genuinely need.  If you fulfill that need, the search engines will be more likely to include you in their results.

Sometimes good content is not enough, however.  You can have a beautiful site, oozing tons of good content, but still stay on the back pages of search results.  That’s when citations or links to your site from important and highly-ranked websites are vital.  Search engines prefer naturally occurring citations, so if you build links they must be white hat and within Google’s or the other search engines’ accepted practices.  Equally important is onsite optimization, making sure descriptive words about your services and products are part of your text and meta-description and alt tags.

A competent search engine optimization company will help you do all this to get higher rankings or you can learn how to do it yourself.

pagerank

Advertising

An immediate way to get more traffic to your website is Pay Per Click ads.  These are ads that appear when people search for keywords specific for your website.  They appear above or alongside organic search results.  You bid against your competitors for how high your ads appear on the page.  Google, Yahoo, and Bing all have these types of ads.  An internet marketing company can help you do pay per click if you don’t know how yourself.   Ducktoes does this all the time. You can also get Google AdWords staff to help create and post your ads when you sign up.

 

adwordsphoto

Print ads, billboard ads, Yellow Pages, snail mail postcards and flyers, bus bench ads, radio and television ads, and local grocery store receipt ads are all ways of getting your website known if you display your domain name prominently within the ad .  I have found these ads less effective at bringing visitors than Pay-per-Click but they do help get more people to your website.

You can also pay for likes on your business Facebook page or Facebook boosts.  These likes are usually people genuinely interested in your products or services. They are a receptive audience for your promotional posts because they already like and “like” you.  You can also now get Twitter ads.

Referrals

Word-of-mouth referrals and reviews after experiencing your great service are also and excellent ways of getting more traffic to your website.  Google plus, Facebook, and Yelp all have reviews of your business online.  The downside is that competitors, cranks, and even people who haven’t been to your business will from time-to-time write false bad reviews. Dealing with bad reviews can be disheartening and time-consuming.  It is important to stay upbeat in your responses and use your reply as an opportunity to show how professional you are and to use the reply to advertise your customer service skills and goals.

A good reply to a bad review should be as follows:  “I’m sorry to hear of your bad experience. Please contact us at the shop at your earliest convenience and let us make it right for you.  We are known for our excellent customer service, friendliness, and expertise and are constantly looking for ways to improve it.”

Social media and emails of people suggesting places they like to their friends are also word-of-mouth referrals.  Being the best business you can be and genuinely caring about your customers is the optimal way to get this ball rolling.

SEO, a great website design, and great customer service all promote a business.

Your Own Website is your Best Advertisement

After you attract people to your website, your site must be able to persuade them to become clients and to buy your products and services or buy into your message or information if you are a non-profit or service organization.  This is called conversion.
Young attractive woman doing a self-portrait with her digital ta

To make conversion happen you need to ask yourself what needs your clients have and then emotionally engage and address those needs with great photos, graphics and text.  They need to identify themselves and see the solutions to their needs and problems represented in your website.  You must provide a call-to-action on every page.  An example of a call-to-action is “Call now (or click here) for more information.”  If you have successfully engaged your clients emotionally, then they will be much more apt to call or click on the call-to-action button.Buy Now Orange

Great, attractive web design is a key element here.  Easy navigation, catchy phrases, good content, striking photos and graphics all serve to foster conversion and more business.  Photos are needed because text alone can look unappealing, dry, and is too easy to skip over without making any impact.  A great photo strategically placed with a catchy phrase can immediately attract and win over the potential client.

Facebooktwittergoogle_plusredditpinterestlinkedinmailFacebooktwittergoogle_plusredditpinterestlinkedinmailby feather