Category Archives: Web Development

Creating a WARC archive for a WordPress Blog

Dynamic Media, Web Development

I have been working on a few new concepts for maxbronsema.com but wanted to create a copy of what the site, mostly the blog, before implementing these new ideas. My blog has been around for a long time and I don’t like the idea of deleting a lot of my writing. One day my family may want to read it. In my daily work I have some experience creating site copies but I had not tried it with a blog. For the longest time as a web developer I have been ok with my work being ethereal, a site or project is built and then it is a living entity changing each and every day, occasionally being rebuilt entirely with no semblance of the prior work existing. I am not sure I am comfortable with that concept any longer as more and more of the web I grew up with and the parts I created are lost.

The primary goal was to create a copy in the WARC format. WARC is the Web Archive File format. For a long time it has been straightforward to create a WARC file but cumbersome to view. Using the command line utility wget creating a copy of a site is straightforward. 

$wget --mirror --convert-links --adjust-extension --page-requisites --no-parent https://yoururl.com --warc-file="name-of-file-you-wish-to-create"

The awesome Archive Team has a nice write-up on using wget for just this purpose and importantly the why behind using the WARC format.

Once you have your site generated as a WARC you can store it in your favorite backup destination as well as someplace else just in case that copy gets destroyed. You can view it at anytime by using the amazing ReplayWeb.page service. It is part of the great Web Recorder project.

Go forth and create personal archives of your writing and work.

HighEdWeb 2018

Education, Web Development

HighEdWeb 2018 was fantastic. I had a markedly different experience than my first HighEdWebin 2017. The lineup of discussions this year were more forward thinking and highly relevant. The conference team did a great job putting together an exciting lineup and great activities.

This year the conference was on the west coast in the beautiful city of Sacramento in California. The pace of sessions, breaks, and time outside of the conference center was well balanced. I was fortunate enough to again be selected to speak to attendees. I presented this year on protecting and promoting your brand by leveraging design systems. I am grateful for the positive response and feedback shared by attendees.

Following are my personal notes from the sessions I attended.

Putting Atom Design to work

  • Lean on your pattern library, it will get stronger the more you do.
  • An actual plug for Adobe XD from a user. Another plug for Sketch too.
  • https://fractal.build/ is a newer player in the atomic design world

Give Content Contributors the AX

  • AX = the relationship your content authors have with their authoring tools
  • We take personnel problems, systems problems, and make them a training issue.
  • You can innovate by making unicorns.
  • Kurzweil – test websites with this too – https://www.kurzweiledu.com/default.html
  • The AX should prevent authors from making inaccessible content or at least guide them into making it accessible.
  • Resource:
    • https://github.com/LRNWebComponents/hax-body
    • oerschema.org
    • bit.ly/haxplaylist
    • haxtheweb.org
    • elmsln.org

Diversity on websites

  • Information architecture as a tool of oppression
  • Put Diversity at a high level on the global nav
  • Often there is a microsite with its own URL (it needs to be found and in other high level navs, say admissions)
  • Landing page is another strategy (link to from top level)
  • Look at pages and be critical of objectification. Make sure silencing does not occur.
  • Stats page should not show male/female. Instead talk about pronouns, make sure imagery does not bucket females with skirts for example.
  • Diversity as interest convergence.
  • You have to be all about balance.
  • Research shows limited content addressing black interests of concern, no messaging around Ferguson, Charlottesville
  • The best of the research
    • University of San Francisco
    • Loyola Chicago
  • Top Tips
    • Build a diversity landing page
    • Link to the page across your sites and make it near the top level
    • Balance authentic and aspirational diversity content, acknowledge shortcomings, be careful of the word “Strive”, a bit spineless
    • Create a small number of high quality pages, then expand
    • Tell real stories and real Information
  •   Short term
    • Images, candids and profile photos with captions and names
    • unify, elevate, promote content
    • do a focus group with non-majority groups and have web team participate

A hat of many hats – becoming the web product owner

  • Product Stewardship – not just product management.
  • “Focus on continuous delivery of valuable … user experience …”
  • Sometimes the product owner is termed Business Analyst
  • The Questions
    • What problem are we solving?
    • Who are we solving it for?
    • How are we going to measure success?
  • I like the idea of a website roadmap.
  • Ithaca.edu is a new Drupal higher ed site.
  • Change our homepage meeting to web product team meeting.
  • Trying to be a project manager and a product owner means being terrible at both.

Beautifully Accessible

  • figma is a design tool for the web
  • Change thinking from user experience to human experience
  • In 2016 census 12.5% of all americans reported living with a permanent disability, 40 million people
  • Mentioned :focus-visible, a handy newer pseudo property
  • https://modalzmodalzmodalz.com/ shows issues with modals

 

 

Gettin’ Griddy With It – CSS Grids

  • flex is a straight line, row or column, if it looks like a grid, then flexwrap has been enabled
  • There is a flex cross axis which determines where content is lined up
  • flex: 0 0 auto makes things stay the size they are, no growing or shrinking
  • grid-gap: #px; This is cool, it lets the grid determine the spacing between each grid box automatically
  • To position items within the grid you can use grid-column and grid-row shorthand properties.
  • grid-column and -row also support span (e.g. grid-column 2 /span 2);
  • grid-row(1/-1); will make content span the entire height of the grid.
  • grid just continues to be awesome
  • grid template areas allow you to build out named grids to plop elements into which is great for easily seeing what is going on later. It also allows very rapid prototyping.
  • minmax value is versatile way to ensure responsive grids. You can do something like repeat:(auto-fill, minmax(200px, 1fr);

We developed an online CMS training and look what happened

  • Staff don’t have to travel to train.
  • Drupal Training is then how we can tie in accessibility training too
  • Training videos, request access to sandbox, reviewed by staff, then access to live website. Takes about 1.5 hours of time.
  • Average about ~100 new users a year
  • Quality of help ticket requests are vastly improved since starting training
  • Know your primary audience
  • Break your training into small series, 5 minutes or less.
  • Make it like a conversation in the video.
  • We should use some improved equipment as well, not just built-in system stuff.
  • Another plug for hemingwayapp.com
  • In the documentation to go with your video use screenshots as needed, provide the steps needed assuming the user did not watch the video
  • Could we have students build this out?
  • Beta test the videos a lot and listen to the feedback, look for patterns of things consistently missed
  • We could include a page about how to request help and what a good support request looks like
  • Maybe add an optional module on “writing for the web”

Don’t call it an intranet

  • Internal communications was not a focus at the school, hence email overuse, paper flyers, and external websites. Tons of paper is not a sustainable practice.
  • Refocus external sites for external audiences, reduce email overload to students
  • Helps build an intentional community culture
  • Evaluated packaged intranet solutions, met with campus stakeholders
  • Make the case: articulate the benefits of building on top of a system you already understand, develop a design, build a prototype
  • Plan the project: scope out needs vs. wants, do a content audit, IA development.
  • Big effort to collect all of the external content that really should have been in the intranet
  • Overcoming the perceptions of the existing intranet
  •  ** Name it something that does not include intranet
  • The login greets by their name, shows date and time, and shows the weather in their location
  • The landing page sort of personalizes for the role you have
  • Identify power users (those that send lots of emails or make lots of posters), and train them on how to use the system. Also tried to align with new internal communication strategy.
  • Measured success in increased traffic and pageviews. It has reduced email use and refocused external sites to be for prospective students.
  • Search behavior has changed on external sites, they were able to retire and consolidate legacy sites, got rid of internal use forms from external sites
  • Have created a place where institutional knowledge can reside rather than only in people
  • Search has been a pitfall, users still search for external resources inside of the intranet and the other way around. Need an elegant way to show separate resources.
  • They have 3 people doing this, definitely a product owner exists whose main goal is to increase internal communication practices and nurture the intranet
  • Continue to review the data and use it to support adoption of moving content into the intranet

How do we know how we are doing? – Analytics strategy

  • Understand your user goals and needs – set up interviews with as many stakeholders as possible.
  • Keep conversations high level, you don’t have to focus on Analytics
  • Are there key events throughout the year that they work toward every year
  • Ask students how they use the site
  • Talk to your own team
  • Content plan and strategy also drives analytics
  • Questions they wanted to answer
    • Demographics
    • Audience breakdown
    • popular content, most shared content, normal top pages, sessions, etc…
    • Downloads
    • nav patterns
    • top screen sizes and devices
    • sources

Google behavior report gives a lot of great starting data

  • Behavior flow is a good starting point to see other entry pages into your site
  • She sets up individual segments based on what pages people view – gives more personal data
  • Coordinated campaign UTM tags between alumni and marcomm so we can see what campaigns are driving content to websites
  • Hojar is used by Stanford Law as well
  • They craft custom analytics measurements based on the campaigns they choose to run
  • Match your content calendar with analytics visits to see if people click on the content when it is distributed
  • https://law.stanford.edu/analytics-recipe-book

Can you do it in the dark? Making your social media more accessible.

  • The unemployment and underemployment for disability is something like 70%, I want to look into that
  • Twitter and FB have pretty good support. For instagram, put in alt description in the caption unless the caption clarifies it. Example: [Image Description: …]
  • Facebook supports SRT file uploads
  • Instagram/Twitter – you need to burn the captions into the video
  • Add audio description for videos and broadcasts – social media currently does not support audio description
  • Avoid jargon and technical talk where possible
  • Be clear, concise, make it stick
  • Champion accessibility through the entire content creation process
  • Social media is now embedded into the website content, we need to be clear to make that link and keep our content accessible
  • There is a facebook accessibility team to follow on facebook and twitter accessibility twitter account
  • Involve people with disabilities.
  • Look for a guide on accessible snaps (SnapChat)
  • Use camel case in your hashtags
  • Buffer is a great accessible platform, it is part of their culture
  • Hootsuite has it on their roadmap and they believe are close to tieing in accessible posts
  • Build in accessible content creation time into the editorial calendar

 

DrupalCon Nashville – A summary that is late, but better than never

Drupal

DrupalCon is hands down the best Drupal summit/camp/conference that exists. The other formats may be more intimate, it is much easier to have quiet time for those of us who identify as introverts, but the energy and enthusiasm at DrupalCon is always infectious.

My last DrupalCon was 2015 in LosAngeles, and while Nashville lacked Palm Trees the weather was great and the music was everywhere. It was wonderful to connect in real life with those I generally only talk to via the Drupal issue queue, IRC, or Slack. I certainly walked away with more than I gave and have been spending the time since DrupalCon putting a lot of the ideas into practice.

I was honored to be a speaker on the accessibility panel at the higher education summit that happens the day before the full conference. We tended to talk about accessibility in general terms and the feedback received was that at a Drupal conference they want specifics on Drupal. Luckily, there were many great sessions on just that topic throughout the week so I hope everyone was able to attend or watch the videos afterwards.

Unfortunately, I was unable to attend the sprints at the end of the week, it is one of my favorite parts. I will be sure to stay while in Seattle next year. I was able to make significant progress on https://www.drupal.org/project/drupal/issues/2770835 though it is still not in core. As core gets bigger, these types of fixes are going to take longer to get approved as lots of modules now can be affected by small changes.

The following are my raw notes from the conference.

Pre-Summit:

Style Guide stuff:

 

Migrating 10,000 great books to Drupal 8 – Princeton University Press

@dergachev – Alex Dergachev

  • 10,000 books and 18,000 static pages to migrate.
  • They chose Drupal 8 for the community, empowerment of content editors, integrated & extensible platform for search, e-commerce, SEO, APIs, and the ability to customize the information architecture.
  • To handle the migration from SQL, they had a PowerShell script that ran nightly to run sql queries that generated CSV files. Those CSV files then were imported into D8. That is a pretty slick way to decouple from SQL.
  • Used context, context_active_trail, entity_reference_revisions modules
  • Checkout blackfire.io as an xhprof alternative and it is focused on performance
  • Also, this github project, https://github.com/dergachev/sitediff
  • evolvingweb.ca/training for D8 – 5 day in person

Pre-Note & DriesNote

  • The total eclipse website is built with Drupal
  • 40% of speakers at DrupalCon are from under-represented populations
  • Drupal 8 migrate, api-first, media, and site management is in 8.5.
  • New Balance website mobile app is powered by Drupal
  • React VR headless drupal application for tours – freaking cool, nothing custom done to Drupal, just uses core
  • It takes 41 clicks and many many minutes (30+) to get Drupal installed compared to other PHP frameworks. Drupal is working on getting this fixed.
  • The UI for content creators will be refreshed and over time improved patterns will emerge
  • We should not compare ourselves to Drupal 6 or 7 but competitors like squarespace
  • Drag and drop media management is on the way. Really need more contributors to the media initiative to make this happen faster.
  • Contextual configuration management is something that is going to be built into core soon
  • https://drupal.org/promotedrupal
  • Use the “simplify drupal” tag in the issue queue for efforts related to all of the above
  • Drupal Values
    • Prioritize Impact
    • Better together
    • Strive for excellence
    • Enjoy what you do
    • Treat others with dignity & respect
  • Find more in-depth discussion at https://drupal.org/principles

Building Banging Websites with Bricks, Paragraphs, & Modifiers

https://events.drupal.org/nashville2018/sessions/build-banging-sites-bpm-bricks-paragraphs-and-modifiers

  • https://www.drupal.org/project/bricks
    • Combines layouts and entities into one page
    • Works in tandem with paragraphs, you can expose your paragraphs by putting them in a layout bundle
    • Bricks have different view modes
    • Easy drag and drop
    • Now supports dynamic entity references module
  • https://www.drupal.org/project/modifiers
    • Inspired by the M in BEM
    • Looks really cool.
    • Extends bricks.
    • No more making classy paragraph derivatives
    • Can even hook into it or plugin
    • They have the drupal module modifiers_pack as a great starting point
    • Really saves time as all is reusable. Spend more time with customer. Less time building same thing over and over.
  • Paragraphs are scoped to content while blocks are global
  • Also, checkout the “look” module, https://www.drupal.org/project/look which allows sets of modifiers to be applied
  • The bricks and modifiers are all pretty new but it seems like a super recipe

Nurturing a Productive Lifestyle

https://events.drupal.org/nashville2018/sessions/nurturing-productive-lifestyle Check this session out… I caught the tail end and it seemed good

Charts

https://www.drupal.org/project/charts

  • Use Google Charts or High Charts

Journey to the Drupal Heart – Symfony 3  basics and a bit beyond

https://events.drupal.org/nashville2018/schedule/2018-04-10

  • Symfony is a set of reusable PHP components and Drupal uses a set of these. It is really a MVC framework.
  • Symfony has its own server, we don’t use that in Drupal but handy for other stuff
  • It has a built in debugger that appears at the bottom of the web page that loads
  • Every page needs a route, controller, content, and
  • Each class is namespaced to be unique to avoid conflicts. It follows the folder structure\name
  • You can use @annotations or yml files for route specification
  • You do dynamic routes with parameters
  • Parameters and variables should match
  • $php bin/console debug router spits out all routes for you to see and you can add more specifics to router to narrow down the results
  • Services are useful objects – provide reusable functionality
    • To access services you need to get them through Container
    • Container object is provided by Symfony Controller
    • $php bin/console debug::container to see a list of them all that you can use before adding your own
  • Templates are the V in MVC
    • They use TWIG
    • {{ }} means say something
    • {% %} means do something

Maintain and improve team health and productivity

https://events.drupal.org/nashville2018/sessions/maintain-improve-team-health-productivity

  • Kind of a neat thinking paradigm, be like water, respond to a request with the appropriate response of ripples to the level of the request
  • Everything is a lesson learned
  • A problem when managing multiple projects is that you are not able to give each team your undivided attention
  • Not everything is priority 1, you have to set boundaries. Pause and reflect and help the client figure out what is most important for your end-user.
  • Another reminder to time box effectively and to stick to your calendar
  • Get a 3rd person to weigh in on an issue if the issue continues to recur
  • Create a capacity calendar for ourselves

Maintaining Design Consistency Across Every Channel

https://events.drupal.org/nashville2018/sessions/maintaining-design-consistency-across-every-channel

  • Lightning, MailChimp, and Carbon style guides were dissected and highlighted
  • Sketch and Zeppelin are two products that can help with developing the guides

Integration of Drupal Coding standards with Git hooks

https://events.drupal.org/nashville2018/sessions/integration-drupal-coding-standards-github-hooks

Think Your Website is GDPR Compliant? Think Again!

https://events.drupal.org/nashville2018/sessions/think-your-website-gdpr-compliant-think-again

  • The spirit of the law is to put the data power back in the hands of the people
  • WWU is certainly at risk for non-compliance
  • The GDPR is not just an IT discussion.
  • There are several roles that need to be doled out
    • Supervisory authority (This seems to be only an EU requirement)
    • Controller
    • Processor
      • All 3rd party services that touch the data need to be GDPR compliant ~ that will take work with purchasing to confirm
    • Data Protection Officer
      • Should not someone with conflicts of interest
  • Rights
  • One a breach occurs you have 72 hours to notify
    • There are some ways to avoid that but you have to be transparent
  • Users have a right to have access to all their data, how it was obtained, and how it is used
  • Right to erasure (to be forgotten)
  • Data portability – they have the right to move their data to other systems
  • Privacy by design
    • We need to reach out to everyone on campus that collects data, EE, advancement/alumni, admissions, departments, etc…
    • Only collect exactly what you need
  • Privacy Experience (PX)
    • Always be transparent
    • Use easy to understand language / no “lawyer speak”
    • Users opt-in to how the data is used, not opt-out
  • No longer should developers and engineers have access to production data. We should anonymize it.
  • Privacy by design
    • Limit attack surface (remove modules from prod when not in use)
    • Keep solutions simple
    • Encrypt PII
    • Know your regulatory requirements FERPA, HIPAA, GDPR, PCI, CAN SPAM
    • Write policies and procedures and then follow them
    • Automate auditing and compliance processes
    • Log events and transactions
      • Keep the logs clean, get rid of PHP notice and warnings in WatchDog by fixing the issue
  • One encryption key per user – a concept to look at  https://info.townsendsecurity.com/gdpr-right-erasure-encryption-key-management
  • Marketing Advantages of Privacy
    • Make trust your competitive advantage
    • 94% of customers are more likely to be loyal to transparent brands
    • Trust enablers
      • Deliver value
      • Embrace education marketing
      • High Quality
      • Empower the individual
  • Consent for one campaign doesn’t mean consent for all anymore
  • Be able to prove you have consent – even on past opt-ins
  • Talk with marketing automation and CRM platforms to see if they offer tools
  • Creating an action plan
    • PX takes a team, we all need to come together on creating the positive PX experience
  • Data collection
    • What are we collecting and why
    • Active vs. Passive
    • Storage and Encryption
    • Integration Points
  • Messaging and Consent
    • Opt-in language
    • Privacy policy and legal documents
      • In plain language, not legal language
    • Internal messaging around value of a great PX GDPR experience and marketing impact
  • User Control
    • Data portability
    • Revoking consent
    • Data erasure
  • Next steps
    • Legal should assess risk
    • Create/Update security and privacy policies
    • Technology teams prioritize remediations
    • Implement remediations
    • Document remediations and next steps
    • Rinse and repeat

A New Help System for Drupal

https://events.drupal.org/nashville2018/sessions/new-help-system-drupal

D.O issues to take a look at:

  • 102254
  • 2516902
  • 2701289
  • 2587469

The goal is to provide inline help for the entire system, not just modules. You want to keep the structure that exists, but make it more flexible and easier to update and find for the end-user.

Customizable workflow help should be able to be created.

HigherEd BOF

Hard to take notes, standing room only

  • Automated site-owner emails that if not responded too, then they are shut down. Would be a great way to handle all of the dead WP sites.
    • Can CampusPress help with that?
  • Reiteration that compliance is a good tool for shepherding
    • Policies at the top are helpful to reference
  • This could be a good tool for us, https://www.drupal.org/project/profile_module_manager. It looks like it would replace “profiles,” not really sure about D8 support.

A smarter Way to Test Accessibility – a comparison of top tools (Lighthouse, Tenon.io and WAVE API)

https://events.drupal.org/nashville2018/sessions/smarter-way-test-accessibility-comparison-top-tools-lighthouse-tenonio-and

Gaps in automated testing really do exist. Manual testing is needed, examples:

  • Image has alt text, but does it make sense in the context
  • Identify form field labels, but is the label clear and easy to understand
  • Has headings, but is the hierarchy correct
  • A menu is proper HTML, but does it work with keyboards opening a dropdown?

LightHouse is an open source tool developed by Google and is built upon the open source rule set AXE.

Tenon.io and WAVE have costs associated with them.

All of these have command line tools.

LightHouse – https://github.com/GoogleChrome/lighthouse

  • You can output this as json and then parse as a gulp task to have a nice report
  • Then have the gulp task run on save or git-commit (very neat)
  • You can use this service offline! That means you can run these tests against a local dev URL

Checkout git guppy that lets you run gulp commands on pre-commit hooks.

https://www.npmjs.com/package/git-guppy

You can extend that concept to Jenkins to find ways to automate some of this checking on prod or prior to merges. Maybe some of these could be done as a suite against a set of archetypal pages.

More predictions on machine learning improving automatic captions and alt text on images.

From Feedback to Finish: How to Leverage User Focus Groups for Website Design

https://events.drupal.org/nashville2018/sessions/feedback-finish-how-leverage-user-focus-groups-website-design

Chicago Park District – Serving all of Chicago

  • Migrated from a heavily customized older website/system
  • Had lots of data to work from with analytics, user surveys, and benchmark/comparison analysis

A focus group series was created to identify why people were accessing or ignoring the data, the need for external validation. The end goal is to find out how people really use the website.

One specific approach – http://cutgroupbook.org/

Where to start

  • Develop questions
  • Scheduling
    • You need to be available, have an appropriate physical space, and some equipment.
    • Do it in a timely fashion so that the results matter to the project
  • Get volunteers to proctor
    • People that manage the content
    • People that develop the systems
  • Review how the test will run
    • Outline how it will all work
    • Run through the test with each other (the proctors)
    • Procedure for people coming in through the post-test proctor questionnaire
      • Get feedback from testers and proctors
  • It ends up being really hard to not “help” testers, but you need to let it play out
  • Test on a variety of devices, not every tester needs to use all devices, have some use a phone, some use a desktop, others use a tablet, etc…

Outcomes

  • Cleaner homepage
  • A clear focus on mobile usage
  • Streamlined searching
  • Highlight mapping options

Take a look at the linked slides as there is a good slide at the end titled Practical Magic

 

One click upgrade to Drupal 8 – why, when and how

https://events.drupal.org/nashville2018/sessions/one-click-upgrade-drupal-8-how-why-and-when

  • Quick overview of default out of the box migrate using the upgrade button
    • Field Collections are not yet support
  • Custom updates with Drush
    • Drupal upgrade, migrate tools, migrate plus, and migrate manifest
    • Supports roll back migrations and exposes it to the front-end
    • Also allows you to stop and reset messed up migrations

Feeds, https://www.drupal.org/project/feeds, may have a stable D8 release this week

Provision 4 – Aegir BOF

https://docs.provision4.org/

Try converting drush commands into pro commands

It is ready for testing

It is based on Robo, https://robo.li and Symfony Console

Follow this issue to see when it will drop, https://www.drupal.org/project/provision/issues/2912579. Supposedly soon.

Lots of talk of moving Aegir to host the websites in a docker container, but one container for all sites, unless you want a stack per site.

Drupal Console has a set of docker commands as well

Drush.inc files may not yet be supported. We want to test that for sure if this actually goes forward.

Webcomponents, Polymer and HAX: decoupling authoring for Drupal and beyond

https://events.drupal.org/nashville2018/sessions/webcomponents-polymer-and-hax-decoupling-authoring-drupal-and-beyond

Headless Authoring Experience (HAX)

  • Perils of ignoring content authors
    • Panic Mode calls coming in from authors
    • Content gets stale as no one wants to make updates because it is hard/confusing
  • Lots of attempts at making it easier over the years
    • Tokens
    • Short codes
    • Snippet templates
    • And more, paragraphs, bricks, Divi in WP
  • Try it at https://haxtheweb.org
    • Full on de-coupled authoring for not only Drupal but for everything
    • Everything is a new web component
    • It looks really awesome
    • One edit tool to rule across all platforms
    • That is really cool.
  • WebComponents power it all
  • Already can do tables via CSV import, tables via CSV import
  • An a11y compatible video player
  • Playing on working element queries
  • 147 components available now at https://www.webcomponents.org/author/LRNWebComponents
  • HAX is pluggable so any of the 15,000+ web components that exist can be brought into HAX
  • HAX objects follow JSON Schema – http://json-schema.org/
  • Allows us to turn off tons of wysiwyg and media modules 🙂
  • Polymer which is kind of like jQuery for web components and it can generate help documentation per component
  • A question was raised about the migration to Polymer 3?

Once Upon A Time: Telling Stories For Better Engagement

https://events.drupal.org/nashville2018/sessions/once-upon-time-telling-stories-better-engagement

  • We can spot stories
  • Story structure – the Hero’s Journey – the protagonist
  • Contrasted Star Wars versus Mean Girls and pointed out they are pretty much the same story
  • Story elements
    • Ordinary world
    • Call to adventure or inciting incident
    • Refusal of the call
    • Meeting the mentor
    • Cross the threshold – start the journey into the special world
    • Tests, allies, enemies
    • Ordeal
    • Reward
    • The road back – beginning to move back to the ordinary world
    • The resurrection
    • Return with the elixir – the knowledge, the object, …
  • We remember story!
  • Effective advertisements that stick in your mind generally leverage story
  • Boring > Cheesy but other options do exist
  • The long game is important, build trust, don’t push
  • Add value with each touch, don’t just push reminders with no extra value added
    • What would that look like in higher-ed
  • You are not the hero in the story, the customer is the hero and you play the mentor role
  • No one is average, don’t design for the average. Specificity is what draws us to characters and engage with stories. UX persona’s can help. He shared a picture of the coke advertising “share a coke with NAME”
  • Celebrate the win – their success is your success.
  • Purchase is not the finish line. Once students are accepted and attending, keep mentoring, keep celebrating their successes
  • http://johnrhea.com/once

Entities 301 – Entities Elsewhere

  • Watch this

HighEdWeb 2017

Web Development

Recap

HighEdWeb is an interesting conference. It focuses on a niche, web development and management in higher education. I had not attended this conference in the past but had heard good things. Overall it is a worthwhile conference, there is a very strong sense of community and shared struggles. The technical presentations were a mix of solid development practice reminders and a smidge of pushing the boundaries. I tend to like the future focused presentations more but it was hard for me to take issue with anything in the sessions.

The keynotes were fantastic. Tatjana Dzambazova’s presentation was like sitting through a year of the Economist’s technology quarterly issues in one hour. Very exciting stuff. Felicia Day closed out the conference and her story was great to hear. She certainly had a very strong fan base in the crowd.

The most fun technology takeaway from the conference was a newer development tool based on Docker named Lando and a 3D printed map tile, Touch Mapper.

Presenting at the conference was really great. A super supportive audience, great questions, and engaging discussions throughout the rest of the conference. What follows are the highlights of my notes.

Talk: Outnumbered by Temporary (Student) Staff – A Win for Your Institution

Slides: http://slides.com/maxbronsema/outnumbered#/

Deborah Frost, a colleague in University Residences, and I really enjoyed presenting at HighEdWeb 2017. I’ll let the slides highlight our main points. If you have questions about employing students in a higher education setting where they deliver incredible value to the institution and learn a lot of valuable skills, please do not be afraid to reach out.

Aggregation of Twitter posts about session

Talk: Usability Testing is Super Important and Easier Than You Think

Victoria Merriman presented a nice overview of usability testing procedures. This was all centered around a loose format. The benefits of usability testing as outlined by Victoria:

1) Drives conversions
2) Fixes issues
3) Resolves internal debates
4) Create a positive impression and strengthen your brand

The process:

  1. Write 8-12 tasks
    “You are an X in situation Y. You want to do Z.”
    Make users dig a little
    Keep tasks short
    Don’t use the exact words
  2. Get testers
    Offer an incentive
    8-10 testers is a good goal or < 0
  3. Watch testers perform the tasks and gather the following metrics
    1. Completion – 0 to 1
    2. Time on task
    3. User rating 0-10
  4. Learn from their struggles and successes

Nevertheless, She Persisted

This was the best hour of HighEdWeb 2017. A panel of women shared their experiences in the industry of web development. It was inspirational and a reminder of all that gets in the way of success. There is a lot more that males in the field can do to move towards equality.

Highlights:

  • Moving towards leadership parity. 52% of professional jobs are held by women, however only 8.1% are top earners
  • Not talking about it enough but more than in the past so let’s keep the momentum
  • Mentoring involves being present, accessible, and available to support others
    • Introduce women/everyone to others that may be able to mentor/sponsor and help them make those connections
  • The tiny encouragements help a lot. Let them know.
  • Work/Life Harmony, not balance

Calls To Action

  • Do your research. Know the facts. Respond. Share.
  • Advocate & openly support underrepresented groups
  • Get involved in a campaign for someone you believe in. Use your tech/creative skills.
  • Do not go to a conference that does not have a code of conduct (Withhold participation and tell them why you are not going)
  • Read and buy books from humans in underrepresented groups

Men

  • Listen and then amplify
  • Speak up. If you see something, same something. To your peers… to your brothers.
  • Taking notes often falls to women. Step up to take notes, bring treats to meetings, etc…

 

Mobile First: Writing and Designing Page Content in the Age of Mobile

  • Let national research make your case 4/10 users use mobile all of the time
  • Show heat maps of mobile – not desktop
  • Is anything hidden in the regions that render lower on the page?
  • Don’t overlook phone numbers, include area codes for mobile dialing
  • Remove references to “Look in the left or right column”
  • Remove walls of text – if it is really important make it readable
  • Bite, Snack, Meal approach – coined by online writing expert Leslie O’Flahavan
    • Make the snack scroll worthy
  • Use plain language
    – hemingwayapp.com
    – plainlanguage.gov
  • How People Read the Web: e-book by Nielson Norman Group
    https://www.nngroup.com/reports/how-people-read-web-eyetracking-evidence/
  • https://www.nngroup.com/articles/how-users-read-on-the-web/

Accessible Wayfinding

This was also a great session. Wayfinding is most always a hot topic because doing it well is difficult, time-consuming, and generally expensive. The presenters did a great job highlighting a select series of best practices and actionable steps to take on campus.

Consider use cases when writing map descriptions

    • How do I get to….
    • How far is …
    • What are near …

Use an ordered list to give directions
Use an unordered list to describe what’s nearby

A favorite alternative map, http://www.dyc.edu/admissions/visit/campus-map-and-tour.aspx, alternative maps are offered if there is nothing to be done with the primary map.

If you are using color coding, always pair it with…

  • Textures
  • Shapes
  • Text

Keyboard Navigation

  • Make focus obvious
  • Make it easy to find the keyboard shortcut list showing good key combos
  • Does zooming and panning work?
    maps.duke.edu/map does a good job with keyboard nav
    bit.ly/heweb17dpa5 is a prototype with keyboard shortcuts done right

Accessible Technology for those that are blind

  • Trekker Breeze is a tool one can buy for blind users
  • BlindSquare App
  • Touch Mapper

Less is more

Penn State has a huge library system!

Project One pagers

Occam’s Cleaver, more brutal than the razor

Penn State uses Zurb foundation on top of Drupal

Eliminate content ROT was a goal

Determine content owner of every single page (still a work in progress)

Google Analytics Myths Debunked

  • Tie goals to revenue
    $1 goal value is not equal to $1 revenue
  • Behavioral segments are key
    per user goal value is more relevant than per session user value
  • Use google data studio to create custom metrics

 

Drupal logo that looks like a rain drop

2017 Pacific Northwest Drupal Summit

Drupal, Web Development

After a one year hiatus the Pacific Northwest Drupal Summit returned this year over the weekend of February 25-26. The summit rotates between Vancouver, British Columbia, Seattle, WA and Portland, OR. The reboot occurred in Vancouver and it was a great event. Held once again at the beautiful Simon Fraser Harbour Center the view from the main foyer was beautiful showcasing the snow capped mountains behind the busy harbour.

The two days had some great sessions, all of which are available for review on the session page, the mix of sessions was interesting. Certainly, there was a heavy focus on Drupal 8 but other sessions gave any developer decent breadth, such as Do you really need a CDN? and The Web of Tomorrow. Non-developer topics were also plentiful such as Creating a Culture of Learning and Community, Why it is good for business. Anyone involved in web/software development had ample opportunity to take home a few nuggets of wisdom or at a minimum, a new idea to mull.

It was interesting to see topics continue to appear as they are discussed at nearly every summit; automated testing, performance optimization, and decoupling Drupal. It just goes to show how much things change in the web development profession that these topics always carry weight.

Thanks to sponsors The Jibe and Affinity Bridge for hosting a great party at Commodore Lanes which was a relaxed environment to debrief the day and to make new friends. The six pin bowling was new to me and the establishment had pre-canned bowler names from the Star Wars universe which was  a lot of fun. Luke Skywalker, if he bowled, put up a decent score.

If you were on the fence about attending this year, mark it on your calendar for next year in Portland, OR. For the low registration cost I think it is hard to find a better value for a two-day conference. As the Drupal 8 adoption rate begins to climb the return on your time this conference delivers will be very hard to beat.

See you next year in Oregon!