Monday, December 19, 2016

“Creed” on the World - by Steve Turner - satirical poem on the modern mind

We believe in Marx Freud and Darwin
We believe everything is OK
as long as you don’t hurt anyone
to the best of your definition of hurt,
and to the best of your knowledge.
We believe in sex before, during, and
after marriage.
We believe in the therapy of sin.
We believe that adultery is fun.
We believe that sodomy’s OK.
We believe that taboos are taboo.
We believe that everything’s getting better
despite evidence to the contrary.
The evidence must be investigated
And you can prove anything with evidence.
We believe there’s something in horoscopes
UFO’s and bent spoons.
Jesus was a good man just like Buddha,
Mohammed, and ourselves.
He was a good moral teacher though we think
His good morals were bad.
We believe that all religions are basically the same-
at least the one that we read was.
They all believe in love and goodness.
They only differ on matters of creation,
sin, heaven, hell, God, and salvation.
We believe that after death comes the Nothing
Because when you ask the dead what happens
they say nothing.
If death is not the end, if the dead have lied, then its
compulsory heaven for all
excepting perhaps
Hitler, Stalin, and Genghis Kahn
We believe in Masters and Johnson
What’s selected is average.
What’s average is normal.
What’s normal is good.
We believe in total disarmament.
We believe there are direct links between warfare and
bloodshed.
Americans should beat their guns into tractors .
And the Russians would be sure to follow.
We believe that man is essentially good.
It’s only his behavior that lets him down.
This is the fault of society.
Society is the fault of conditions.
Conditions are the fault of society.
We believe that each man must find the truth that
is right for him.
Reality will adapt accordingly.
The universe will readjust.
History will alter.
We believe that there is no absolute truth
excepting the truth
that there is no absolute truth.
We believe in the rejection of creeds,
And the flowering of individual thought.
If chance be
the Father of all flesh,
disaster is his rainbow in the sky
and when you hear
State of Emergency!
Sniper Kills Ten!
Troops on Rampage!
Whites go Looting!
Bomb Blasts School!
It is but the sound of man
worshipping his maker.
Steve Turner, (English journalist), “Creed,” his satirical poem on the modern mind.

Thursday, November 10, 2016

Self hosting web fonts

Working for a company that is global has some interesting facets you normally wouldn't see when working for non-global companies.  One issue we've found is that Google and China don't like to play well together.  We've found that making calls to Google servers in our website causes loading issues with user's in China, since much of Google's properties are blocked in China.  That means pages may not load or takes extreme amounts of time to load.

Take for example Google web fonts.  Although it would be simple to add a link to a free Google web font and utilize it on our website to modernize our fonts, we have to think how that call to Google servers's affects our user's in China.  That rules out some seemingly simple things a non-global company might do.  So they way around that is to self host your font.  Not the ideal method, but quite effective once you figure out how to do that.

After a day of reading and browsing, this is what I've come up with:

  1. Find the font you want to self host for your website.  In my case I’m going to use Lato.  This can be found on FontSquirrel.com or fonts.google.com
    The fontsquirrel download lets’ you directly download all of the Lato.ttf files in one download.  

    In Google fonts you have to select the font,

    then you can click the Family Selected tab at the bottom of the screen and Customize in order to select which styles of the Lato font you want to download.

    Once you’ve seleced you’re variances, you click the download icon
  2. Now you have the fonts downloaded.  Unzip the font downloads, so we can move to the next step of converting them to web fonts that we can call in our web pages.
  3. To convert the .ttf files to web fonts, we’ll be using FontSquirrel’s Generator app on their website.  
    I chose Optimal in their settings and click the Agreement check box, then go up to the Upload Fonts button.  From there, you’ll select the fonts you downloaded.  Select all of them (Shift drag over all font files to select them)

    And then hit Open.
    This will start the conversion process.
  4. Once the generator is finished processing the ttf font files, you can Download Your Kit:
  5. Then you can unzip the downloaded font kit and you’ll see all of the converted.

    A note on the file types downloaded:
    Most font files you have installed will be TrueType (.ttf) with a smattering of OpenType (.otf). You can save these to your server and specify them in your CSS.
    Support for .ttf and .otf file formats is widespread across all modern browsers except IE (even the latest version) and some mobile browsers (including legacy versions of iOS Safari).
    To increase your coverage you’ll need several additional formats. .eot works for IE, .woff will work for most browsers and is the W3C’s preferred format, .svg will work on legacy browsers.
    In my case, I’m choosing the Expert option in Font Squirrel’s generator and selecting the EOT Compressed option to add the IE support.

  6. Inside of your downloaded Font Kit, you’ll find all of the web fonts and a stylesheet.css file.  The stylesheet gives you all of the @font-face styles that you need to use.
  7. In order to use the Lato fonts in your web pages, you can link to the generated stylesheet.css, or import those styles into your own style sheet.



    Then you can define classes with the Lato font:
    body{ font-family: 'Lato', sans-serif; }




Thursday, October 20, 2016

System wide color picker for Mac

I was a bit disappointed that this isn't also available for Windows, but it's still really useful when I'm on my Mac laptop.


I was watching a Chris Coyier video and saw him using it.
Some day, when I grow up, I hope to be 1/4-1/2 as good of a front end coder as Chris is.

Thursday, September 29, 2016

Google design

Not sure how I've completely missed this, but Google has a Design site that is really amazing.  Their Material Design Icons are what brought me to their site initially, then I started browsing around and realized I could spend a week just consuming information and ideas they're providing.

This gets me thinking how badly we need a communications platform at our company so I can share with my coworker friend in India.  Email is lame, IM... well we're on oposite schedules.

Anyways, check it out.  I geek out on this stuff!

GOOGLE DESIGN

I spy material design, pattern design, G-design icons, etc.

Wednesday, September 28, 2016

In late August 2016, I had the opportunity to attend An Event Apart in Chicago, IL.
I’d like to summarize some of what I took away from each talk as it will help determine some of what I’d like to focus on in the next year.  I’ll share my reactions and key takeaways.

Overall, I heard themes emerge from the conference:
  • Performance matters
  • CSS grid and Flexbox will become the future of layout design
  • Show compassion and decency with your design and respect those that may be outlier cases
  • Atomic design - building design patterns instead of designing pages - iterative designs, not massive redesigns
It was really fantastic to get my head up from the daily toil and to take a break by learning from industry experts.  So much was talked about with great ideas flowing all around.  Basically, much of the discussion was really focused on Design Thinking, not just design, but about creating systems of design and creating user focused outcomes.  This involves multidisciplinary teams and restless iterative design modifications.  Complacency and comfort are the enemy.

DESIGNING WITH WEB STANDARDS IN 2016

JEFFREY ZELDMAN

We as designers and developers have progressed over the years to implement standardized web practices with separation between content and structure.  As we march on to that tune, frameworks have been introduced and utilized.  Much of that progression has been catch up work to implement responsive websites and fit our sites into the multitude of device variances.  Some of the questions we need to be discussing going forward are:
  • Frameworks and their bloated markup
  • When we design, mobile should always be our first screen
  • Progressive enhancement is the way we design up
  • Remove distractions, let people interact as directly as possible
  • Remove each detail of your design until it breaks
  • 90 percent of design is typography
  • Style is the servant of brand and content.  
  • Style without context is decoration.
  • Performance matters


DESIGNING DELIBERATELY

Yesenia Perez-Cruz

Yesenia talked about keeping our design within perspective of our goal.
We need to be asking what is the main goal of each project and keep unnecessary bloat out, while paying attention to how we load elements and page weight.  Part of our design perspective needs to focus on prioritizing performance by setting a performance budget and being deliberate about staying within that budget.  
Use tools like, webpagetest.org to analyse our pages.
References:  

Adapting to Input

Jason Grigsby

The variation of input devices has exploded.  We should now be thinking about other methods of input such as touch,  voice input (google voice search), sensors, geolocation and others.  When in doubt, default to touch.
Also, we should be creating website, apps, and forms with the latest helper code, such as browser autofill, autocomplete, app number displays, cameras  and other helper methods.
References:


Style Guide Best Practices

Brad Frost - Atomic Web Design

Brad touched on creating design systems instead of designing pages.  The idea is that with a page design, companies tend to do a lot of one-off design work.  There’s repeated work and labor that goes into those and the pages tend to lack consistency because they aren’t viewed as a larger design system.  With a design system approach, we can deliver a more congruent experience.  This can also help ease the user into a new system because we’re creating iterative design changes instead of monolithic master redesigns, which tend to be jarring.
Element collages (interface inventory - normalize it) are a great way to review and standardize your content.  
We should be creating tiny bootstraps for each separate project instead of relying on overweight large frameworks… but this takes much time and effort.
Some of the benefits that creating design systems offers to that it promotes consistency, offers faster production, utilizes a shared vocabulary, is easier to use by offering a DRY (don’t repeat yourself) approach and serves as a useful reference.  
References:


Designing for Understanding

Stephanie Hay

Stephanie talked about designing with intention for specifics.  She gave examples from Sesame Street because it targeted a specific audience and used test groups to understand how urban children could learn better (3 second alphabet recital by James Earl Jones - repeatable).
She touched on creating our designs in a real interface so we can focus on a promoting the real experience (design in html not Photoshop).  We should be involving different types of people in our design process for different types of thought.  Lastly, our content should define the structure.  

Art Direction

Jen Simmons

Jen’s talk about art direction revolved around what’s coming up next in the field of web design.  The focus mostly covered Flex box and CSS Grid.
She also introduced the idea of, looking at our content and then determining the order it should appear and rank.   Then we can  organize content, create html files and set source order, sketch ideas for page layout, design a custom grid and write our own grids.
A great way to design with flex box and css grid is to utilize it in our mockups.  This way we’re learning it and then when it’s fully integrated into modern browsers, we’ll be ahead of the pack.
References:

Animation in Design Systems

Val Head

Css animation was the topic and how to implement it.  There was discussion on should it be utilized and identifying the ‘for what’ should it be utilized.
We can start introducing it in subtle ways, but it can be referenced often and deliberately.  Animation should always inform and support the design, and not simply lead the design.  Don’t animated just to animate, but think through reasons it can be used.

Performance Under Pressure

Mat Marquis (bocoup)

Mat’s focus is on building fast sites.  If your site is inaccessible to the poor, it’s neither radical or revolutionary.  Think about the critical render path and prioritize it.  Possible ways to do that are to include critical css in the top of your page, so it renders faster, while keeping the less critical in the called stylesheets.
References:

CSS Grid Layout

Rachel Andrew

The next big thing in css is CSS Grid layout.  A great way to practice Grid is to prototype in Grid.  Grid can be layered using z-index.
Reference:

Extreme Design

Derek Featherstone

Extreme design consists of examining the extremes and finding the in-between that is most common shared characteristics.  We need to be grouping closely related items and possibly use the “straw test” to simulate low vision users.  When thinking about users we should view them as a color spectrum example instead of just a plain linear line.  Designing for better accessibility usually results in better designs for all.
We should utilize the “i-forget” test principle when designing forms.  Placeholder text should not be used as labels. People have extremely short attentions, so we should be designing for understanding by Heading Only Consumption.  Also, consider how to transform the digital experience into the physical, so we include a wider audience participation ability.

Compassionate Design

Eric Meyer

Who are our designs created for and how do we include others or mitigate wrong intentions if the user is outside that initial design audience.  Do a premortem - What if this goes wrong?  Then ask how should we respond or what should we do to avoid it?  Compassion in design asks us not to forget the urgent need case, and to consider the outlier cases and stress cases.
When we write copy, we should read it outloud to someone.  
When designing forms, we should ask our user’s for info because we need it, and maybe not waste their time with info that might just be nice to have.
Filling out a form can be dehumanizing, rude, and our designs might just be lazy.  Make them good and have empathy for your users.

The Physical Interface

Josh Clark

Josh’s talk was about thinking about how we get the technology out of our way and make it feel more natural.  The Internet of Things is here and we should start thinking along those lines.  The web is not just the browser any more.  Interfaces don’t always require a screens and input isn’t always from a mouse or even touch.  Sensors, voice, motion, geolocation and other methods of input can utilized.  How should or can we create, adapt and develop ideas around those new functional options? If I have to launch a separate app for every physical device, then have I failed as the designer?
Reference:


Idea highlights from the conference:
  • No longer create massive redesigns… it should all be iterative design implementations
  • Benefits of Pattern Libraries
    • Promotes UI consistency and cohesion = more conversions & $$$
    • Faster production = roll out more features and iterations faster than ever
    • Shared vocabulary = more time collaborating, performance and accessible experiences
    • Useful reference
    • Future friendly foundation
  • Show… don’t tell
  • Utilize interface inventory
  • Performance test!