Cherry Pie Appreciation

Last week our client Susan Goldsmith brought us a cherry pie to thank us for the computer repair we did for her. Yesterday she brought us homemade carrot cake.

Computer repair client.

I told her in the interest of weight management, we’d no longer be able to fix her computers. No, not really, we love people to drop by the shop for a visit and a cup of coffee or tea, with or without baking.  It is so wonderful to be appreciated. The cherry pie went so fast I almost didn’t get a photo before it was gone.  And if you’re wondering why, I think that foot in the bottom right of the photo belongs to Liz our SEO Calgary coordinator. Unfortunately, I didn’t get evidence of the other feet from the techs downstairs and the web design staff.

cherrypiefor-computer-repair

Our computer repair department has been extremely busy the last couple of weeks.  We are so grateful that so many Calgarians trust us to repair their computers.

Thank you Susan for being such an awesome client and giving you your business and appreciation.  We appreciate you and our other clients in return.

 

Facebooktwittergoogle_plusredditpinterestlinkedinmailFacebooktwittergoogle_plusredditpinterestlinkedinmailby feather

How to Update AVG Free without Zen and PC Tuneup

Floppy disks and cassette tapes are outdated.

Our Ducktoes online tutorials section is outdated. Maybe not as outdated as the floppy disks or cassette tapes above, but it’s getting old and not as useful as it once was. So I’m rewriting all of the tutorials. (Yes, I’m writing a computer repair tutorial on a holiday weekend, or maybe because it is a long weekend.) Also here’s the nude photo of floppy disks, an extinct storage species, I promised you.

I started with the Ducktoes online tutorial “How to Update AVG Free.”  Many of our clients and others don’t know how to update their AVG Free. The tutorial outlines a step-by-step process of updating AVG, plus download links for AVG Free software without the Zen or PC Tuneup. I revised it from the 2013 version to the 2016 one. Check it out.

freeantivirus

Why don’t we like the PC Tuneup part of AVG Free? In our virus removal lab at Ducktoes we’ve seen the PC Tuneup break operating systems when some clients install and run it on their own computers.

As far as the Zen part of AVG goes, according to PC Advisor, “AVG Zen is multi-platform software that allows you to view and administrate your antivirus and tuneup utilities across PC, laptop and Android smartphone and tablet. It lets you control your PC security from your phone, and it’s free, but it ties you to AVG.”

You may not want AVG on all your devices. For that reason, we don’t use the Zen part of AVG at Ducktoes either.

real-world-protection-test

As you can see, in the test results, AVG blocks the most viruses with the fewest false positives.

Ducktoes does an awesome job at virus removal.

Speaking of virus removal, we do an awesome job of removing computer viruses at Ducktoes. We remove them without reformatting so you don’t lose your data, photos, or programs. Then we speed up your computer.

If you need virus removal, done quickly and expertly, come to our shop or call:

Ducktoes Computer Services
902 Centre St. N
Calgary, AB T2E 2P7

403-219-3031

We also do remote support for virus removal if you can’t bring your computer to us. If the virus allows you to connect to the Internet, that is.

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 of Calgary can make your site mobile responsive. Contact us today for a quote.

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

Come See our 3D Printer

Exciting News
Ducktoes now has a 3D Printer at our computer repair shop in Calgary!!  It can make 3D objects based on a 3D computer drawing of a model.

We Made a Duck
We made this blue plastic duck (Ducktoes duck) with our 3D printer (see photo below) and many other things.

3-D printer and plastic duck

Totally Captivated
Our heads are turned. We are totally captivated and playing around with it all the time.  (The printer not the duck.)  I have to keep yelling at the techs to get back to work.

This is Not the Entire Truth
Actually the techs are totally consumed with their work almost all the time, even when when I want them to relax a bit, even when I order pizza.  I have to pry them out of the basement to get them to eat. I yell downstairs with dire pizza announcements, such as “Hey, you guys, the pizza is getting cold!”  Or if that didn’t work, with: “The customers are eating all the Hawaiian; all that is left is vegetarian!” etc.  Ducktoes techs love their work more than food, it seems, a good thing. They also love the 3D printer.

How it Works
Before you print, you have to make a 3D model with 3D modeling software. The printing uses a process called slicing which divides the 3D model into hundreds or thousands of horizontal layers. The slicing of the model is also done with software. Each slice is printed with a layer of plastic. The printer prints each slice layer by layer, by laying down a layer of plastic on top of another over and over until the object is complete.  The plastic comes out of a large spool, on a long plastic string. It is fascinating to watch so come to Ducktoes Computer Repair Shop in the afternoon to see for yourself.

Printing another Printer!
Now we’re printing the 3D printer parts so we can print another 3D printer with our 3D printer.

See the Printer in Action (and can you guess what it is making?)
Here’s the printer in action.  A video taken by my son Ben Trigueiro.  If you figure out what it is making, please don’t tell anyone since our loyalty might look suspect.  If you must know, we did make the Flames one first, and that’s also a clue. Okay, you can tell…if you can figure it out.

We Love New Technologies
At Ducktoes, we love to try out the newest technologies and expand our knowledge and skills.

If you’d like your own 3D printer, you can order it through us.

Please Leave a Comment
I’d love it if you leave a comment below to tell me and us what you think. That would be so cool. Or really do stop by and see it for yourselves at 902 Centre St. N.

Computer Repair
If you want to bring in a computer for repair, just stop by or give us a call at 403-219-3031.

 

 

Facebooktwittergoogle_plusredditpinterestlinkedinmailFacebooktwittergoogle_plusredditpinterestlinkedinmailby feather