Professional Growth Activity: Module 5

Name: Jenn Clore
Activity: Refresh OKC “10 Lessons From Running a Digital Marketing Agency for 14 Years
Description of Activity:  A Meetup event with speaker Tim Priebe from T&S Online Marketing. He shares 10 lessons he’s learned from hackers, customers, mistakes, employees, and successes over the course of 14 years in business.

Date(s) of Activity (also include times):

10/26/17 11:30a to 12:30p

Student Evaluation:

Why did you select this activity?

As a digital marketer, I’m always interested in any tips and trade secrets from fellow marketers in the local industry.

Would you recommend this activity for other students? Why or why not?

Yes. I’ve been to a few Refresh Meetups and I always have enjoyed the topics. The Meetup events are often relevant to the industry trends whether you are a marketer or a web developer or designer. From the  Refresh website – “Topics range from HTML, CSS, JavaScript, Content Management Systems (WordPress, Drupal, etc), Digital Marketing, Entrepreneurship, User Experience, Web Standards and much more.”

What did you like best about this activity?

I like the smaller sized group and the meeting space. I did enjoy the topic. Tim was a great speaker and I appreciated his love of reading and the books he recommended to read. I’m a little sad that I didn’t win his most recent book that he was giving away.

What did you like least about this activity? How would you make the activity better?

Tim’s slides froze in the middle of his presentation so he had to go on without it. But I appreciated his way of easing into moving along without the slides. He didn’t seem flustered and he was well prepared. But I would of liked it better if we did get to see the rest of his slides as I tend to remember better when seeing something instead of just listening.

What is a creative idea/concept you can take away from this experience and possibly implement into your work?

Tim’s 10 tips were –

  1. Identify your gaps
  2. Set goals
  3. Know your finances
  4. Manage your growth
  5. Get good at sales
  6. Develop a reoccurring model
  7. Develop your personal network
  8. Read
  9. Seek outside council
  10. Give back before its comfortable

I always try to read up on theories and concepts in the marketing and web design industries and that is one concept that I can take away. Setting goals and identifying my weaknesses is something that I can help further me professionally. I think that Tim’s advice is relevant to any business model even for those freelancing or just getting started.

How Secure Is Your WordPress Site?

How secure is your wordpress site

As websites become increasingly easy to create with no developer knowledge, anyone can have their own website. Even your grandparents. If you have a website, it is your responsibility to create a great site that others can safely use and submit information into. Users need to trust that their data is safe and secure.

WordPress is a popular platform being used by 25% of all websites on the internet. With the popularity comes a price. Hackers focus much of their attacks on WordPress sites because it is so widely used. Without adequately securing your website and backing it up, you run a high risk of your website being compromised. One standard way attackers can hack into a WordPress site is through a plugin. They will use vulnerabilities in a plugin and inject their own code to gain access to the backend of your site and all your stored information.

WordPress Security Tips

Here are some tips to make sure you are keeping your WordPress website safe from attackers:

  1. Regularly update your WordPress site to make sure you’re always running the latest version of your theme and plugins.
  2. Avoid using older WordPress themes. The newer themes are more secure and prepare against vulnerability attacks.
  3. Make sure the plugins you use are compatible with your current version of WordPress and avoid older plugins by checking when they were last updated.
  4. If you are stuck in deciding between two different plugins that perform the same functions, choose one that has a higher rating and a more significant number of downloads.
  5. Keep the number of plugins that you use to a minimum and delete the ones you are not actively using.
  6. Only download plugins from the WordPress Plugin repository. The repository does its own research before offering it to users.
  7. Use WPScan’s Vulnerability Database to monitor plugins known to have vulnerabilities, as well as to learn when they are patched.

WordPress Security Plugins that I use

Here are a few plugins that I have used on my WordPress website to help avoid security issues:

Wordfence – This plugin currently has a rating of 4.8 out of 5. It has a ton of great security features for free, but you can upgrade to their Premium version for a monthly cost. Included in the free version are these services:

  • Web Application Firewall
  • Block Brute Force Attacks
  • Malware Scanner
  • View Blocked Intrusion Attempts
  • View Google Crawl Activity
  • View Bots and Crawlers
  • View Logins and Logouts
  • View Human Visitors
  • Repair Files
  • Monitor Disk Space
  • Get Detailed IP Info

Unlike most security plugins, Wordfence runs locally on your server instead of on the cloud. A server-based security plugin means that your firewall is on your local machine, rather than on the cloud. While this practice can slow down your website especially since this is a pretty heavy-duty plugin, it’s a good practice to have a caching plugin to help speed up browser caching. Having a locally run firewall gives you more control and flexibility over your security.

Backup Buddy – This is a free plugin by iThemes that backs up your WordPress site for an added level of security and protection. It backs up your entire WordPress site including all files and your database. If your website or files become compromised, Backup Buddy has your back. Backup Buddy comes with these free features:

  • Scheduled and automated backups
  • Customization of the type of backups you want to run
  • Ability to store your backups safely offsite like on Google Drive or Dropbox
  • You can also restore individual files from a backup instead of having to rebuild the entire site

Website Security is never set it and forget it

Hackers are continually becoming more sophisticated in their methods and their research into discovering vulnerabilities. Your website may have been deemed impenetrable last year, but that doesn’t mean it’s equally as safe now. To make matters worse, even outside of WordPress, any data you share over the internet could be compromised, as we’ve seen through data breaches with Target, Equifax and much more. Most recently was an attack on Wi-Fi creating a vulnerability on all Wi-Fi devices.  I have an Android phone, and as of this posting, a patch and update still haven’t been issued that I’m aware of.

Ok, enough of the scary stuff. The best thing you can do as a responsible WordPress developer is to make sure your plugins and website are updated. I get emails almost every day on plugins that have been updated. It may seem annoying, but at least I know that the developers are working hard to make sure their product and my website stay safe.

A Guide to Winning at SEO

Back in 2004, I just graduated from Penn State with a degree in Advertising, and I had taken an internship with an Internet Marketing company called UnREAL Marketing. This was my first real immersion into SEO, analytics, and keyword search terms. Way back then, we used a keyword planning tool called Overture by Yahoo! and I don’t think I ever heard of Google Analytics at that point.

We had a car dealership client that wanted to rank on Google for their BMWs. As an intern, I was tasked with coming up with a bunch of keywords that someone would type into a search engine when looking for BMWs. This particular list would include various misspellings, model numbers, vehicle colors, and anything else you could possibly think of when searching for a BMW. It was a pretty extensive list. You see, back then, it was common practice to just list on an excel spreadsheet all the words you could possibly think of that was associated with your product. Then we would create banner ad campaigns around these keywords. Remember those banner ads and pop-ups that drove internet users crazy in the late 90s – early 2000s? Hi, that was me.

The Evolution of SEO

SEO (Search Engine Optimization) has definitely evolved since then, thankfully. Nowadays, you can’t just go all in and try to target in your ad campaign for whatever keyword you can think of. Well, technically you still can, but you would waste a lot of time, energy and money. Internet users have gotten smarter when it comes to ads in their search results. Gone are the days when people couldn’t tell the difference between a google ad and an organic search result. People searching on the internet have become more sophisticated and with that, so has the search engines.

SEO specialists, content creators and web designers have moved away from keyword stuffing their website and have focused on writing good, clean content for people to read. Remember back in the day when websites would often have paragraphs at the bottom of the page of just random keywords? In today’s world, that’s just bad practice and is one of the tactics in black hat SEO. With content now being the main focus for search engines to bring people to your site; web designers and SEO specialists are tasked with creating ways to describe their intent and products with clear, consise and natural sounding descriptions. Keywords are still important, but instead of stuffing content with as many keywords as possible, it has to make sense. The search engine bots and spiders can recognize when you’re just spamming a page with as many keywords as possible.

Keyword stuffing image
Neil Patel – How To Get Google to Index Your Site

Best Practices for SEO Success

How can you create a better performing site when it comes to SEO? Here are a few best practices that will help your website rise above the competition.

Google Analytics

If you don’t have Google Analytics tracking set up, then you are totally missing the boat. This is a powerful free tool by Google that tracks and measures anything you could possibly want to know about your website traffic. You can see what landing pages are most popular on your site, what devices your audience uses to access your site, the demographics of your audience, how they interact with your site, and what referral sources are sending you the most traffic. This is just a small portion of what you can measure.

Google Analytic Referral Traffic
In this screenshot, you can see the traffic coming in from different sources. I have created campaigns within Google Analytics that I can attribute sources specific to the Facebook ad campaigns that I am currently running. Better work on that bounce rate!

If you have a WordPress site, it’s easy to add your Google Analytics tracking code to all of your pages with a plugin. I used MonsterInsights, but I’m considering switching over to Google Analytics Dashboard for WordPress soon after I received some positive recommendations. If you aren’t using WordPress, no worries, Google offers recommendations on how to add your code to many different platforms.

Monster Insights Plugin Dashboard
Here is the MonsterInsights dashboard within WordPress. I just set up Google Analytics on the 9th. As you can see, I haven’t spent much time on SEO on my own personal site. Not yet, anyway.

Title Tags

Moz has a great page on the importance of title tags. But to sum it up, the title tag is the first impression of what your site or page is about. If your website is about roofing, it will make sense to put the word roofing or roofer in the title tag. Title tags are visible on the search engine result page, the tab on web browsers, and on social media platforms when a link from your site is shared. It is recommended to keep the character length between 50 – 60 characters or else the rest of your title will be cut off in the search engine result in the page. A best practice is to place the most important keywords at the front of the title and do not overstuff the title with keywords, making it sound unnatural.

What is a title tag

Headers and Sub-headers

Headers and sub-headers in your content are sort of like book titles and chapter titles. A header is similar to a book title by giving the reader an idea of what the content is about. A sub-header is like a chapter title by breaking up the content between thoughts or sections. Headers are read as h1 tags in HTML code, and sub-headers are h2..h3…h4 and so on. These tags give the search engines a good idea of what your content is about and can contribute to your SEO results. A good practice is to add important keywords in your headers to further confirm to Google that your page is about the keyword you want to rank for.

If you want to learn more about the importance of the H1 tag, this is a great article.

Meta Descriptions

A lot of weight used to be put on meta description in regards to SEO but back in 2009, Google announced that it was no longer weighing this description in the ranking factors. But that doesn’t mean that you shouldn’t put any effort into writing out a clear and concise meta description for your pages. Why? Because the meta description in what is seen to describe your site on the search engine page results. You don’t want a bunch of random jumble to show up. That would definitely be a bad practice. It is suggested to keep your description within 160 characters to avoid it being cut off.

What is a meta description

If you are using WordPress, a good plugin that I recommend to help with meta descriptions and SEO is WordPress SEO by Yoast. This tool helps you to customize your description and ensures that you meet the recommend character length.

Yoast meta description snippet editor

Inbound and Outbound Links

Inbound links are links on other websites that send traffic inbound to your site and vice versa for outbound links. If the inbound and outbound links are coming to and from reputable websites, this can help improve the SEO quality of your site. This tells Google that a) you are the expert in a subject that other sites are linking to and b) your site values quality content.

Inbound links are also referred to as backlinks, and they serve as a vote of confidence between two sites. Getting other reputable websites to backlink to your site can be very time consuming, but worth it when it comes to SEO juice. One way to do this is to offer a well-developed and insightful blog post that is related to the site you want to link to and links back to your own site. Of course, that’s if the site accepts guest blogs.

If you create well thought-out content on your own site, eventually the backlinks will come naturally. You should be warned, however, that if spammy and less reputable sites link to your site, it could negatively affect your SEO. Look for free backlink checker tools to see who is linking to your site. If you discover a site that you don’t want to be linked to, reach out to them and ask them to remove the link.

Canonical tags, No Index, and No Follow

Canonical tags can seem a bit complicated if you don’t understand what purpose they serve. Google frowns on duplicate content and in it may be necessary for your site. A canonical URL or canonical tag tells Google which URL is the main one you want the bots or spiders to index. Let’s say you have a website that sells training courses to be viewed online or through a DVD. Both the DVD and the online course may require a different page on your website for the ease of navigation. It would be hard to create different content for the same course on two different pages. By setting up a canonical tag at the head of the HTML code for the page you want indexed as the main one, you avoid dividing up your SEO juice by competing with yourself in search engine rankings.

Moz article on canonicalization

No index tags tells Google bots and spiders that they can crawl a page to understand what it’s about, but you are requesting them not to index the page for search results. I often do this when I create a landing page for a special offer applicable to only to certain customers. This is also useful to use on thank you, registration completion or privacy policy pages.

Code for noindex/nofollow

No follow tags tell Google that you have a link to your website that you don’t want to bots to follow for indexing. I had used this in the past when the company I worked for participated in sponsorship. I added a link to the event on my company’s webpage, but I created a no follow tag because the event website was so poorly designed that I didn’t want their bad SEO to weigh mine down.

Schema Markup

This SEO practice is relatively new and pretty powerful. Search engine bots and spiders are good at gathering data and making assumptions on what your content is about. But they’re not perfect. They can’t comprehend what your intent is. Schema Markup is a way to directly tell the crawlers exactly what your intent and purpose is to your page or website. In turn, this creates rich snippets for your website to display the most meaningful information right up front on the search engine results pages. Some examples of ways to use schema markup include event dates, recipe information, and review ratings but you aren’t limited to those options. This article provides great insight into the how and why to use schema markup on your website.

Examples of schema markup
Ontarget Interactive Schema Markup to drive traffic

Good Content

You can SEO the crap out of your website but what is the value of any of it, if you have poorly written content? It may bring in a ton of traffic but that doesn’t mean its meeting the end goal of creating more business for your company.

A good piece of advice but often hard to follow is to write for the customer, not for your company. You might think that your widget’s material composition is the coolest thing about this product, but if your visitors only really care about its warranty and you don’t mention it, then you’ve missed your mark. Your content has to answer the question that your target audience is looking to solve. Find what words your audience is using when searching for products like yours with free Google tools like Google Trends, Analytics or Webmaster Tools. These can tell you the keywords that people are searching for, and then you can mold your content around that.

Web sites aren’t set it and forget it. Fresh content also plays a factor in your search engine rankings. Update your pages over time and make sure they are still targeting the right keywords as trends change. Consider adding a blog to your website to ensure that you always have keyword-highlighting, fresh content for Google to index. Pay attention to marketing trends. Currently, there has been more focus on videos as marketing tools. Think about adding videos to your website, as it may draw in a different sect of new customers that you may not have been able to reach before.

Shooting in the Dark with SEO

Google and other search engines are always trying to adapt to their own audience by striving to present people with the best and most relevant content first. With this being the case, search engines are always changing up their algorithm on what ranking factors they find to matter most.

The magic combination of SEO rankings is a mystery and highly guarded by Google, which often makes digital markers and SEO professionals feel like they are shooting in the dark. What once was ranked as important by Google regarding SEO, a few years later may no longer bring in the traffic. This is why whenever I do a search on Google for SEO related information, I always make sure that I filter the search results to only show information within the past year. SEO is ever evolving and it’s important to stay aware if you want your site to maintain good rankings.

If you create a website that has genuinely good content that is relevant to what your audience is searching for, then you shouldn’t need to stress too much about SEO. As mentioned earlier, Google wants to provide their audience with the most helpful information first. Strive to make your page accessible, easy to navigate, fast to load, clear and concise, and you should be on your way to winning at SEO.

Usability and Accessibility

My most recent course lessons have been exploring the ins and outs of UI, UX, and Accessibility. How a person interacts with the site, feels when using the site, and their ability to navigate throughout is the backbone of good web design.

Below are the eight steps I performed to make sure that my recent discography website project is accessible and usable for everyone. You can click here to check it out.

Minify Files – Minifying my CSS files helps to remove page-slowing white space. I used the website, CSS Minifier, to compress my files.

Optimize Images – By optimizing images, it helps to keep my the file size of my images small so that the page and images load faster. I used a couple of free sites like Kraken.io and TinyPNG. I did out later on that Google’s PageSpeed Insights will optimize your images for you and put them in a file that you can easily upload.

Check Color Contrast – In my course about accessibility, I learned that color and especially contrasting colors are essential for visually impaired users. Lighthouse, located in the Chrome Dev Tools Audit tab, can help check for contrasting colors as well as other super helpful error checks.

Add Alt Tags – Alt tags are helpful to describe images and links for screen readers. I added alt tags for useful descriptions.

 

Add Table Summary – Tells screen readers what the table is about to help better describe the information that follows.

 

Table Head Scope – This tells screen readers what is a column and what is a row in a table.

Validate Markup – Validating my markup ensures that my website shows up correctly in all uses. I used the W3C CSS and HTML Validation Service tool to check that my code is W3C compliant.

Speed Test – Page load speed is vital in usability and SEO. No one will wait for a page to load before moving on to the next website. I used Google’s PageSpeed tools to test the site to ensure that it’s ready to go live.

The Tools For Success In Website Testing

Testing your website before it goes live is an important task to ensure the site’s success and longevity. Here are three tools that I found helpful in the designing process. If you are creating a site for a client, it is important that the final product can perform well.

W3C Validator – This is a free tool that checks the validity of your CSS and HTML files. It makes sure you don’t have missing closing tags or any other elements that are left behind. The tool provides you with suggestions on how to fix the errors.

Google Pagespeed Insights – Created by Google developers, this free tool checks your sites for things that may slow down your page load time. It even can provide you with optimized image files of your images.

Lighthouse – Another free tool created by Google developers, it audits your site for page speed issues, accessibility, and best practices. It is available on the Audits tab of the Chrome Devtools.

Regardless of the tool(s) that you decide to use, it’s important that they can help point out the common website problems of large image files, un-optimized code, caching and multiple HTTP requests. These issues slow your site and also contribute to poor website rankings.

I Have No Idea What I’m Doing – An Introduction To CSS Grid

In my most recent class assignment, I was introduced to CSS grid. I read articles by Jen Simmons on the topic and watched instructional videos by Rachel Andrew. As I read along and watched the examples in action, it seemed easy and straight-forward. It couldn’t get any easier than actually writing out exactly how you wanted divs to be laid out.

As I watched the tutorial videos assigned and followed along, I thought to myself, “ok, finally something I can do.” But as with all of my projects so far, it’s never as easy as it seems. I often tell myself that I have no idea what I’m doing. This project was no different.

I was tasked with redesigning the index page of my Discography project and do the same thing but using CSS grid. In the original assignment, I used Bootstrap.

It was easier to layout most of my page in CSS grid. It turned out I was already using the Holy Grail layout, and I didn’t even know it. Way to be original. So that helped a lot with positioning and naming my elements.

I struggled with getting my header nav links to align to the left and be responsive. I was able to accomplish that using a bit of flexbox. Part of the assignment was to add a feature query. I tried out the initial-letter rule to add a bit of flare to the band description in the center of the page.

Caniuse says initial-letter is a no-go on Chrome, but with the @support rule, it should be seen in Safari browser and be skipped over in other browsers that don’t support the feature.

I can say that by the end of the project, I had a better grasp on CSS grid and its capabilities. CSS grid and flexbox seem easier to use than Bootstrap, in my opinion.

Check out my design using Bootstrap – http://www.clorecreative.com/PanicDisco/index.html

Check out my design using CSS grid – http://www.clorecreative.com/cssgridpatd/index.html

Overall, can say I spent more time on the site using Bootstrap so it has a more polished look. But the CSS grid site took less time to put together. If I had to choose one or the other going forward, I think I would lean toward CSS grid and flexbox.

 

 

Designing Outside of a Framework – The Magic of CSS Grid

Up and coming web designers are at the golden age of CSS design and development. In the 1990s and earlier, designers were limited to designing their websites completely in HTML. But then they got smart when they realized that it made redesigns almost impossible. They separated the styling from the content to create a separate file called “CSS”. This started a revolution. Almost.

Fast forward another decade and designers and developers started to streamline the CSS process by designs frameworks and style guides and templates for faster web site turnaround. Frameworks such as Bootstrap took away most of the work of creating lines of CSS code by hand. That was great, but we became lazy. We became limited by the pre-defined templates and layouts that Bootstrap and other frameworks have created for us.

Jen Simmons wrote in her article, “The benefits of learning how to code layouts with CSS”, that it was time to go back to writing our own code. We stopped using graphic design to create websites. We started to rely on the same old website designs that we already laid out for us. CSS has all the elements we need to create beautiful UX designs that can convey the right message to our audience. We just need to learn how to use it.

New website design tools have become readily available like Wix, Weebly, Squarespace and old reliable, WordPress. Now anyone can design their own website in just a few hours with no prior coding experience at all. But with these predefined templates, all the web starts to look the same. Web designers have lost their creativity.

Simmons says that it is possible to make every new project unique because we now have the CSS tools to make it possible. The author writes, “Because now, finally, we have real tools for layout. CSS properties that were created to do layout. CSS Grid, Flexbox, Alignment, Writing Modes, Multicolumn, along with, yes, Floats, Positioning, Inline Block, Display Table — just to name a few.”

I also touched a little more on this topic in my blog post, “Going of the CSS Grid and Thinking Outside the Box.” 

 


Listed below is part of a class assignment to watch Rachel Andrew’s tutorials on the CSS grid: gridbyexample.com/video and this question for each video: what does the skill demonstrated in this video allow us to do? 

1.  Defining A Grid – This skill allows us to create our own grid layout using a couple rules of CSS

2. Defining The fr Unit – The fr unit creates flexible units without having to calculate percentages. It represents a fraction of the available space in the grid content and makes a grid responsive. FR means 1 fraction unit of the available space. As the screen size goes up and down, the available space adjusts.

3. Repeat Notation –  To use when you have a lot of column tracks in your grid. You can define the size and how many repeating columns. It doesn’t have to be limited by repeating. You can define your one-off columns before the repeating pattern.

4. Minmax() – This element sets the cell at a minimum and maximum width that you don’t want your object to exceed.

5. Grid Auto placement and Order – This rule helps to order the cells by row or by column, however you decide they should be placed on the page.

6. Auto-fill and Auto-Fit – Auto-fill tells the browser to fit as many pre-defined cells as it can on the screen, without the designer having to calculate how many will fit. If you add minmax to the rule, it tells the browser to not make the cells any larger or smaller than the pre-designed size amount you entered. Auto-fill will leave empty spaces if there aren’t enough cells created to fill the area. Auto-fit will distribute the sizes to fill the viewport. It will collapse the auto space to zero.

7. Auto-placement and packing modes – Grid-auto-flow: dense; fills up the space around the grid so there’s no chunks of empty spaces. It will move cells out of source order and find a space that it will fit in. Grid-column: 1/-1 will span a cell across the width of the screen and make it responsive.

8. Line-based Positioning – This helps to position items around the grid.

9. Named Lines – Allows you to name specific sections of your grid rather than relying on numbers for positioning. For example, by naming 2 fr [content start], you can now replace 2 fr by the words [content start]. Naming lines is helpful when working with media queries because you don’t have to change your numbering when referencing a certain size within a breakpoint. You can just reference the name.

10. Aligning and Justifying Grid Items – Align-items: start/end/center; or justify-items: start/end/center; will align or justify cell positions within a grid container. Align-self and justify-self will position individual line items within a div. Justify moves items left to right within the cell. Align moved items up and down within the cell. The default positioning is stretch.

11. Aligning and Justifying the Grid – Align-content: start/end/center; or justify-content: start/end/center; will align or justify the item grid items together as a group within a container. The default positioning is start. :space-between; will override preset width, height and grip-gaps and place grid items on the margins of the container. :space-around; will create equal amount of spacing with each items.

12. Grid Template Areas – Positioning items on a grid by calling them out by name. Do this my naming each portion of the grid. For example, if you have a header, you will need to give it a name within your CSS first – header {grid-area:hd};. Whereas header can be any div or item in your html and hd can really be any name you want to name that item. Then you’ll have to go under .grid or whatever you named the div that contains the grid to position each item. Use the rule grid-template-area:”(insert named grid items here in the order you’d like them to be placed”; to layout your grid.

.grid{
grid-template-area:
“hd”
“main”
“sidebar”
“footer” }
will place each item horizontally on the grid.

13. Magic Lines and Magic Areas – This video shows how to position named lines within a grid.

14. Nested Grids – You can set up grid items inside of grid containers, essentially a grid within a grid

15. Subgrid and display:contents – Only direct children of a grid can become grid items. if you have divs inside items withing the div.grid, they are not effected by the main grid. The rule display: subgrid; on the div inside of the main grid div will include the child items within the main grid items. The rule display: contents; will make the inside div items act like they are part of the main div and will remove the parent div around them. Only the box generation is effected by the display:contents rule.

16. Stacking and z-index – Use if you want to place grid items on top of other grid items or overlay them. z-index will bring items forward. RGB colors add transparency to background colors.

17. Anonymous Items – Spans and div can act as grid items.

18. Absolute Positioning and Grid Items – Absolute positioning takes a grid item out of alignment and then you can move it around the grid as needed. Position: relative the parent so you can position:absolute the child.

19. Grid Template Shorthand – You can combine grid-template-rows and grid-template-columns into grid-template: row info / column info;. Shorthand naming areas by first naming each area, for example .grid > div:nth-child(4){grid-area:whatever shorthand name you want to give the grid item; } item in parenthesis is whatever you named your div item within the grid div. Then under .grid you can use rule – grid-template-areas: “whatever shortname you gave your grid item in order of how you want them to appear”;

You can combine rows, columns and template into one rule – grid-template: “head head head head”  (means header will expand over 4 rows) auto (row size height for first row – auto makes it just high enough to fit whatever content is in it) “side1 main main side2″ 300px (300px is row height for the second row) / 1fr, 1fr, 1fr, 1fr; (1fr is 4 fraction units in height). 

20. Feature Queries and Grid – Not all browsers support CSS grid, like Safari. You can set up a feature query to show a message if the browser doesn’t support grid. @support (display:grid) {.message (.message will be whatever you call the paragraph class that you add your message) {display:none;}}


Next part of the class assignment is two pick two common CSS grid layout patterns that I might use for my discography project redesign.

 

I can see this option as one of my redesigns for the home page of my discography project. It is responsive and I can move the band images to the side bar and move my table to the 2 column larger section.

 

This option is also doable for my redesign. I’m not really sold on it, but I had to pick two so this was my next best choice. i just don’t have the vision yet.

 

 

A Technical Approach to Getting Your Design Team On The Same Page

I usually base a lot of my design decisions on what I feel looks good. Since I’m still a web design student, I’ve been lucky enough to get away with this methodology for now. I don’t know how I’ve come to these conclusions; maybe my right brain rules the show? But for some more analytical people, they need a more technical approach when it comes to web design.

Priyanka Godbole wrote an article entitled, “A Framework for Creating a Predictable and Harmonious Spacing System for Faster Design-Dev Handoff“ that answers the question of, ‘How can we over complicate a spacing issue so that everyone is on the same page.’ This is not a quote in her article, but rather my own point of view after reading it. Granted, I’m saying this because I didn’t fully understand her approach to solving her spacing issue. However, that is what I was able to gather after reading it.

When designing and developing a UI with a team, consistency and spacing become an issue. In Godbole’s case, she was developing an internal database system in which the design parties involved were not following any guidelines in spacing. As a result, extra padding, margins, and other inconsistent spacing were becoming an issue. Using a lot of hypothesis testing, multiples of 8 and 14, grids, intervals and geometry, her team was able to pick values that worked for the project and agreed to adhere to them.

While I didn’t understand most of her strategy on how she and her team calculated the code, I do understand the need to have guidelines in place to keep the experience consistent across all screen sizes and uses.  Nathan Curtis wrote an article on a similar theme, but more user-friendly content in, “Space in Design Systems”. Curtis and his team struggled over consistent spacing and felt limited with the HTML box model. His article brings up a good point: “Most collaborators can’t see space, a primary reason it’s so arbitrarily applied.” This is true in most cases, I believe. If you are working with a team of technical and nontechnical backgrounds, design definitions can differ. Curtis’s team created a model of S – XL which equals a certain pixel range to define specific elements within the UI coding.

Both articles stressed the importance of designing for consistency. When creating a methodical system of margins and padding, it shrinks the gap between designer and developer. From my own personal experience, I understand how there can be a disconnect between designers and developers on what looks good. A designer may be designing for user experience based on consumer research or other strategies, but a developer may be creating the backend magic that makes all of the features and elements in the code run efficiently and effectively. The developer is not concerned with the overall color and spacing structure. The designer may be wishing for something outside of the limitations of what the system can do. I think the key in both articles is to create agreed upon guidelines on how the finalized product should look and perform. How you get to the conclusions that your team agrees on is a whole other journey.

Professional Growth Activity – Module 4

Name: Jenn Clore
Activity: SheCodesOKC “Lightning Talks
Description of Activity:  The first meeting of SheCodesOKC where some wonderful women will give lightning talks on what they have been working on! 

Date(s) of Activity (also include times):

8/27/17 2:00p to 4:00p

Student Evaluation:

Why did you select this activity?

This was a Meetup geared towards women in technology fields. I am hoping to gain some connections within the group should I have some future questions on class projects or coding in general.

Would you recommend this activity for other students? Why or why not?

Absolutely. It’s important for women in STEM fields to support each other and help further our growth in the industry. The women had different specialties and insights that I think will be extremely helpful to other women students.

What did you like best about this activity?

The various types of information that was shared. Five different speakers gave vastly different presentations. I feel that there was something for everyone. Here are the topics that were shared today:

  • Preparing for an Interview
  • Hypothesis Testing
  • Factoring in Page Load Times with Active and Passive Waiting
  • Gamification
  • React Setup with Webpack

What did you like least about this activity? How would you make the activity better?

Some of it was a little over my head but I think that was to be expected and it at least provides me with a general understanding should the topics come up in the future. I think in the future, maybe it would be helpful to have a theme for the topics. For example, a series of speakers about the interview process, or a series of speakers on Bootstrap uses. It was only the first meeting, so I’m sure it would evolve over time.

What is a creative idea/concept you can take away from this experience and possibly implement into your work?

In the talk about Page Load times, I learned that Walmart had a 2% increase in conversion for every 1 sec improvement. I think this helped to further cement the importance I should put into minifying any future web designs. The speaker provides up and coming tips to advance loading times with rel functions. They are pretty new so it isn’t supported on all browsers yet, but it will be.

Are We Ready For Emotionally Intelligent Machines?

Sophie Kleber of Huge Inc. recently wrote an article titled “It’s Time to Design Emotionally Intelligent Machines.”  As technology advances and becomes more complicated, design trends have shifted towards creating human-machine interactions. As society becomes more familiar with the use of bots, smart speakers, and other “talking machines,” research shows that society wants the interaction to be more humanized. Humans don’t want to feel like they are talking to a computer. The question then becomes: how do designers refine the experience while simultaneously preventing brands and companies from profiting from the interactions or swaying consumers to go in a forced direction unknowingly?

In the article, Kleber brings up a good point, “When machine learning meets affective computing, what do designers and brands have to think about to create beautiful and supportive experiences that are more Big Hero 6 and less Ex Machina?” Are we ready for Big Hero 6 to become a reality? Companies are already experimenting with it and have been for years, whether or not we knew about it or were ready for it.

Messenger bots are becoming increasingly popular on websites and social media platforms.  Siri, Amazon Echo, and Google Home are just a few versions of our merge towards intelligent machines. Designers are now tasked with creating genuine and emotional responses. I think to create something that can connect with consumers; we must first understand them and be able to answer these questions:

  • What do customers hope to achieve by using this product?
  • What do they feel when they are using the product?
  • Will emotional responses from the machines make the product or service better?

Kleber writes that there are three categories of emotional responses that can classify an emotionally intelligent machine:

  1. React like a machine – More preferable in transactional situations and security moments.
  2. React like an extension of self – The machine recognizes a particular emotion but does not steer the user in any direction based on those feelings. Useful in self-improvement services.
  3. React like a human – The machine can interpret emotions and with the users’ permission, assist to sway their feelings. This can be used in mental-health capabilities.

There are benefits to using intelligent machines for some brands, but designers should ensure that the experience is genuine and in-line with brand personalities. Studies continue to prove how persuadable consumers can be. Ethically, developers should be held to a higher accountability to ensure that the persuading is occurring after permission has been granted, as well as making the experience feel genuine. This is a unique challenge for designers as we can only design something that is as emotionally aware as we are. If the person or team creating a messaging bot lacks empathy, it would be hard to for the consumer to form an emotional connection with the product or service. To create a successful product, I think a bit of sociology and psychology should be involved. To maintain someone’s attention while using the product is to know how someone’s mind works. That’s a big request from a designer. How can a tool be efficiently designed in foreseeing how a mind will work? Are we ready for this new technology?

Before brands jump into creating their intelligent machines or artificial messaging on their channels, I think that they must first learn from person to person interactions. Before automating your online customer service, first, have it backed by actual people. Learn from what people are asking for and solve their problems on an actual personal level. From those experiences, you can have a better understanding of your consumer and how responses should be made. Designing a poor, intelligent machine is worse than not creating one at all.