Material Design Lite Notes

Saturday, May 20 had us discussing Google Material Design specification and specifically, focusing on the Material Design Lite framework.

Today’s post is a quick catch summary of the resources we reviewed. This will provide you with ample opportunity to review the topic a little more on your own before in advance to our deeper dive into it in June.

The Web Design SIG started with 2 very quick videos. The first, just about 60 seconds was brief glitzy marketing view of Material Design, while the second, still short at just under 5 minutes, offered a little more meat on the topic. As was noted during our session on Saturday morning, the topic being discussed became clearer to me after 3 – 4 viewings. I encourage you to try it at least a couple of times.

Video 1: ‘Watch the video’ from material.io

Video 2: What is Material Design Lite?

 

Here are a few of the online resources we touched on:

The code that was demo’ed in the meeting may be downloaded from Github: https://github.com/MattRy/pacsmdl052017.

The demo code is currently setup for use in a local instance of a website. The downloaded repository contains all of the website code needed to display the final version of the demo we worked through.

If using Local By Flywheel as your local web server environment, this code can be unzipped and dumped directly into your \Local Sites\pacsmdldemo\app\public folder to view the pacsmdldemo.dev website.

Note that even though Local By Flywheel is a local WordPress development environment tool, in this case we are only using it as a web server and all of the WordPress specific files are removed from the public folder.

Local By Flywheel is supported in both the Windows and OSX environments.

Alternatively, the code can be copied to the \public_html folder on your web server to view the new site publicly.

More details on the setup are forthcoming, but this can get you started.

Responsive Images: The What, Why and How

April’s meeting was all about responsive images – what they are, why they are important and how to make it happen.

We used a 10-part discussion on Cloudfour.com as the basis for the discussion. Even though the post was written more than 2 years ago, the what and why are still very relevant. Our SIG was primarily concerned about the resolution switching aspect of responsive images, as compared to the more subjective art direction approach. Both have their merits, but we focused on the more mechanical implementation.

Resolution switching is the most common use case. It refers to any scenario where you all you want to do is provide different sizes of an image and you’re not making any modifications to the content or aspect ratio of the image.

Art Direction is concerned with situations in which you need to make changes to content or aspect ratio of an image based on the size of the image in the page, you’re doing what the RICG refers to as art direction.

Resolution Switching for responsive images concentrates on providing the optimal image to the browser to properly convey the desired image while not overlapping the width of the viewport (browser window) or ignoring performance. Large image sizes, both in terms of file size and image dimensions, can take a very long time to download on non-high speed networks – think your cell phone. Even on a busy wifi network in a coffee shop or shopping mall, a 300 MB image is going to take a while to download, time in which your website visitor may jump to something else offering more immediate gratification.

We spent considerable time on the HTML srcset attribute. (See w3schools.com definition.) A good friend, Sal Ferrarello, put together a nice srcset demo you can find on Github. The slides for his associated presentation are on his website.

We talked briefly about the use of the picture attribute, introduced in HTML5, and how it lets you define more than one image. A good discussion of this can be found on learnmedia.com.

We touched on using your web browser’s developer as a quick test of the responsiveness of your website images.

One method is dragging the left or right edge of the browser window will shrink its width and allow your images to resize, if they are coded in a responsive manner.

In Chrome browser, the developer tools are available using the F12 function key, or by right clicking on the web page, outside of any java elements. There are a set of built in break points to see your website at different viewport widths. Here is an excellent tutorial on it.

Other browsers:

That is about everything we touched on. Feel free to add your comments below.

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 – capwebsolutions.com

  • 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 – twitter.com

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

Wildcard

  • Secure unlimited number 1st level sub domains on single domain
    • *.yourdomain.com as the common name.
    • Secures www.yourdomain.com, mail.yourdomain.com, secure.yourdomain.com, anything.yourdomain.com

HSTS vs HTTPS

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.

globalsign.com/en/blog/what-is-hsts-and-how-do-i-use-it/

Pricing?

 

 

Resources

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: dnsimple.com)
  • 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 – https://balsamiq.com/
* Pencil – http://pencil.evolus.vn/
* Mock Plus – https://www.mockplus.com/
* Wireframe cc – https://wireframe.cc/
* Jumpchart – https://jumpchart.com/
* Mockflow – https://www.mockflow.com/

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.

Troubleshoot.press – 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.