Mobile first! Responsive design! You’ve heard all of the buzzwords and catchphrases. Countless helpful and not-so-helpful articles proclaim the rise of mobile, but what practical steps can you take to make your brand more approachable for mobile users?

When arguing a case to make a website mobile-friendly, abundant evidence exists to present to the business owner, such as the Pew Research study that shows that 56% of US adults carry around a smartphone. However, while general statistics are useful for demonstrating the value of designing with mobile in mind, they don’t provide the guidance necessary to understand precisely how users will interact with a particular brand on their phone.

Frequently, design and development teams will be asked to redesign a dated website to be responsive. Looking at existing data would provide crucial insight into how best to present information to mobile users. Google Analytics offers a number of free features for incredibly detailed analysis of mobile activity, with the ability to easily compare to desktop activity.

If you haven’t yet installed Google Analytics, setting it up is easy. Just create a free account, and then Google will walk you through the process. You’ll need to place a tracking code in your page before you can start to collect the sort of data that we’ll review in this article.

Analyzing Mobile Visits Via Reports

The standard reports are where most people browse in Google Analytics. Let’s look at the most important ones for mobile activity.

1. Overview

This report (at “Audience” → “Mobile” → “Overview”) breaks down visits by mobile, desktop and tablet. It’s helpful for quickly seeing high-level statistics, such as what percentage of visits are from mobile devices.

Large preview

When clients question the value of making a static website responsive, I find that simply showing them how many mobile visits they’re getting often helps to convince them. If the experience of a significant portion of users is less than optimal, then the owner should realize that it’s time to take their needs seriously. In my experience, desktop activity accounts for only about 50 to 60% of visits, with mobile and tablet combined making up the rest (close to half!).

However, a development and design team should dig deeper than just an overview. This is where the “Devices” report comes in handy.

2. Devices

This report (“Audience” → “Mobile” → “Devices”) breaks down statistics into the specific devices that people use to access your website. The details here can help you pinpoint problems with usability on a particular phone, tablet or mobile operating system. For example, if the Galaxy S III shows a significantly higher bounce rate than the iPhone, then you might want to compare how your website appears on those devices.

Large preview

While viewing the report for a local service-based business whose website focuses on lead generation, I saw significantly higher conversions from iPads than any phones in the list. Simply cramming the desktop website into a smartphone browser did not give users a positive experience with the lead submission process. However, at the tablet size, the website was still large enough for visitors to use the form easily enough.

As someone who manages online advertising campaigns, I generally find the opposite to be true, with tablets converting at a lower rate than phones. These statistics, then, reinforced the need to improve the mobile experience to bring phone conversions up to par. With a responsive layout that eliminates the need for the user to “pinch and zoom” to fill out the form in their phone’s browser, the website would perform more effectively.

Large preview

But this report doesn’t stop with a list of devices. You may also select various dimensions across the top to review factors such as screen resolution and operating system. Reviewing the most common screen resolutions of visitors will help you to plan the breakpoints of a responsive redesign. You can also flag an excessively high bounce rate or a low time on site for a particular resolution, which might be the result of content getting cut off at that size.

3. Browser & OS

This report (“Audience” → “Technology“ → “Browser & OS”) shows the main browsers being used to access your website, and it also highlights trends — for example, whether the default browser or Firefox is used more on Android phones. Also, you can view statistics by operating system and even add a column for operating system version (click the “Secondary Dimension” drop-down menu, and choose “Operating System Version”).

Large preview

The report could also reveal how much effort you should put into making the website backwards-compatible. For instance, when reviewing statistics for an engineering company’s website, our development team found a significant number of visitors still browsing in Internet Explorer 8 (probably in offices whose IT departments are still debating whether to upgrade from CRT to LCD monitors!), with only a small percentage coming from mobile devices. These results helped to focus us on making the website usable on old systems.

Creating Advanced Segments

While the main reports provide plenty of helpful information, advanced segments enable you to drill deeper into useful data on mobile visitors. You can set up segments to distinguish between mobile, tablet and desktop visits, and even segment more narrowly by screen size and device.

To view advanced segments, make sure you’re in the “Reporting” tab in your Google Analytics account. Near the top of the screen (between the graph and the menu bar), click the drop-down arrow beside “All Visits.” A menu will appear allowing you to view existing segments and create new ones. In the “Built-In” segments, you should be able to select the default ones for “Mobile Traffic” and “Tablet Traffic.”

However, you’ll want to create a segment just for desktop traffic (because the only built-in option lumps desktops and tablets together).

Select “Create New Segment” and, in the new menu that appears, choose “Technology” in the left sidebar. Scroll down to “Device Category” and enter “Desktop.” Then, save the segment so that you can use it in your account.

You can apply advanced segments to reports throughout Google Analytics’ interface. I frequently use these when reviewing statistics in general, because user behavior on mobile differs so much from on tablets and desktops. In addition, when troubleshooting a spike in bounce rates or some other problem, I’ll often use these segments to determine whether the problem is specific to a device type. Below are some useful reports to review when filtering down to mobile traffic.

1. Pages

Here (“Behavior” → “Site Content” → “All Pages”), you can determine the top pages viewed by mobile users. This information is valuable for planning which navigation elements to include on mobile and for identifying any important pages that mobile users are not finding. In addition, comparing the top pages on desktop and mobile will yield insight into the different goals of each user type. For instance, a desktop user might browse heavily through your product inventory, while a smartphone user might just be trying to find an address to your nearest location.

2. Exit Pages

This report (“Behavior” → “Site Content” → “Exit Pages”) shows the last pages people view before leaving the website. When you’ve filtered down to a mobile segment, review the top exit pages and determine whether any mobile-specific problems are hindering visitors from completing the desired goal.

For example, we found that a lot of people, especially mobile users, were leaving our company’s website on pages that discuss particular services. To address this, we placed headers with brief “Contact us” messaging at the top of these pages.

3. Visitors Flow

This report (“Audience” → “Visitors Flow”) shows the top paths people take through your website. Again, comparing mobile and desktop behavior should help you to decide which pages to make most prominent at each size.

On one website, I found that the “About” page was one of the most common pages for users to visit on desktop. However, on mobile, the page was much lower down in the list, because the link to it was in a navigation bar that was barely noticeable on a phone.

4. Traffic Sources

This report (“Acquisition” → “All Traffic”) shows the top sources through which people arrive on the website. Comparing the mobile and desktop segments here will show whether any particular source skews towards mobile users. I’ve often noticed a higher percentage of traffic coming from Facebook on mobile than on desktop, because so many people access Facebook via a smartphone app. This awareness can help you to tailor your messaging at mobile sizes to people who have discovered your brand via social media. For example, if it’s a blog, make sure that the social sharing buttons are visible and functional on mobile.

In addition, this report can help you to diagnose problems with search engine indexing on mobile. In 2013, Google announced stricter regulations and penalties for websites with a poor mobile experience. If your organic traffic is steady on desktop but extremely low on mobile, then you might want to look for factors that are penalizing you on Google, such as Flash video or faulty redirects that take users from a subpage to the home page.

Act On The Data

If you have access to the Google Analytics account for the website you’re rebuilding, then you’ll have plenty of material to inform the design and development decisions. Take the time to review that data!

If you need to defend the value of making a website responsive, start by finding the percentage of recent visits from mobile and tablet. Move on to devices, browsers and screen sizes to decide which elements to include in the navigation for mobile. And use top pages, visitor flows and traffic sources to determine which content to make most prominent and how to guide users through the website at each size.

The most dangerous decision to make when planning any website is to ignore data about your audience. Any business that neglects to provide a friendly Web presence for mobile users will likely lose out on revenue to competitors who are doing it right. Design, development and marketing teams have a responsibility to use all of the data at their fingertips to guide decision-makers to make their websites work for a mobile audience.

Other Resources

• “Tracking Mobile Visitors in Google Analytics: A Checklist Guide for Mobile Insights,” Bridget Randolph, Distilled
• “What You Can Learn From Google Analytics Mobile Reports,” Anna Lewis, Search Engine Watch
• “How to Track Mobile Traffic in Google Analytics,” Andrew Shotland, Social Media Today
• “How to Use the New Google Analytics Advanced Segments,” Kristi Hines, KISSmetrics
• Help, Google Analytics
  This official support website has plenty of resources for getting started and for digging deeper into statistics.

(al, il)

Front page image credits: Timo Elliott

© Tim Jensen for Smashing Magazine, 2014.

Welcome, friends, to WebdesignerDepot’s monthly WordPress plugin roundup, March 2014 edition.

Every time I write one of these articles, I aim to include plugins that meet a variety of needs. This month however, there is a common thread amongst some (not all) of them: communities. More specifically, some of these plugins would be most useful on WordPress-based community sites. Anyone can use them of course, but they seem better-suited to WordPress sites with large numbers of users.

That said, look through the list. Try them out, have fun, and let us know what you think!

Simple Exclude Categories

Simple Exclude Categories provides additional settings for the Reading section in your settings menu. Simply put, it allows you to exclude entire categories of posts from your home page. There are numerous possible uses, especially if you can’t, or don’t know how to make custom post types.

FTP Sync — theme, media & plugin files

FTP Sync is one of the more interesting plugins on this list for a couple of reasons. First, there’s the functionality itself, which could speed up the process of deploying small changes to WordPress sites. Secondly, you can use the same plugin to create remote backups via FTP. Sadly, SFTP is not yet supported, but that’s coming.

The developer gives this interesting recommendation on the plugin’s WordPress.org page:

For best results, setup your local site’s wp-config.php to use your remote site’s database so you every time you sync your files even the database will match up with everything (since it’s the same database!).

WP Report Post

Remember what I was saying about plugins better suited to communities? WP Report Post is one of them. It adds a simple text link preceded by a small red icon to the header or footer of your post. You can, as an alternative, insert the link manually.

Clicking on that link loads a small form which allows the user to express why they think the post is inappropriate. On the admin side, you’ll see all flagged posts listed much as they appear on the All Posts screen. You’ll have the option to unpublish the post, delete it, or just delete the report.

Youtube Like Rating

Like Youtube’s rating system? You can use Youtube Like Rating to add “thumbs up” and “thumbs down” buttons to each and every post (“Green vs. Red bar” included!). You can allow everyone to vote, or only registered users. You can also enable voting on comments.

WP Product Review

Want to write product review on your blog without creating a custom post type? Once WP Product Review is installed, just make a new regular post. At the bottom of the page, you’ll be asked if this post is a review or not. Selecting “Yes” opens up a whole bunch of extra fields, where you can list things like the product’s features, its pros and cons, add a product image, and so on.

Sender

Another great one for communities, Sender does just that; it allows you to send custom e-mails to all users. It’s a simple plugin, there’s no WYSIWYG editing, just a text field for your message. You can choose to send the e-mail to all users, or just select the ones you want.

You are given the option of sending the e-mails through the Wp-mail function, PHPs default mail function, or the SMTP server of your choice.

WP Notifications Manager

WP Notifications Manager provides a simple interface for disabling the e-mail notifications that WordPress sends out. You can disable/enable the New User e-mails and Password Change e-mails separately. Additionally, you can have these e-mails sent to a different address, if you don’t want it going to the main e-mail.

Launch Check

Launch Check performs a couple of basic yes/no tests to see if you’re still using the default WordPress tagline, if you’ve opened up your site to search engines, and if you’ve installed Google Analytics. If your site fails any of these tests, you’re presented with notifications on the Admin side.

I’d like to see further development to this plugin. For example, if there was a plugin to remind me to change URLs in the content that still include “localhost”…

Contact Form 7: Wysiwyg Field

I don’t normally like just throwing WYSIWYG functionality around, but if you really want to have this option for text areas in your contact forms, it’s there. Just install this plugin, edit your form, and go. (Requires the Contact Form 7.)

Cookieless Comments

WordPress uses cookies to remember things like names, e-mail addresses, and so on for people who comment on your site regularly. If your site is based in the EU, there’s a law that says you have to inform users about the use of tracking cookies on your site.

If you’d rather not bother setting up a notification of some sort, you can use Cookieless Comments to simply disable those cookies. It’s not an ideal solution, perhaps, but it works.

WP Pipes

Now, I’m not a developer, so I have a limited comprehension of how “pipes” work. As I understand it, they are a means of aggregating/pulling information for display elsewhere. With WP Pipes you can add Yahoo-like pipe functionality to your WordPress install.

A quick test reveals that you can use this plugin to pull in posts from RSS feeds, and re-publish them (link your sources, people). You can also select specific categories of posts (and, I assume, custom post types) and publish them in a separate RSS feed.

You can do more, of course, but that’s for brighter minds than mine to figure out.

Inline Comments

Feeling the Medium comments-on-paragraphs jealousy? Feel jealous no more! Register your site with Disqus, and this plugin will give each paragraph in your posts its own comment thread.

Mind you, I do worry a bit. I’ve seen how long Disqus threads can take to load sometimes, and I wonder if using this system for each and every paragraph might be frustratingly slow. Still, I feel like it’s a step in the right direction. Having immediate context for a comment thread is a wonderful thing.

Simply Map Me

Use a lot of Google map embeds on your website? Instead of pasting the full embed code into the Text view of your post every time, just grab Simply Map Me. Once activated, just use type in a location (ie. Toronto, Ontario) and wrap it with the [map] short-code.

Bonus: WordPress Bitcoin

I marked WordPress Bitcoin as a “bonus” because I don’t know enough about Bitcoin to test it properly. Apparently, you can use it to accept Bitcoin payments via your WordPress site.

As a non-developer, I cannot speak to its security, either. Any cryptocurrency enthusiasts out there who want to give this a try?

Have you used any of these plugins? Have we missed one of your favorites? Let us know in the comments.

Featured image/thumbnail, uses news image via Shutterstock.

Mega Design Bundle from Inventicons – only $30!

Just as you can declare the background of an element to be a solid color in CSS, you can also declare that background to be a gradient. Using gradients declared in CSS, rather using an actual image file, is better for control and performance.

Gradients are typically one color that fades into another, but in CSS you can control every aspect of how that happens, from the direction to the colors (as many as you want) to where those color changes happen. Let's go through it all.

Gradients are background-image

While declaring the a solid color uses background-color property in CSS, gradients use background-image. This comes in useful in a few ways which we'll get into later. The shorthand background property will know what you mean if you declare one or the other.

.gradient {
    
      /* can be treated like a fallback */
      background-color: red;
    
      /* will be "on top", if browser supports it */
      background-image: linear-gradient(red, orange);
    
      /* these will reset other properties, like background-position, but it does know what you mean */
      background: red;
      background: linear-gradient(red, orange);
    
    }

Linear Gradient

Perhaps the most common and useful type of gradient is the linear-gradient(). The gradients "axis" can go from left-to-right, top-to-bottom, or at any angle you chose.

Not declaring an angle will assume top-to-bottom:

.gradient {
      background-image:
        linear-gradient(
          red, #f06d06
        );
    }

See the Pen BdhbD by Chris Coyier (@chriscoyier) on CodePen.

Those comma-separated colors can type of color you normally use: Hex, named colors, rgba, hsla, etc.

To make it left-to-right, you pass an additional parameter at the beginning of the linear-gradient() function starting with the word "to", indicating the direction, like "to right":

.gradient {
      background-image:
        linear-gradient(
          to right, 
          red, #f06d06
        );
    }

See the Pen zFoxn by Chris Coyier (@chriscoyier) on CodePen.

This "to" syntax works for corners as well. For instance if you wanted the axis of the gradient to start at the bottom left corner and go to the top right corner, you could say "to top right":

.gradient {
      background-image:
        linear-gradient(
          to top right, 
          red, #f06d06
        );
    }

See the Pen cruJe by Chris Coyier (@chriscoyier) on CodePen.

If that box was square, the angle of that gradient would have been 45°, but since it's not, it isn't. If you wanted to make sure it was 45°, you could declare that:

.gradient {
      background-image:
        linear-gradient(
          45deg, 
          red, #f06d06
        );
    }

You aren't limited to just two colors either. In fact you can have as many comma-separated colors as you want. Here's four:

.gradient {
      background-image:
        linear-gradient(
          to right, 
          red, 
          #f06d06, 
          rgb(255, 255, 0), 
          green
        );
    }

See the Pen niIjA by Chris Coyier (@chriscoyier) on CodePen.

You can also declare where you want any particular color to "start". Those are called "color-stops". Say you wanted yellow to take up the majority of the space, but red only a little bit in the beginning, you could make the yellow color-stop pretty early:

.gradient {
      height: 100px;
      background-color: red;
      background-image:
        linear-gradient(
          to right,
          red,
          yellow 10%
        );
    }

See the Pen xnqfj by Chris Coyier (@chriscoyier) on CodePen.

We tend to think of gradients as fading colors, but if you have two color stops that are the same, you can make a solid color instantly change to another solid color. This can be useful for declaring a full-height background that simulates columns.

.columns-bg {
      background-image:
        linear-gradient(
          to right, 
          #fffdc2,
          #fffdc2 15%,
          #d7f0a2 15%,
          #d7f0a2 85%,
          #fffdc2 85%
        );
    }

See the Pen csgoD by Chris Coyier (@chriscoyier) on CodePen.

Browser Support / Prefixes

So far we've only looked at the new syntax, but CSS gradients have been around for quite a while. Browser support is good. Where it gets tricky is syntax and prefixing. There are three different syntaxes that browsers have supported. This isn't what they are officially called, but you can think of it like:

1. Old: original WebKit-only way, with stuff like from() and color-stop()
2. Tweener: old angle system, e.g. "left"
3. New: new angle system, e.g. "to right"

And then prefixing as well.

Let's try a chart:

There is some overlap in there. For instance when a browser supports the New syntax they probably also support the older syntaxes as well, including the prefix. Best practice is: if it supports New, use New.

So if you wanted to absolute deepest possible browser support, a linear gradient might look like this:

.gradient {
      
      /* Fallback (could use .jpg/.png alternatively) */
      background-color: red;
    
      /* SVG fallback for IE 9 (could be data URI, or could use filter) */
      background-image: url(fallback-gradient.svg); 
    
      /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
      background-image:
        -webkit-gradient(linear, left top, right top, from(red), to(#f06d06));
      
      /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
      background-image:
        -webkit-linear-gradient(left, red, #f06d06);
    
      /* Firefox 3.6 - 15 */
      background-image:
        -moz-linear-gradient(left, red, #f06d06);
    
      /* Opera 11.1 - 12 */
      background-image:
        -o-linear-gradient(left, red, #f06d06);
    
      /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
      background-image:
        linear-gradient(to right, red, #f06d06);
    
    }

That's an awful lot of code there. Doing it by hand would be error-prone and a lot of work. Autoprefixer does a good job with it, allowing you to trim that amount of code back as you decide what browsers to support.

The Compass mixin can do SVG data URI's for IE 9 if that's important to you.

IE filters

Internet Explorer (IE) 6-9, while they don't support the CSS gradient syntax, do offer a programatic way to do background gradients

/* "Invalid", but works in 6-8 */
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);
    
    /* Valid, works in 8-9 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";

There are some considerations here on deciding to use this or not:

1. filter is generally considered a bad practice for performance,
2. background-image overrides filter, so if you need to use that for a fallback, filters are out. If a solid color is an acceptable fallback (background-color), filter is a possibility

Even though filters only work with hex values, you can still get alpha transparency by prefacing the hex value with the amount of transparency from 00 (0%) to FF (100%). Example:

rgba(92,47,90,1) == #FF5C2F5A
rgba(92,47,90,0) == #005C2F5A

Radial Gradients

Radial gradient differ from linear in that they start at a single point and emanate outwards. Gradients are often used to simulate a lighting, which as we know isn't always straight, so they can be useful to make a gradient seem even more natural.

The default is for the first color to start in the (center center) of the element and fade to the end color toward the edge of the element. The fade happens at an equal rate no matter which direction.

.gradient {
      background-image:
        radial-gradient(
          yellow,
          #f06d06
        );
    }

See the Pen blcqw by Chris Coyier (@chriscoyier) on CodePen.

You can see how that gradient makes an elliptical shape, since the element is not a square. That is the default (ellipse, as the first parameter), but if we say we want a circle we can force it to be so:

.gradient {
      background-image:
        radial-gradient(
          circle,
          yellow,
          #f06d06
        );
    }

Notice the gradient is circular, but only fades all the way to the ending color along the farthest edge. If we needed that circle to be entirely within the element, we could ensure that by specifying we want the fade to end by the "closest-side" as a space-separated value from the shape, like:

.gradient {
      background-image:
        radial-gradient(
          circle closest-side,
          yellow,
          #f06d06
        );
    }

See the Pen EFyvp by Chris Coyier (@chriscoyier) on CodePen.

The possible values there are: closest-corner, closest-side, farthest-corner, farthest-side. You can think of it like: "I want this radial gradient to fade from the center point to the __________, and everywhere else fills in to accommodate that."

A radial gradient doesn't have to start at the default center either, you can specify a certain point by using "at ______" as part of the first parameter, like:

.gradient {
      background-image:
        radial-gradient(
          circle at top right,
          yellow,
          #f06d06
        );
    }

I'll make it more obvious here by making the example a square and adjusting a color-stop:

See the Pen iuaDL by Chris Coyier (@chriscoyier) on CodePen.

Browser Support

It's largely the same as linear-gradient(), except a very old version of Opera, right when they started supporting gradients, only did linear and not radial.

But similar to linear, radial-gradient() has gone through some syntax changes. There is, again: "Old", "Tweener", and "New".

/* Example of Old */
    background-image: 
      -webkit-gradient(radial, center center, 0, center center, 141, from(black), to(white), color-stop(25%, blue), color-stop(40%, green), color-stop(60%, red), color-stop(80%, purple));
    
    /* Example of Tweener */
    background-image: 
      -webkit-radial-gradient(45px 45px, farthest-corner, #F00 0%, #00F 100%) repeat scroll 0% 0% rgba(0, 0, 0, 0);
    
    /* Example of New */
    background-image: 
      radial-gradient(circle farthest-side at right, #00F, #FFF);

The hallmarks being:

• Old: Prefixed with -webkit-, stuff like from() and color-stop()
• Tweener: First param was location of center. That will completely break now in browsers that support new syntax unprefixed, so make sure any tweener syntax is prefixed.
• New: Verbose first param, like "circle closest-corner at top right"

Again, I'd let Autoprefixer handle this. You write in the newest syntax, it does fallbacks. Radial gradients are more mind-bending than linear, so I'd recommend attempting to just get comfortable with the newest syntax and going with that (and if necessary, forget what you know about older syntaxes).

Repeating Gradients

With ever-so-slightly less browser support are repeating gradients. They come in both linear and radial varieties.

There is a trick, with non-repeating gradients, to create the gradient in such a way that if it was a little tiny rectangle, it would line up with other little tiny rectangle versions of itself to create a repeating pattern. So essentially create that gradient and set the background-size to make that little tiny rectangle. That made it easy to make stripes, which you could then rotate or whatever.

With repeating-linear-gradient(), you don't have to resort to that trickery. The size of the gradient is determined by the final color stop. If that's at 20px, the size of the gradient (which then repeats) is a 20px by 20px square.

.repeat {
      background-image: 
        repeating-linear-gradient(
          45deg,
          yellow,
          yellow 10px,
          red 10px,
          red 20px /* determines size */
        );
    }

See the Pen lAkyo by Chris Coyier (@chriscoyier) on CodePen.

Same with radial:

.repeat {
      background: 
        repeating-radial-gradient(
          circle at 0 0, 
          #eee,
          #ccc 50px
        );
    }

See the Pen Repeating Gradients by Chris Coyier (@chriscoyier) on CodePen.

Improper Fallback Loading

As we've covered, some really old browsers don't support any CSS gradient syntax at all. If you need a fallback that is still a gradient, an image (.jpg / .png) could do the trick. The scary part with that is that some slightly-less-old browsers, that were just starting to support CSS gradients, would load the fallback image. As in, make the HTTP request for the image even though it would render the CSS gradient.

Firefox 3.5.8 did this (see screenshot), as well as Chrome 5- and Safari 5.0.1. See:

The good news is this isn't really any issue anymore. The only offending browsers were Chrome and Safari and Chrome hasn't done it since 6 and Safari hasn't done it as of 5.1, going on three years ago.

Additional Resources

• Snag a block of the CSS covering all prefixes/syntaxes from CSS3 Please!
• Can I Use on gradients
• Mozilla docs for linear gradients, repeating liner gradient, radial gradient, and repeating linear gradient.
• Gradients Gallery (you can do some crazy patterns with gradients)

CSS Gradients is a post from CSS-Tricks

Knowledge banking for a hyper connected society.

A super-secure place for sensitive data to mingle could free companies to get the benefits of sharing it without risking leaks.

As companies from the financial sector to the health industry amass ever larger, more detailed databases of information about people, it is clear that combining different data sets can offer powerful insights. But to protect users’ privacy, many of these data sets stay locked up inside corporate firewalls.