#tookandortake

[crrollyson]

Responsive CSS option to center a button vertically and horizontally

DATA-UI Responsive Center Button in Div 

Author: CR Rollyson @crrollyson

There are a lot of options when it comes to dev. A lot of options are compilations of trial and error discovery, compiled from multiple brains and multiple skill levels. Coding is opinionated and full of avenues. I try to offer clarity when possible. Here is my favorite responsive solution:

Details: Responsive CSS option to center a button vertically and horizontally without being concerned with parent element size (using data attribute hooks for clarity and separation concerns).

HTML

<div data-element="card"> <div data-container="button">   <button>CTA...</button> </div> </div>

CSS

[data-element="card"] {  background: #ff9900; //just for visual  height: 100%; // just for visual  width: 100%; // just for visual }

[data-container="button"] {  position: absolute;  top: 50%;  text-align: center;  width: 100%; }

Fiddle: https://jsfiddle.net/crrollyson/zebo1z8f/ Stack Overflow: http://stackoverflow.com/a/42236237/2903963

[crrollyson]

“Trello and The Markdown Syntax” – indie of the year, exclaims Brooklyn Vegan!

Trello rules.

Learning a few of these stylistic options, you too can feel great enough to stop working and write a blog about it!

Syntax for card descriptions, comments, checklist items, and your bio:

Bold text: Mark text in double asterisks, like **this**, to make it bold.

Italic text: Mark text in single asterisks, like *this*, to make it italic.

Links: [this is a link](http://www.trello.com).

Horizontal line: ---

Code block - four spaces at the start

Indent text / Block Quotes: >

All the goods – http://help.trello.com/article/821-using-markdown-in-trello

[crrollyson]

One of the challenges of being a digital creative is battling legacy. This includes legacy structure, legacy processes, legacy practices, and out-right legacy thinking. 

“This is how it is, because it was our solution to the legacy problem back then.” 

Now think about that. We (as creatives) know or should know, at some point our attachment to any found and cherished processes will be challenged. Rightfully so. 

If you are involved in digital marketing – in any way (ie/eg/daf = project managers, graphic designers, front end developers, back end developers, content creators, info architects, tastemakers [whatever the f that means], thought-leaders, creatives, directors, general mgrs, assist to the regional manager) – you hear “it works for us” and think about packing your birdnest of a desk and moving on. And a little pep jives into your step with thoughts of: 

“Somewhere less confined, more progressive, better coffee, and space for your life (dog/bike/booze in my case). Somewhere with loud speakers rotating great music and open seating.” Channeling the best version of what you believe to be the only thing better than being at the beach/bar/house or on vacation. 

But we (as digital creatives) know the very thing that drives us absolutely crazy, is what keeps us engaged. We want the satisfaction of being right/heard and openingly accept the challenge of driving change – for change is why we came and our expertise is why we get paid (even if they don’t understand what we do – thank goodness for that, that summons a completely different battle).

In my professional pursuit over the years, I’ve found one common thing that works well to gain the attention of those responsible for handing off the keys. Any idea? Emails sure af do not work, bitching does not work, logic does not work, acting like an ass definitely does not work, and a million combinations of various things do not work. But the one thing that does work 100% of the time is showing the value. We all understand basic economics – Time = Dollars. And once something is seen (remember reading it in an email does not work tl;dr) it can not be unseen. Couple that with the increasing threat of open communication firing up the professional chain that may jeopardize bonus structures and BOOM – you have found your solution. 

This (video showing the difference between publishing a small app to sharepoint and publishing the same exact small app to Firebase) is a very small example featuring a recurring 6 minute (at best - depending on the network) loss on a standard process like publishing sites files.

“That is the cost of doing business”, says the guy whose career you are challenging. 

Providing proof (like this video) does not always work right away. Some stories involve people leaving and returning (personally I’ve never gotten into the Ike and Tina Turner game, but that does not mean I wouldn’t consider it). My point is, if you want your way – visually show anyone and everyone who can help your cause, where efficiencies are being lost. And by efficiencies I mean straight dollar bills. Chances are, even if they are resistant to change, they will be forced to tell you no (at which point you get to enjoy an entirely new strategy - if you are in marketing you enjoy strategy) or they will promote you for saving them from worry and countless headaches of trying to figure out how it is you do what you do (especially when some legacy bullshit goes wrong). I consider both a success. 

Spend less time defending your work and more time battling legacy. 

[crrollyson]

Shortcut To Centering And Vertically Aligning Text Over Responsive Image With Position Absolute

Objectives: Simple, Effective, and Hack-Free.

Requirements: 

Support all major browsers

Have fallback for non-supported/legacy browsers

Feature a responsive hero image

Include and center multiple elements (headline, call-to-action, video, button, link)

Logistics: 

You try background-cover, but realize setting and adjusting height is too much work and throwing window.height checks with javascript is overkill

You consider using Bootstrap’s .jumbotron class on the outer div, but realize it will require more work to override default bootstrap styles – not to mention messing with your super clean css flow

You have a short lapse in judgement and think “f this, Imma html4 this into table submission layout”, but you know someone is going to see it and any credibility you once had will be gone

Flexbox... right – probably needs to work in some legacy browsers because “marketing” to people outside of personal computers (see previous bullet)

Solution:

CSS “calc” property

position: relative on the parent

position: absolute on a child div

Code (html):

<div class="container-fuild hero">        <img src="img/hero.jpg" class="img-responsive" alt="use alt tags">        <div>            <h1>Center This</h1>            <a href="" title=“use title tags”>Center This</a>        </div>  </div>

Code (css):

h1 {     font-size: 32px; } .hero {    position: relative; } .hero div {    position: absolute;    top: 38%;  /* fallback – note A below */    top: calc(50% - 32px); /* css calc – note B below */    left: 0;    text-align: center;    width: 100%; }

Explanation (comments in above css):

Twinning “top:” Properties » Defining identical classes multiple times in the same CSS block is a common practice used to engage fallback support for legacy browsers that lack support (do not understand, do not recognize, ignore, does not compute) a css property

top: calc(expression) » “calc” takes the expression and returns a value 

top: calc(50% - 32px) » vertically aligns the element based on the return value. The example expression adds the <h1> font-size of 32px

Note A » In this case, IE8 and Opera Mini does not recognize the “calc” value and ignores it. CSS cascades, so the unsupported browser ignores the second “top calc” property/value pair and settles on the first “top” property/value pair (top: 38%) 

Note B » Returns the value of the expression (32px minus 50% of the targeted height (in this case the parent “hero” div)

Gotchas: Centering undefined heights in responsive design can/will-likely shoot you straight down the rabbit hole – go with it – there are massive benefits to over-engineering and over-thinking. You’ll start to rethink/reconsider your initial plan and likely find yourself coming up with simpler solutions like this.

[crrollyson]

Quick video on disabling cache while testing. Shortcut for testers/project managers/clients.

1. Chrome Menu » View » Developer » Developer Tools ( keyboard shortcut: opt + cmd + i )

2. Select “Network” Tab

3. Select “Disable cache” Checkbox

[crrollyson]

SharePoint ListData 500 Error

500 error happens when you try to get a list without spaces like you would with a /_vti_bin/ListData.svc call.

Example:

$scope.listCollection = [{        "name": "Some List Title","link": "SomeListTitle"    }]

listCollection.name works

/_vti_bin/ListData.svc/Some%20List%20Title

listCollection.link does not

/_vti_bin/ListData.svc/SomeListTitle

With the ListData.svc, you can get the xml data list both ways. But when fetching with SPServices, you will receive the 500 error and need to call the actual title.

Read more on StackExchange SharePoint

[crrollyson]

Aspect Ratio on iframe YouTube Video

This is a great solution to get an iframe to display proper aspect ratio:

If you copy/paste from below, swap out the double quotes in the HTML and replace the placeholder image with something similar if you don’t want to make an extra resource call. 

 HTML

<div class="iframe-wrapper"><div class="h_iframe"><img class="ratio" src="http://placehold.it/16x9" /><iframe src="https://www.youtube.com/embed/ISDAPvftK5U?autoplay=0&modestbranding=1&rel=0" frameborder="0" allowfullscreen></iframe></div></div>

CSS

.iframe-wrapper {    width: 100%;    height: 100%;    margin: 0 auto;    background: #CCC }

.h_iframe {    position: relative; }

.h_iframe .ratio {    display: block;    width: 100%;    height: auto; }

.h_iframe iframe {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%; }

See Fiddle for complete code

[crrollyson]

Our misunderstood friend the Carousel

I was asked my thoughts on the usage of a carousel after someone saw this website. Here is my response:

“To them I say the carousel is definitely one of the most misused UX elements of all time (thanks cheap templates and lack of UX edu). When used correctly, they’re proven to communicate effectively – visually on a large scale – in seconds, what would otherwise be impossible to do in such a limited amount of time.

My guess is we’ll never hear a recognizable professional blame a UX component for lack of click rates. To measure metrics properly, we’d need to pick apart the full-monty in context – in this case: imagery, headlines, call-to-actions, transitions (timing, direction, fluidity, responsiveness, proper device implementation, style, navigational elements, etc.).

What I would put back to them is that it is just as rational and justifiable to blame lack of interest for low click rates, as it is to blame our misunderstood friend the carousel, when measuring only one of so many variables √√√”