Easily password protect your website using Access Control

In our second video in our series of “live” Facebook video casts, I talk about the core features of the Access Control website plugin.

In my video below, towards the end, I talk about a somewhat secret power feature that most users of the Access Control plugin don’t know about.  Be sure to stick around for that little nugget!

Password Protect Website Pages

To sum up the the plugin, with the Access Control website enhancement, you can easily password protect website pages and documents.  Often you will have content that you only want shown to a certain segment of your visitors or members — for those times, you’re going to need this website plugin.

After logging in to the admin dashboard, you can password protect website pages and files in just two clicks.  Granting access in another three.  It’s probably one of our easiest, but most powerful plugins that can be put to work in just a couple of minutes.

Loosely based upon a “membership” concept, the plugin comes bundled with the ability to create account groups, and display registration (optional) and login boxes.

If you don’t already subscribe to our Facebook page, we invite you to join the community.  Stay on top of the latest of how our products can help you and your website.

We’ll be doing additional videos about each of our website plugins, showcasing the core features of each, as the weeks go on.

Using Website Plugins to Make Your Website More Functional

I was excited, to say the least, to do our very first Facebook Live webcast this week.  Every week, for the next three months, or so, I am going to be sharing tips and features on our suite of website plugins, and how these enhancements can make your website much more functional.

Enhancing Your Website with Website Plugins

If you’re not already familiar with our website plugin line of products, check out the video below.  In the video, I talk about what the plugins are and how they work:

We’re going to be doing live videos every Wednesday at 1pm Pacific through September, October, and half way through November.  We will cover one of our twelve different website plugins each week.

The format of the video cast is much like if you called in with a question to our sales line asking “Hey, can you tell me more about your website plugins?”

And, coming in November, we’re hoping to also talk about a couple of brand new website plugins!  We may drop tid-bits of hints throughout our video series.  Be sure to tune in!

If you don’t already subscribe to our Facebook page, we invite you to join the community.  Stay on top of the latest of how our products can help you and your website.

Next week, be sure tune in for our Facebook Live broadcast on our Access Control website enhancement!

10 Tips for Better Mobile Design

10 Tips for Better Mobile Design

With a few million online articles regarding mobile web design, and a plethora of tools and other resources, have you ever asked yourself why your website still looks ugly when you view it on your mobile phone? I wanted to share with you the 10 best tips I’ve collected, for better mobile design.

Even with a mobile friendly template or CSS framework like Bootstrap it’s possible to end up with an ugly looking mobile site.

 Avoiding the Mugly

As much of my day job is providing support for folks wondering why their websites don’t look great on mobile I wanted to share some of the common issues that I see and how to fix them or better yet avoid them altogether. I’m really hoping to help folks who have already built their websites and are now finding that things just don’t fit, or line up well and want to know what to do.

Better Mobile Design Groundwork

There’s a BIG difference between being mobile friendly and visitor friendly. Mobile friendly means your site will scale for mobile devices. Visitor friendly means your website will provide a good user experience when viewing your site on their mobile devices. A huge difference as mobile friendly is more of a technical term and requires coding to be successful while visitor friendly or UX ( user experience ) is much more design oriented.

Before I share my list of simple tips I just want to make sure the groundwork has been laid. For a better mobile design, or a mobile friendly site you’ll need to first make sure that your website meets the basic requirements. Your web pages will need to include an HTML meta viewport tag,

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

and a CSS framework of some sort. If you don’t have a meta-viewport tag in your site it will not scale correctly for smaller devices. You can test your web pages for better mobile design or friendliness via Googles Mobile-Friendly Test page:

https://www.google.ca/webmasters/tools/mobile-friendly/

Load your website URL into the URL field, and press ANALYZE.

This test will review your site and make sure it includes the meta viewport tag. It will also analyze other parts of the site, but it won’t tell you how well your site displays for users.

Responsive Design Framework

If you’re not already running on a mobile friendly CSS framework such as Bootstrap, it’s probably time to upgrade your website. CSS frameworks take much of the hard work out of running the back end of the site and more importantly provide a good deal of mobile and tablet resources.

Now that you’ve checked to see if your site if mobile friendly or at least passes the test we can take a look at some of the tips and tools for improving your website and not only making it work for mobile, but also looks good on mobile.

Onto the first 3 of 10 Tips for Better Mobile Design!

1. Optimize Your Images for Mobile Design

A faster loading web page provides a better user experience and will help keep visitors on your web page. One of the keys to improving the speed of your web page is to reduce the file size of your images. One of the problems of reducing file size is that your images can look pixelated or grainy and it’s also a pain in the neck or used to be until www.tinypng.com.

Screenshot re smart PNG and JPEG compression i3dThemes

Simply drag and drop your images directly onto the Tinypng web page and let the compression begin. Once each image has been optimized you can download individually or download all images as a zip file. Copy the images back into your website, and upload to your server. You’ll be amazed by the file compression, often reducing the file size of your images by up to 80%.

2. Make Your Images Mobile Responsive

Responsive means your image will resize ( scale ) for different devices. Not all images need to be responsive, just the images that need to change their size when the screen gets smaller or bigger. As a rule of thumb I like to suggest any image that is larger than the width of a mobile phone, should be responsive, meaning if your image is wider than 300 pixels or your image is within a container that will be resized you should make is responsive.

Class=”img-responsive”

Providing you are running the Bootstrap Framework you can make an image responsive by adding a class to the <img.. .> tag of

class=”img-responsive”

as in

<img class=”img-responsive” scr=”” … alt=””>

If you are not running Bootstrap you can still make an image responsive you just need to include a CSS class that tells the image to scale to a specific width, usually 100%. Add this style to your style sheet.

@media (max-width: 767px) {

.img-responsive { width: 100%; max-width: 100%; }

}

Remove width and height properties for better mobile display

When you add an image to a page some html or web editors ( such as Expression Web ) will add the image width and height properties directly to the image tag, making is a bit more difficult for the image to scale. You’ll want to remove this for any image, just switch to code view and as you’ll see in the example, remove the width and height tags:

Screenshot-re-width-height-better-mobile-design-i3dthemes

3. Typography that fits

Quick Tips!

  1. Clean uncluttered headings and content
  2. Keep it simple
  3. Use bold to highlight important words or phrases only
  4. Use @media queries for larger headings
  5. Make your typography fit ( 320px or so )

One of the biggest barriers to a good mobile experience is including too much information in the head of the page. Too much content in the slider ( titles and descriptions ), too much content in the website tagline or too many words in the logo or website name.  With the website name you many not have much control over that, depending on your company or organization’s name.

What I see happening though is a very nice presentation for desktop users, but a very cramped experience for mobile users. This can happen when the website is developed without testing on mobile along site desktop. The best way to do this now is with the latest version of Chrome, you can quickly switch from a mobile view to desktop view. This will show you what you site looks like on both devices and you can adjust accordingly.

I try to think of it as moving from a 4000 square foot family home, into a small cramped apartment. You would have a very difficult time fitting all the furniture from your old home into that small apartment and the same goes for desktop to mobile, you need to make sure the content fits onto both devices. And more importantly you need to consider the attention span of a mobile user, think about what they are looking for on your website and consider whether the information you have on your page is something they would actually read. At least where the user first looks ( the header of the page ) make sure your content is short and to the point, making it easy to read and quick to digest.

4. Bootstrap Mobile Responsive Utilities

One of the best things about using a CSS Framework such as Bootstrap are the built in mobile responsive utilities. CSS classes that allow you to alter the display of your content depending on which device the user is viewing your web page with.

Not only can you switch from 3 columns for desktop to 1 column for mobile users ( the infamous css grid ) you can also choose to display certain content for desktop users, but not mobile users, and visa versa.

If you are using Bootstrap ( and I hope you are ) and you’re not familiar with the responsive utility classes here’s a direct link you can bookmark, as you can copy the classes directly:

http://getbootstrap.com/css/#responsive-utilities

5. Mobile Users Can’t Hover

One thing we often forget when building our websites is that mobile users can’t ‘hover’ over a button, then can only ‘touch’. With desktop we can hover over a menu button to show a submenu, then we can click that button to go to a web page. With mobile, the user can only ‘touch’ which is the same as a ‘click’. The option to hover isn’t there so any actions that you might apply to an item that requires a hover, then a different action when clicked will not work for mobile users. You must make the hover and click actions the same, or none at all.

6. Click to Call Links for Phone Numbers

If your website is targeting mobile users that might be inclined to phone you ( such as a take our restaurant ) you may want to consider including your phone number at the very top of your webpage and making that phone number a ‘Click to Call‘ link.

By adding the ‘tel’ attribute to your link tag you can make your link clickable, and this will also work for desktop users that have telephone applications such as Skype installed.

<a href="tel:1-408-555-5555">1-408-555-5555</a>

7. Use the Hamburger Menu for Responsive

If your website includes a Hamburger Menu or Offcanvas menu put that to good use as this is what most mobile users expect to see and it’s much easier to use on mobile devices. Many of our templates include a Hamburger Menu button that loads an Offcanvas type menu. Basically, a menu  that overlays the entire web page when clicked making it extremely easy for mobile users to navigate with one thumb or finger ( also known as the ‘One Thumb Rule’ ).

8. Remove the Sub Subs, a mobile no no.

I see some flack coming for this one, but it needs to be said. Get rid of the Sub Sub links in your drop down menu’s if you can. They are not mobile user-friendly. In all of our templates, we have included this option in our Bootstrap menu’s even though Bootstrap has dropped support for them stating they do not provide the best user experience. But many of our customers have asked for this feature so we’ve kept it alive. With our newer template releases we have included the regular Bootstrap Drop Down Navigation AND the super mobile friendly Offcanvas menu. This way you can have the best of both worlds, and for the more adventurous you can hide the Offcanvas for desktop and display for mobile only if you want to keep your navigation options simpler.

9. Menu Bar Widths best for Mobile Design

Another issue I see creep up is the number of menu buttons in the navigation bars, or the total number of characters in the button names making the buttons or menu bar pretty wide, Great for large desktop users but don’t forget about your tablet users. Try to keep the width of your menu bar to less than 992 pixels.

10. Tables

Something that would best be avoided as tables are just not mobile friendly, but there are times when it can’t be avoided, and this is where it’s almost essential to use a CSS Framework such as Bootstrap to help get you out of this ‘table jam’ . Bootstrap does provide some table utilities that will ‘help’ improve how tables are displayed in your page, and it will also allow the user to ‘scroll’ the table to view the full contents as with many tables it’s just not conducive to re-structure the table headers or column headings to be single column as the table wouldn’t make sense any longer. Tables are there for tabular data, allowing you to read information in an up and down back and forth directly. Mobile tends to take information like this and put it all into a single column so it’s easier to read on a mobile device which is fine and dandy until your left to right content no longer lines up with your up and down content and the information your are reading make absolutely no sense. Along comes the table class in Bootstrap that allows the user to view the tabular information in it’s correct format, and scroll left to right to read the entire width of the table.

You will need to make sure your tables and cells do not include any fixed widths, you can use percentages, but not fixed widths.

Then you will need to wrap your tables in a <div> container and apply some classes, but let’s go to the Bootstrap website where this information is kept up to date as it can change from version to version.

http://getbootstrap.com/css/#tables

And finally if you’re not familiar with mobile friendly and what it means to google, here’s some detailed information that may help to understand why the big fuss for mobile friendly:

https://developers.google.com/webmasters/mobile-sites/get-started

Save

Save

Save

Save