SSL Pricing, Differences, HSTS – Kitchen Sink – March SIG Meeting Wrap-Up

graph of browsers supporting hstsOur February session on SSL was well received and proved to be extremely interactive. We had a good discussion but at the end of our 55 minutes, we were left with questions and wanting to know more.
So what are the differences between the various SSL certificates? Do I need a DV, OV or EV certificate? Will a wildcard cert take care of every domain name I own?

Is HSTS the same as HTTPS? Where can I buy that certificate?

What’s the deal with pricing all over the map when it comes to SSL certificates? Is the free one from Let’s Encrypt any less secure than the $69 one from GoDaddy?

SSL Certificate basics

DV – Domain Validated Certificate –

  • Padlock/HTTPS
  • Validates domain is registered
  • Someone with Admin rights approved certificate request
  • Verified against domain registry
  • Least expensive
  • Verified by email or DNS – very quick – approved in minutes

OV – Organization Validated

  • Padlock/HTTPS
  • Validates domain is registered, plus organization info eg. name, city, state, country
  • Trusted
  • Authenticated by agents against business registry databases
  • Verified in a few hours to weeks
  • Company info shown in certificate details

EV – Extended Validation –

  • Green bar/Padlock/HTTPS
  • Validation governed by Guidelines for Extended Validation
  • Provides vetting process much stricter than OV certificates


  • Secure unlimited number 1st level sub domains on single domain
    • * as the common name.
    • Secures,,,


Again, we jump out to the web authority – Wikipedia – to get the scoop on HSTS.

HTTP Strict Transport Security (HSTS) is a web security policy mechanism which helps to protect websites against protocol downgrade attacks and cookie hijacking. It allows web servers to declare that web browsers (or other complying user agents) should only interact with it using secure HTTPS connections, and never via the insecure HTTP protocol.

  • Webserver issues header indicating can only be communicated with from HTTPS sites
  • Protects public from man-in-the-middle SSL stripping mechanisms
  • HSTS forces browsers and app connections to use HTTPS
  • Browsers use a preload list that specifies sites that must connect via HTTPS from the initial connection
  • Excellent Reference with more details, and step by step directions to implement HSTS on your website.





https emphasis on secure

Ideas for Upcoming Meetings?

Feel free to ask questions, offer feedback, or suggest topics for an upcoming meeting via the form below.

Use this form to offer feedback, suggest topics or ask questions.
  • This field is for validation purposes and should be left unchanged.

SSL Everywhere – February SIG Meeting Wrap-Up

SSL Everywhere” is one of Google’s focuses. With that in mind, in February we looked at SSL/TLS and how it affects your website Search Engine Optimization (SEO). Websites use TLS to secure all communications between the web host server and the user’s web browser.

When you visit a secure website your browser will alert you with a green padlock in the address bar and change the protocol component of the URL from HTTP to HTTPS.

Secure Sockets Layer, aka SSL, has been around a while. Netscape brought it to life in the early 90’s. Out of SSL version 3.0 came Transport Layer Security (TLS) v1.0 which has progressed all the way to v1.2 (2008). Note the repeated use of the word layer in the name. Think OSI model for all you propeller-heads.

Even though SSL v3.0 was deprecated in June 2015, the mechanism is still commonly referred to as SSL. You can define SSL as being the Cryptographic protocol that provides communications security over a network. In everyday use, it provides protection from eavesdropping and tampering. Think WiFi in a public place, say Giant Foods cafe, or Starbucks, or the airport.

When referring to SSL Certificates and website applications, we really mean TLS 1.2. For today’s purposes, we’ll continue to refer to the protocol as SSL.

Alright, so what does this have to do with Google, and SEO?

In August 2014 Google published a blog post on its Webmaster Central Blog with a hint of what was to come.

… we’re starting to use HTTPS as a ranking signal

… for now it’s only a very lightweight signal

… we may strengthen it [ … ] to encourage all website owners to switch from HTTP to HTTPS

Then in December 2015, Google dug in a little deeper stating that HTTPS was going to influence page rank.

[We are] adjusting indexing system to look for […] HTTPS pages

When two URLs from the same domain […] are served over different protocol schemes, [Google will] typically choose to index the HTTPS URL

As a website owner or developer, what can you do?

Best practices for dealing with HTTPS

  • Decide the kind of certificate you need: single, multi-domain, or wildcard certificate (Ref:
  • Use 2048-bit key certificates (current default)
  • Don’t block your HTTPS site from crawling using robots.txt
  • Allow indexing of your pages by search engines
  • Test the security of your existing HTTPS site with Qualys Lab tool
  • Force HTTPS using .htaccess file

Resourceshttps emphasis on secure

We had a lively discussion about the topic. I expect that we will dedicate a portion of the March meeting to address questions that came up.

Ideas for Upcoming Meetings?

Feel free to ask questions, offer feedback, or suggest topics for an upcoming meeting via the form below.

Use this form to offer feedback, suggest topics or ask questions.
  • This field is for validation purposes and should be left unchanged.

Wireframes – January SIG Meeting Wrap-Up

Happy New Year – Web Des’ers!

We missed out December gathering due to the inclement weather – a good decision on the part of our leadership, if you ask me.

wireframe example of a personal profile webpage

A wireframe document for a person profile view

This month’s meeting introduced the use of wireframing as a tool to help during the initial stages of designing a new website. This topic had been suggested by one of our attendees.

I went to my preferred source of a working definition for a new topic – wikipedia. It identifies wireframing as

. . . a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. […] The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content.

Examples of available tools

* Balsamiq Mockups –
* Pencil –
* Mock Plus –
* Wireframe cc –
* Jumpchart –
* Mockflow –

Cool Tool

This month’s cool tool, unrelated to web design, came to my attention during a webinar I attended this week on website troubleshooting. – a work-in-progress website that attempts to walk you through the process of troubleshooting a problem on your WordPress website. While focusing on WordPress, the concepts apply to any website.

Ideas for Upcoming Meetings?

Feel free to ask questions, offer feedback, or suggest topics for an upcoming meeting via the form below.

Use this form to offer feedback, suggest topics or ask questions.
  • This field is for validation purposes and should be left unchanged.

November 2016 Web Design SIG – Bootstrap Wrap-up

Bootstrap Tutorails with PACS Web Design SIGIn October we continued our look into the Bootstrap framework. We went through the full process of downloading the framework, and setting up our basic website using the included templates.

We began to look at the GRID sysetm and started building the demo. We discussed the grid system responsive classes.

  • xs (for phones) – no media query – default
  • sm (for tablets) – screen width from 768 pixels to 991 pixels
  • md (for desktops) – screen width from 992 pixels to 1199 pixels
  • lg (for larger desktops) – screen width from 1200 pixels and above

That’s about where we ran out of time following some very good discussion on responsiveness.

For November we will continue on with the GRID system as it applies to responsiveness. Google recently posted an article stating that it had started to up some experimental algorithm changes that makes its index mobile first. Web Savvy Marketing wrote up a nice blog post about it. We will hit on this as we wrap up this segment on Bootstrap.

A few ideas have been floated for our next segment. Feel free to comment below if you have suggestions on where you’d like to see our SIG go next.

I’m looking forward to seeing everyone on Sat, Nov 19 at 9:00 am.

October 2016 Web Design SIG – Bootstrap Dive

Example of large grid layout with BootstrapLast month we were introduced to the Bootstrap framework. We continue our dive into practical uses of Bootstrap this month by taking a closer look at the GRID system and how it can be used to build truly responsive websites.

We will follow up on a few items that came up last month. Bring your own stories about your Bootstrap examples. Let’s talk about it.

September 2016 Web Design Meeting Report

Go get bootstrap for your next web projectWow! An excellent crowd at the inaugural meeting of the Web Design SIG for the 2016-2017 year. We recorded 22 attendees in our new meeting room.

Matt kicked off the meeting with a brief background on why the new face at the front. Now that that is done with, let’s get into learning all about a very popular web design framework called Bootstrap.

We covered a little background and then saw some code examples to build a very basic site using Bootstrap.

Here is a link to the slide presentation used.  Feel free to take a look. All of the links in it should be live, so you can jump to the resources and demo pages.

Here are a few more resources to dig a little deeper:

Some questions came up during the discussion, and I thought this would be a good place to provide feedback. Please use the comment area below if you have something to add. An interactive discussion here would be great.

  1. How does maxcdn keep up with version changes on bootstrap, and is it secure?
    1. The MAXCDN blog offers an excellent discussion on this topic, with a focus on security. An unfortunate incident back in ’13 jolted them into a new approach to securing the content being offered.
  2. What happens if you spec wider than 12 columns on a row?
    1. I think we’ll need to try that one out and see what happens, or you could dig into the Bootstrap Grid example and play around with it.
  3. What code do I need to write?
    1. The HTML is left as an exercise to the designer/developer.
  4. What doesn’t come with bootstrap?
    1. Bootstrap are the assets that will support your website. Think of it as all the common HTML elements, CSS components, and awesome jQuery plugins to frame out your website. Check out these examples.
  5. What is a CDN?
    1. See Wikipedia article.


June 2016 Web Design Meeting Report

At our June session, we followed up on the May meeting with some additional notes on using Google Forms.

The main topic was Microsoft Sway. Sway is a cloud-based application that according to Microsoft makes it quick and easy to create and share polished, interactive reports, presentations, personal stories, and more.

We watched a video on Sway called Learn Microsoft Sway – New! 2016 Tutorial. We also looked at a Sway that I created, and we created a Sway of our own to get the idea of how the design can be changed on the fly.

There are plenty of other videos along with examples at the Sway website.

Note that a Microsoft account is required to create a Sway.

June Web Design SIG — Microsoft Sway

Q: Why did the programmer quit her job?
A: Because she didn’t get arrays.

Speaking of quitting, this month is the last meeting of PACS until September. Our SIG will go out with a look at Microsoft Sway, a web-based application for creating presentations emphasizing multimedia. Sway has not received a lot of attention, but it could be a good solution for those times when put together a site quickly and easily.

We will also do a couple of follow ups to last month’s discussion of Google Forms, and we will look ahead to next season.

May 2016 Web Design Meeting Report

At our May meeting, we looked at using Google Forms for a free and effective way to add data gathering to a site. The system connects a form with a Google Sheet through Google Drive, so a Gmail account is required.

We watched two instructional videos based on using Google Forms in a classroom situation:

Some of the settings described in these videos depend on an educational account with Google, but most of what is described is generally applicable.

When searching for videos or tutorials on Google Forms, watch the dates and be sure the instructions relate to the new version of Google Forms, not the older version that is being replaced.

May Web Design SIG — Google Forms

Q: Why did the web developer add body {padding-top: 1000px;} to his Facebook page?
A: Because he wanted to keep a low profile.

The topic for our next meeting will be Google Forms. I recently needed to do a quick form for a site, and I used a Google Form quite successfully. We will look at how they work and build one on the fly as a test. Depending on time, we will look at some more advanced examples of styling forms, and anything else that comes up.

And please note: If you want to raise your profile, don’t rely on padding-top. Your chance to provide leadership for PACS is coming up shortly at our annual meeting in June. Please consider running for a position as Director. The qualifications are spelled out in our bylaws accessible from the About tab of any page. Blank nominating petitions are available there also and will be at the member table in May and June. If you have any questions, ask the president or any other board member.