Mobile Friendly Strategies for your Webpages
Intro: Mobile Friendly Strategies for your Webpages
by Joshua Van Oosten – Web Developer at Ducktoes Computer Services
It has never been more important to ensure a mobile friendly view of your webpages that is usable on any size screen with the growing number of people surfing the web on smart phones, tablets, TV’s and even car dashboard displays.
Desktop View |
Tablet 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 to achieve a mobile friendly view, 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 to create a mobile friendly webpage 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.
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.
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:
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:
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.
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.
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.
Great Meetup on SEO for Beginners Last Night
We had a great meetup on SEO for Beginners last night at the Rose and Crown on 4th St. 40 people turned out and we had a waiting list.
I presented on Google Search Console as the first step in learning SEO. Here’s a blog post about it if you’d like to learn too. If you read it please join in the discussion and post a comment.
If you’d like to join the Meetup go here.
Visit our SEO services page if you need more information on our online marketing offerings.
Encryption Virus (Again!)
Note: To avoid the encryption virus, please don’t open attachments on emails that are generic or suspicious in anyway. Please back up all your files every week or so and then detach the backup drive. If you do get the virus, please turn off all your computers immediately and call us at Ducktoes. 403-219-3031.
Encryption Virus Strikes Again
Ducktoes has again helped a client (web design and SEO client, not IT client) recover their files encrypted by an encryption virus. And again the client paid the ransom. They thought they could not successfully operate their business without de-crypting the files, since it would have been exorbitantly expensive or impossible to manually remake them all. They couldn’t even remember what all the files were, much less recall the content.
Try Not to Pay
If not absolutely necessary, I don’t recommend paying the ransom for decryption. If no one ever paid the ransom, the cyber-criminals would stop creating and spreading the viruses. But in this case, I totally understand.
How They Got the Virus
The clients got the virus through email. An employee opened an email attachment that purported to be an “invoice” but really contained one of the encryption viruses in the attachment. Once opened, the encryption quickly virus spread to the client’s network and encrypted a hard drive containing all the scheduling and accounting information.
The Clients Call Ducktoes for Help
Not understanding what was going wrong with their computers, the clients called Ducktoes. They thought they were just missing a program and because of that the the files wouldn’t open. Human dynamo and very personable manager Colin Forrest immediately went into action. He went into one of their computers remotely to check the situation out and saw the encrypted files. He recognized the encryption virus since we’ve dealt with it many times before. The virus had changed all the Word and Excel files to the mp3 file format making them impossible to open. Colin told the clients to turn off their computers immediately. His immediate remote call and quick thinking saved them many files.
At the time I was picking up parts at our wholesale parts supplier. When Colin called me to tell me what was going on, I immediately drove to the clients’ office.
Emergency Onsite Call
Upon arrival, I turned off the router so the virus would not spread further and assessed the damage. Two computers and the external hard drive were infected. Two others had started to be infected but the files had not been encrypted yet. I brought the computers to the shop and put them in quarantine and we were able to remove the infection. Don’t remove the infection before you get the contact info of the cybercriminals so you can pay the ransom if you need to. Whenever we remove viruses from an encrypted computer, we have to make sure the infected computers are in quarantine on their own separate network, because the virus spreads quickly.
Paying the Ransom
To ransom the files I had to take cash to a bitcoin exchange office office called BitNATIONAL, located in a Waves Coffee House on 17th Ave SW and 9A St. SW. I was a little nervous because it seemed I was dealing with the underworld. I was. Our long time onsite tech extraordinaire Raz Rydstrom, and one of the smartest people anywhere, met me there since he is familiar with the process. The ransom was $500 US plus the bitcoin office fee. It totaled $770 Canadian. With labour costs, the clients had to pay around $1500 for decryption and virus removal. It is a hefty price for opening an infected file.
BitNational Helps Us
BitNATIONAL has a specialized ATM called a BTM which put the digital currency on my smartphone. Two great and friendly guys Matthew Haddon owner and Jason Butler partner and employee were working that day. The other owner is Drew Glover. I found them very helpful and immediately felt less nervous.
About BitNational
There are many BTMs throughout Calgary and other Canadian cities. Find one near you.
BitNational bought out another bitcoin exchange service called Bit Brains. Matt and Jason believe that bitcoin is a great investment and only starting to take off and will go up in value.
BitNational only does the currency exchange to and from bitcoin. They are a legitimate business and not involved in any way with the cyber-criminals. They are entrepreneurs in a pioneer sector. 
A Nervous Moment
Back at the shop, we paid the ransom and then discovered that the websites to communicate with and pay the encryption virus creators had disappeared. This caused a panic moment for me. I had already paid the money and worried I might not be able to retrieve the decryption code since the cybercriminal’s websites had vanished. Yet one of my techs, Garett Belkie, was able to install a Tor browser and retrieve the code that way. Then he decrypted all the encrypted files on the computers and hard drive. Our hero. (Another awesome senior tech, our data recovery and virus removal specialist. He can get data off a stone and remove viruses in a twinkle of an eye.)
| Here’s another blog post about how I personally saved a law office from a encryption virus in 2014 before most computer IT support companies even knew what encryption viruses were. It is a very exciting story. Lol. I was my own hero. |
Returning the Computers
Once the files were decrypted, we removed the encryption virus and returned the computers and reinstalled everything to the network. Tech Rey Berse and I did this together. He’s a brilliant soft spoken senior laptop tech (he specializes in hardware and circuitry, soldering and electronic circuits etc. and software, a total computer genius) and an incredible onsite tech with our onsite IT support too).
Sometimes We Don’t Need the Ransom
Using guidance learned from Bleeping Computer, we have actually decrypted certain strains of the encryption virus ourselves without paying the ransom.
The Ducktoes Team is More than One Tech
You get more than the skills and knowledge of your one IT support tech at Ducktoes. You may only see one tech, but you are getting much more. You are a getting an entire group of techs at your back that are constantly learning and upgrading our computer repair and virus removal skills. We work together as a team to solve and prevent computer problems, so when you hire us, you are getting an entire team of problem solvers and computer experts all educated at SAIT. We are constantly researching computer issues and learning new skills, the encryption virus prevention and removal being one of them. The pool of our combined knowledge and skill makes us a formidable force against viruses and computer problems. Among us we know hardware including difficult laptop hardware including soldering motherboards and capacitors, fixing laptop screens, jacks and video and wifi hardware, server issues, networking, virus removal, crisis prevention, backup, data recovery, and anything you throw at us.
Smiles and Laughter
It was really rewarding and fun to return the computers and data all fixed and working well so our clients could return to business as usual. Now that they are IT clients we have them backed up to the cloud with Dropbox so this will never happen again. There was a lot of smiles and laughter while we worked and finished up with them.
Encryption Virus Experts
Ducktoes Computer Services has become an expert on the encryption virus. We’re experts on removing it, de-crypting it, and preventing it. If you need help with the encryption viruses, or any virus, we’re the best choice in Calgary since we’ve specialized in virus removal and prevention for years.
If You Need Us
If you need Onsite IT support or virus removal or any computer repair or support at all, call our team at Ducktoes. We’ll bring smiles and laughter back to your office or home.
An Awesome Tech at Ducktoes
I feel so lucky and pleased that Ducktoes has partnered with the Spectrum Advantage of Autism Calgary. We were even filmed for a special news story on CBC. We’ve hired awesome computer repair techs through them who are absolutely wonderful in fixing laptop and desktop computers and soldering motherboards, retrieving data, and many other tasks. We enjoy working with them very much.
One of these techs, I’ll call him Steve, did a fantastic, even miraculous job with a ssd, i.e, a solid state drive. A client brought in the broken drive that unfortunately contained three years of baby photos on it. They were not backed up anywhere else. So the client had lost all her baby’s photos and was devastated.
Before coming to Ducktoes, she had taken the drive to a couple of other data recovery labs including a clean room, with no luck. Our senior data recovery expert, who usually can get data off of anything, also couldn’t retrieve the data.
Steve asked me if he could take the drive home and work on it. I agreed, thinking it couldn’t possibly make the situation worse. The next morning when Steve came to work he said, “Cathie, I’m sorry but I’m going to be a little tired today. I stayed up all night working on the ssd but I got those baby photos.” I was so surprise and happy I hugged him. He said he’d soldered the circuitry and got it to work again.
When the client found out, she also wanted to hug him. He said no. He did accept a well earned tip from her. Steve has also retrieved data off a client’s iphone, with a year’s worth photos from the client’s trip to Europe, when no one else could.
One afternoon, the son of a family friend brought in a Macbook to the shop. He said his girlfriend was crying. At first I thought he was asking me for relationship advice (I’ve known him all his life). But he laughed and said no, his girlfriend spilled coffee inside the keyboard and had an assignment due on Monday. This was Friday. The laptop wouldn’t even turn on. (By the way, never try to turn on a laptop after a liquid spill until it dries out.) He showed me how you could still hear the coffee sloshing around inside it. He’d also taken it the Mac store and another computer repair shop but they said that nothing could be done. He needed to replace the Macbook. I assured him that laptop hardware techs could at least get the data off the hard drive, including her assignment, and we’d try to fix the Macbook as well.
Well, Steve took the Macbook and 45 minutes later, not only did he have the assignment, the whole Macbook was working again. I don’t even know how he took the screws out and replaced them in 45 minutes (there are a ton of tiny screws in a Macbook) but he did. Again, everyone was overjoyed and impressed.
Steve is an awesome tech and a wonderful guy to have around the shop, warm, funny, and hard working. Really you couldn’t find a better tech. He also contributes to the warm, supportive, hard working but fun atmosphere we have built at the shop. We have awesome techs and staff, and he is no exception.
If you’d like to bring in your computer or device to our Calgary computer repair shop, we’d love to help you too.