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 PACSnet.org 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.

April 2016 Web Design Meeting Report

At the April meeting, we talked about some issues with a WordPress template that I have been using, with emphasis on good HTML and CSS practices. We then looked at a new browser called Vivaldi, from the same developer who started Opera. Member Jerry Greene forwarded this article on Vivaldi from the How-To Geek site.

And please remember: 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 PACSnet.org 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.

April 2016 Web Design SIG – C’mon, Man!

Q: Why did the web developer send a few extra bucks to his hosting provider?
A: Because he heard that he should always tip his server.

We’ll serve up some good tips at the April meeting of the Web Design SIG. Our topic will be “C’mon, Man!” I’ll explain why, but it will involve my experiences using a WordPress theme. It won’t be a WordPress session — we have a SIG for that — but we will look at how a good handle on HTML and CSS can be helpful in working with a theme.

Depending on time, we will also look at a recent online form I developed using Google Forms and maybe check out a new browser.

And please note: 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 PACSnet.org page. Blank nominating petitions are available there also and will be at the member table in April, May and June. If you have any questions, ask the president or any other board member.