Tag Archives: techniques

Thumbnail

Reaching The Millennials: Mobile Marketing Trends And Techniques

The average American spends at least five hours per day on their smartphone. So, why is it so hard to make mobile ads work? Marketers toil over clicks and conversions on highly targeted ads, but users, tired of intrusive banners, keep installing ad blockers.

Designing Mobile Marketing Experiences For Millennial Shoppers

With $100 billion in annual mobile ad spend at stake, someone has to figure out a way to fix this disconnect.

The post Reaching The Millennials: Mobile Marketing Trends And Techniques appeared first on Smashing Magazine.

View original: 

Reaching The Millennials: Mobile Marketing Trends And Techniques

Building “Topple Trump”, An Interactive Web-Based Quiz Game (Case Study)

Editor’s Note: When it comes to elections, we are each given a choice in how to express our opinions and beliefs. Some designers and developers use their skills to further articulate their choice in one person. Here’s a glimpse into how Topple Trump!, an interactive responsive quiz game, was designed and built — combined with some valuable lessons learned along the way. This article is about techniques and strategies, so please avoid political flame in the comments.

Creating an online quiz that is simple to use, looks great and is really fun to play is one thing. Basing it on Donald Trump’s polarizing presidential campaign is another.

Building 'Topple Trump', An Interactive Web-Based Quiz Game (Case Study)

The brainchild of Parallax director and developer Andy Fitch, Topple Trump! has gone on to win numerous awards. But it was a real team effort that brought the game to life. Here’s a glimpse into precisely how that happened, touching on the development process, design considerations and some valuable lessons learned along the way.

The post Building “Topple Trump”, An Interactive Web-Based Quiz Game (Case Study) appeared first on Smashing Magazine.

View original post here: 

Building “Topple Trump”, An Interactive Web-Based Quiz Game (Case Study)

Thumbnail

Driving App Engagement With Personalization Techniques

Once upon a time, in the not-so-distant past, people considered websites to be a prime indication of how users’ attention was brief and unforgiving. Remember the dreaded bounce rate?

Driving App Engagement With Personalization Techniques

Remember the numerous times you worried that your content and graphics might not be 100% clear to users? That was nothing. Compared to mobile, engaging users on the web is a piece of cake.

The post Driving App Engagement With Personalization Techniques appeared first on Smashing Magazine.

Read the article:  

Driving App Engagement With Personalization Techniques

An Introduction To Redux


Redux is one of the hottest libraries in front-end development these days. However, many people are confused about what it is and what its benefits are. As the documentation states, Redux is a predictable state container for JavaScript apps. To rephrase that, it’s an application data-flow architecture, rather than a traditional library or a framework like Underscore.js and AngularJS.

An Introduction To Redux

Redux was created by Dan Abramov around June 2015. It was inspired by Facebook’s Flux and functional programming language Elm. Redux got popular very quickly because of its simplicity, small size (only 2 KB) and great documentation. If you want to learn how Redux works internally and dive deep into the library, consider checking out Dan’s free course.

The post An Introduction To Redux appeared first on Smashing Magazine.

See the article here – 

An Introduction To Redux

Stylelint: The Style Sheet Linter We’ve Always Wanted


Everyone wants a clean, consistent code base, no matter the language. Developers are accustomed to setting up linters in programming languages such as JavaScript and Python, but they rarely use a linter for style sheets. In this article, we’ll look at stylelint, a linter for style sheets.

Stylelint: The Style Sheet Linter We've Always Wanted

We will also learn why linting a style sheet matters, how stylelint brings order to a style sheet and how we can avoid errors. Finally, we will learn how to use stylelint and start linting as soon as possible. Let’s start with why linting is important.

The post Stylelint: The Style Sheet Linter We’ve Always Wanted appeared first on Smashing Magazine.

Continue reading here:

Stylelint: The Style Sheet Linter We’ve Always Wanted

Building A Real-Time Retrospective Board With Video Chat


If you’ve ever worked in an agile environment, chances are you’ve had your share of “retrospectives” — meetings where people write what made them “glad,” “mad” or “sad” onto different-colored notes, post them onto a board, arrange them in groups and — most importantly — talk about them.

How To Build A Real-Time Retrospective Board With Video Chat

These meetings are straightforward, as long as everyone is in the same room. But if you’re working with a locally distributed team, things can get a bit tricky. Let’s address this by creating a virtual version of our board to allow team members in different locations to hold their retrospective just as if they were in the same room.

The post Building A Real-Time Retrospective Board With Video Chat appeared first on Smashing Magazine.

View article: 

Building A Real-Time Retrospective Board With Video Chat

Thumbnail

A Responsive Material Design App With Polymer Starter Kit


One upcoming technology that represents a big leap forward in making the web a mature application platform is web components. From a high-level perspective, web components will enable better composability, reusability and interoperability of front-end web application elements by providing a common way to write components in HTML.

A Responsive Material Design App With Polymer 1.0 Starter Kit

The goal of this article is to show you why this will be such an important step, by showing off what can be accomplished right now using Polymer. Polymer is currently the most advanced and (self-proclaimed) production-ready library based on web components.

The post A Responsive Material Design App With Polymer Starter Kit appeared first on Smashing Magazine.

View original:

A Responsive Material Design App With Polymer Starter Kit

Thumbnail

Mobile Navigation For Smashing Magazine: A Case Study


Since we started plodding around on this rock in space, human beings have always been dissatisfied with their environment — which is (mostly) a good thing. Otherwise we might still live in caves, fearful of the weather and worshipping the sun. It’s dissatisfaction and curiosity which drive us to fix things that ain’t broken.

Mobile Navigation For Smashing Magazine: A Case Study

Back in spring 2013, Smashing Magazine sported a <select> menu as its mobile navigation. It wasn’t considered an anti-pattern back then and I still think it’s a viable solution to the complex problem of how to build accessible and functional cross-device navigation. Brad Frost wrote a few words about the pros and cons of this pattern on his blog and I couldn’t agree more.

The post Mobile Navigation For Smashing Magazine: A Case Study appeared first on Smashing Magazine.

Originally from – 

Mobile Navigation For Smashing Magazine: A Case Study

Constructing CSS Quantity Queries On The Fly


Often within a project, the presentation of our content changes based on certain needs. We see this when we use media queries to change our styles based on the user device. CSS quantity queries follow the same concept of changing the styles based on a condition: the condition within a quantity query being the number of sibling elements.

QuantityQueries.com

An example would be navigation where items are 25% wide when four items are available; yet when there are five items available, the width of the navigation items changes to 20%. This is a common problem with dynamic site frameworks like WordPress or Ghost. A client might not realize the complications that could arise, for example, by adding one more menu item when the CSS is not set up to fit it in.

The post Constructing CSS Quantity Queries On The Fly appeared first on Smashing Magazine.

This article is from: 

Constructing CSS Quantity Queries On The Fly

Thumbnail

Quantity Ordering With CSS

Here is your mission, should you choose to accept it: create a table of items. Each item should span a third of the content area, with the fourth item starting on a new row, much like floats. However, a particular item must always display the price at the end of the first row.

So if there are only two elements, the price element would be second. But if there are more than three items, the price would be the last element in the first row.

You might assume that JavaScript would be the best solution — just loop over the items, and if there are more than three, update the styling. But what if I told you could do it with CSS alone?

Pure CSS Counting

I’ve gone all in on flexbox lately, teaching it right alongside floats as a layout method at our little project called HackerYou, and I have found that students take to it well. The flexbox specification contains properties that enable us to modify markup in new ways. One of these is order, which allows us to modify the presentational order of content without touching the markup or structure.

Used with media queries, order is extremely useful, enabling us to change the content’s order with the viewport size. That got me thinking: Why can’t we change the order of elements according to the amount of content?

Quantity Queries

An idea explored by Lea Verou1, André Luis2 and Heydon Pickering3, quantity queries count the number of sibling elements and apply styles if a certain number are present.

What if we combined quantity queries and the order property to change how content is read according to how much of it there is?

Using Flexbox

Flexbox, or the “Flexible Box Layout Module4,” is a CSS specification that allows for content to be laid out in any direction and for children to be sized to their parent easily. Originally introduced in 2009, flexbox has gone through many changes over the years. However, it is supported5 in all current browsers, with the exception of Internet Explorer 9+.

One of the most significant changes within flexbox is the naming syntax of associated properties and values. Because the specification evolved over years, browser vendors would use the syntax that was being developed at the time. So, using vendor prefixes is recommended to ensure support across legacy browsers.

One recommended tool for managing cross-browser support in CSS is Autoprefixer6, which is typically included in preprocessors and Gulp and Grunt files.

Understanding Order

Before we dig into quantity queries and how they work, we should understand how to use the order property. First, we need to wrap the content with a parent element and apply display: flex to it.

Here’s the HTML:

<div class="container">
  <p class="itemOne">Hello</p>
  <p class="itemTwo">World!</p>
</div>

And here’s the CSS:

.container 
  display: flex;

See the Pen LVVXxz7 by Drew Minns (@drewminns30211714118) on CodePen31221815129.

By default, elements will appear in their order in the markup. All child elements of a flexbox parent share an order value of 1.

This value is unitless and simply refers to the order of the element relative to the other elements around it. However, we can change the value of an individual element using the order property.

p.itemOne 
  order: 2;

See the Pen Really Good Work Article 10 by Drew Minns (@drewminns30211714118) on CodePen31221815129.

In the example above, we’ve changed the order of p.itemOne to a value of 2, making it fall after p.itemTwo and thereby changing the presentational order for the user. Note that the markup remains the same, however.

Counting With CSS

Media queries, eh? Such an awesome tool for applying CSS when certain conditions are met. Those conditions could be device type, size, color and more — pretty powerful stuff. But the query applies only to the device that the viewer is using; there is no defined CSS method for querying the amount of content in an element.

If we get creative with existing CSS pseudo-selectors, however, we can build tools that count the number of children in an element and then apply styles accordingly. For this example, let’s use a simple ordered list:

<ul class="ellist">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li class="target">6</li>
</ul>

The magic of counting sibling elements is in the selector below. This example applies styles to elements when four or more are available.

ul.ellist li:nth-last-child(n+4) ~ li,
ul.ellist li:nth-last-child(n+4):first-child 
  // styles go here

See the Pen WvvYyN13 by Drew Minns (@drewminns30211714118) on CodePen31221815129.

Wait, No. That’s Insane!

Yep, that’s the selector. In English, it could be translated as this: “When there are four or more child elements, get the other list items and the first child.”

Let’s break this down. First, the counting:

ul.ellist li:nth-last-child(n+4) 
  // Styles!

This translates as, “Go to the last child and count back four children.” Apply the styles to the fourth element and all elements before it.

Go ahead and experiment by editing the Codepen and changing the selector to a different number.

See the Pen Pqqvqp16 by Drew Minns (@drewminns30211714118) on CodePen31221815129.

So, there it is, counting. If fewer than four siblings are counted, nothing is selected and no styles are applied. We can now modify this selector to select all li elements using the general sibling combinator19.

ul.ellist li:nth-last-child(n+4) ~ li 
  // Styles!

The problem is that this doesn’t select the first child element. We can append another selector to do that:

ul.ellist li:nth-last-child(n+4) ~ li,
ul.ellist li:nth-last-child(n+4):first-child 
  // Styles!

Of course, we can make the selector more agnostic simply by supplying the parent element and letting it choose all of the children. We do this with the * selector.

element > *:nth-last-child(n+4) ~ *,
element *:nth-last-child(n+4):first-child 
  // Styles!

Ordering Based On Quantity

Now that we have explored how to count with CSS selectors and how to use flexbox to order content, let’s mix them together to build a tool that orders elements based on the number of siblings.

Again, we’re trying to make our last element be the third element (i.e. appear as the last element in the first row) when there are more than three siblings.

Let’s apply some CSS for some presentational styling. We’ll apply display: flex to the parent container, which allows us to apply the order property on the child elements. As well, we’ll apply some default styling to the .target element to differentiate it.

ul.ellist 
  margin: 20px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;

ul.ellist > * 
  border: 10px solid #27ae60;
  text-align: center;
  flex: 1 0 calc(33.33% - 20px);
  padding: 20px;
  margin: 10px;

.target 
  color: white;
  background: #2980b9;
  border: 10px solid #3498db;

ul.ellist, ul.ellist > * 
  box-sizing: border-box;

ul.ellist 
  margin: 20px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;

ul.ellist > * 
  border: 10px solid #27ae60;
  text-align: center;
  flex: 1 0 calc(33.33% - 20px);
  padding: 20px;
  margin: 10px;

ul.ellist .target 
  color: white;
  background: #2980b9;
  border: 10px solid #3498db;

Now that we have a base style to work with, we can create some logic to order our items accordingly. Again, by default, all elements have an order value of 1 and are displayed according to the order in which they appear in the markup.

Using a quantity query, we can count whether there are more than three items.

ul.ellist > *:nth-last-child(n+3) 
  // Styles!

We can then modify our query to select the .target element only if the number of items is met. For now, we’ll apply an order of -1, so that it appears at the beginning of our list.

ul.ellist > *:nth-last-child(n+3) ~ .target 
  order: -1;

Voilà! We’ve just styled an element based on the numbers of siblings it has. Using this code, we can put one element in front of another.

But what if it needs to go between items?

Some Logical Thinking

Here is the problem, in three arguments:

  • By default, all items have an order set to 1. We need the items at the beginning of the list to keep that order value.
  • Our target will be presented at the end of the first row. So, we need the target’s order value to be higher than the ones in the beginning — i.e. 2.
  • We need all items from three onward to have a higher order than our target and lead elements. So, they will have an order value of 3.

How about this?

Because all items have a default value of 1, we don’t need to declare that. Let’s allow our target element to have an order value of 2 via our quantity query, effectively placing it higher than the others.

ul.ellist > *:nth-last-child(n+3) ~ .target 
  order: 2;

Then, using another quantity query that utilizes nth-child(), we will count from the beginning of the list, rather than from the end. Because our .target quantity query is more specific, the last element will be ignored, but all others three and higher will have their order changed.

ul.ellist > *:nth-last-child(n+3) ~ .target 
  order: 2;

ul.ellist > *:nth-child(n+3) 
  order: 3;

Whoa! Let’s Go Over That Again

We counted from the end of a parent element if there were a number of child elements. If there were, we applied some styles to an element of our choice. We then counted from the beginning and applied styles to all elements past that point.

The beautiful part is that if we were to remove elements, the target element would still appear in the correct position.

<ul class="ellist">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li class="target">4</li>
</ul>

The Resulting Task

My first thought when given this task was to use a programming language. Because the website was built on WordPress, I could modify “the loop” to count and inject the element where needed.

However, because I’m building the website for a front-end development school, I wanted to do it with pure CSS and explore the possibilities that flexbox’s order allows.

Below is an example of the resulting page, done entirely with CSS.

See the Pen Quantity Ordering20 by Drew Minns (@drewminns30211714118) on CodePen31221815129.

Using It In The Real World

Sass

Quantity queries are a fairly new concept, and writing the selectors can be a bit of a challenge. Nevertheless, the community is embracing the concept and is building tools and writing Sass mixins that can help us write queries effectively. Libraries such as the one by Daniel Guillan23, called a Quantity Queries Mixin24, enable us to write media queries as simple includes.

@include at-least($count)  … 
@include between($first, $last)  … 

A plethora of articles also explain the concept and power behind this. James Steinbach25 wrote a great article on “Using Sass for Quantity Queries26.”

PostCSS

PostCSS is a new tool that allows CSS to be transformed with JavaScript. The current PostCSS ecosystem includes many community-developed plugins, including a Quantity Query27 plugin.

The plugin allows for custom pseudo-selectors to target values within a certain range, at least, or at most.

p:at-least(4)  … 

p:between(4,6)  … 

Browser Support

Currently, support for both CSS pseudo-selectors and flexbox28 is great in modern browsers. If your project targets users on IE 10 and above, you can use quantity queries and flexbox ordering together.

Where to Use It

When building websites, we often use programming languages that allow us to count and modify our content as needed. However, as CSS has improved, we’ve moved away from programming languages into advanced CSS properties.

One example is CSS animations. What was previously possible only through Flash or JavaScript is now achievable with pure CSS, a language for defining the presentation of our content.

Quantity ordering enables us to remove modified loops that count and insert content accordingly, allowing our content to be read semantically.

A great example of the usefulness of quantity ordering would be a news website with advertising. In the markup, all articles are organized together, and the ads are placed at the end. In terms of accessibility, this allows for an uninterrupted flow of content. The ads can then be placed throughout the content, using quantity ordering only on a presentational layer.

See the Pen vOLGPg29 by Drew Minns (@drewminns30211714118) on CodePen31221815129.

While ordering can be used to change the presentational display of elements, for accessibility, it can damage the experience. Be aware of how content flows and how it will be read on accessibility devices.

Conclusion

Quantity queries and quantity ordering are advanced concepts and might be scary for beginners. However, as we move presentational styling away from programming languages and into CSS, we should use these tools more and more.

Even as many members of our industry explore content queries32, we can now use quantity queries to modify the order of content simply by counting.

Excerpt image: Markus Spiske33

(ds, ml, al)

Footnotes

  1. 1 http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/
  2. 2 http://andr3.net/blog/post/142
  3. 3 http://alistapart.com/article/quantity-queries-for-css
  4. 4 http://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/
  5. 5 http://caniuse.com/#search=flex
  6. 6 https://github.com/postcss/autoprefixer
  7. 7 ‘http://codepen.io/drewminns/pen/LVVXxz/’
  8. 8 ‘http://codepen.io/drewminns’
  9. 9 ‘http://codepen.io’
  10. 10 ‘http://codepen.io/drewminns/pen/oXXQBo/’
  11. 11 ‘http://codepen.io/drewminns’
  12. 12 ‘http://codepen.io’
  13. 13 ‘http://codepen.io/drewminns/pen/WvvYyN/’
  14. 14 ‘http://codepen.io/drewminns’
  15. 15 ‘http://codepen.io’
  16. 16 ‘http://codepen.io/drewminns/pen/Pqqvqp/’
  17. 17 ‘http://codepen.io/drewminns’
  18. 18 ‘http://codepen.io’
  19. 19 http://www.w3.org/TR/selectors/#general-sibling-combinators
  20. 20 ‘http://codepen.io/drewminns/pen/waarLQ/’
  21. 21 ‘http://codepen.io/drewminns’
  22. 22 ‘http://codepen.io’
  23. 23 http://www.danielguillan.com/
  24. 24 https://github.com/danielguillan/quantity-queries
  25. 25 http://jamessteinbach.com/
  26. 26 http://www.sitepoint.com/using-sass-quantity-queries/
  27. 27 https://github.com/pascalduez/postcss-quantity-queries
  28. 28 caniuse.com/#search=flexbox
  29. 29 ‘http://codepen.io/drewminns/pen/vOLGPg/’
  30. 30 ‘http://codepen.io/drewminns’
  31. 31 ‘http://codepen.io’
  32. 32 https://github.com/marcj/css-element-queries
  33. 33 https://www.flickr.com/photos/markusspiske/18544440564/in/album-72157644611527928/

The post Quantity Ordering With CSS appeared first on Smashing Magazine.

Taken from:  

Quantity Ordering With CSS