Posts About Foundation
Posts About Foundation
There's a revolution happening right now. The way we think about and design websites is going to change again. Old conventions and methods are being replaced by exciting new technologies that open up entirely new ways to design and build the web. And they're available today.
Out With the Old
Most early websites in the 90’s were little more than digital brochures, which makes sense since the web was born from the world of print. Our options as web designers for laying out content fell short of what was available to print designers for many years. Slowly but surely, our tools got better and we discovered new methods and techniques that allowed us to do some incredible things. The web came into its own, but the world of print still exerts its influence on the way many designers think. To this day we still call web files “documents,” arrange our content in “pages,” and try to fit the experience of users into sitemaps.
But pages are limiting. Pages are a convention of print- they don’t fit for the dynamic, interactive medium that is the web. Users don’t look at websites in some linear order, they journey through them, they explore through multiple pathways. We have a completely transformable, liquid canvas to paint this picture with, but we aren’t using it! The next decade will see more customization, personalization and predictive technologies that make the content and presentation fully dynamic. The factory line, widget production line mentality no longer applies- each user can have a unique experience.
In With the New
Over the last two decades, ZURB has pushed the web forward through our design work, and wth Foundation, the world’s most advanced front-end framework. Foundation was designed to help people take full advantage of the power of the web. It was the first framework to give designers a responsive grid to work with, the first to be mobile-first, the first to be semantic, and the first to be constructed with Sass, and the first to have accessibility built in to give designers and developers the tools they needed to make a user experience. Just last year, Flexbox was added to expand layout options even more. And we’re continuing to bring technology advancements to you. We're excited about a new technology that we think has the power to dramatically change the web, a technology that finally transform websites into the completely moldable, interactive, and customizable experiences we have always envisioned they would be. That technology is CSS Grid.
We’ve been experimenting with the possibilities of CSS Grid for months, and we’re incredibly excited about what we’ve been able to achieve. Here are three Playground Pieces that demonstrate the possibilities of CSS Grid, each with huge ramifications for Foundation:
1. Foundation CSS Grid Examples
First, an exploration into the the possibilities of CSS Grid with Foundation. In this grid we explore three different possibilities enabled by CSS grid. First a responsive data component that uses tabular views where space permits, second a responsive navigation “mega menu”, and finally a complex layering of content that previously would have been complicated and fragile to implement. Each of these can be a new component within Foundation. These also highlight how with CSS-grid, we will be able to evolve even components that previously were dramatically different to morph into one another responsively.Foundation CSS Grid Examples
2. Foundation CSS Grid + Container Queries
Next, we take one of these CSS-grid enabled components in Foundation and explore the possibilities that arise when combining it with another hot new technology: Container Queries. Container Queries take the concept of media queries and allow you to apply it to containers within a page - letting you truly create components responsive to the space available to them. In this exploration, we combine a responsive data view with an expandable navigation, using container queries to automatically adjust the data view based on the space available to it. While container queries do not yet have browser support, there is a first class polyfill and we are making them a first class citizen within Foundation.Foundation CSS Grid + Container Queries
3. Foundation Grids within Grids
Finally, we take these concepts to the next level. Proponents of CSS Grid often talk about the page-level layout possibilities, but by combining CSS Grid with container queries we firmly believe that we should be thinking beyond the page, and into nestable, reusable, grid-based components. In this final exploration we explore the possibilities of nesting grid based components with Foundation, with the inner component able to move seamlessly between parts of the other grid, formatting itself intelligently based on the space available to it. Foundation’s grid has always been flexible, but with CSS Grid hitting browsers the potential to mix, match, and combine grids is quickly becoming a reality.Foundation Grids within Grids
What CSS Grid means for Foundation and the Future of the Web
Foundation has always led the way for how the web is designed and built, and we’ve been preparing ways we can help you harness the power CSS Grid. We see a future filled with radically responsive components that morph and change depending on the circumstance or device. The development of CSS Grid will enable the very concept of grids to change from a massive structural choice to something more like components. Imagine having a set of grid components that allow you to get entire layouts and sublayouts right out of the box, and then nesting, combining, and recombining them.
Browser support for CSS Grid is exploding, with several adding support just this month:
- Chrome. Enabled by default since version 57.
- Firefox. Enabled by default since version 53.
- Internet Explorer. Enabled by default since IE10
- Opera. Enabled by default since version 44.
- Safari. Enabled by default since version 10.1.
The term “web page” is starting to feel very, very... inadequate. CSS Grid opens up layout in ways that were not possible before, and our minds are racing with the opportunity in front of us. We hope these experiments will get you as excited as we are, and demonstrate a little of what’s possible with this new tool.
ZURB works with companies every day to help them reimagine the possible with regards to their web applications, websites, and products. Do you have a project that deserves to push the limits? Feel free to get in touch, we’d love to work with you.
Designers working on web projects in 2017, in some ways, face more challenges than ever before. They have to create engaging websites, apps, and services that work seamlessly across all devices and work for a global audience at a pace that seems to speed up every year. That audience too is more tech savvy, have higher expectations and are more design literate than ever before and expect near perfection. Faced with these challenges, it's more important than ever for designers to be aware of emerging trends, solutions and patterns that can help them solve common issues, capture the full attention of their audiences, and deliver amazing experiences.
Here at ZURB, we've helped hundreds of companies surface the best solutions and take advantage of new patterns in their websites and products. We've created this list of 17 design and development trends we think every designer should be familiar with to shape their 2017 and well beyond.
(In no particular order...)
Taking its name from the architecture style of the 60's and 70's, Brutalism in design consists of bold, in-your-face collages of text and images, where anything goes. Echoing the web from yesteryear, Brutalist sites often employ simple markup, inline styles, and harsh colors and gradients. Some even argue that Instagram's new(er) gradient logo could be classified as Brutalist, with it's 90's esque neon colors and gradient design.theoutline.com
Pascal Deville, an authority on the Brutalism trend, and founder of brutalistwebsites.com defines the movement as this:
'In its ruggedness and lack of concern to look comfortable or easy, Brutalism can be seen as a reaction by a younger generation to the lightness, optimism, and frivolity of today's web design.'
But not all Brutalist websites are an all out attack on the eyes. A few sites like Bloomberg News and TheOutline.com borrow from the aesthetic while adding a level of polish not typically seen in most sites.
We think designers can use Brutalism to set their site apart from the rest with bold color choices, large typography, and layouts that break away from the common hero-image-then-3-up pattern.
- The Brutalist aesthetic makes good use of typography, so choosing the right typeface is critical. Check out these tips for conveying the right typographic voice.
- Brutalist websites run the gamut from mild to wild. Get inspired with these examples.
- Spotify has been flirting with this style for a while. Check out how they make use of bold colors, strong typography, and a collage inspired layout.
2. Large Screen Design
When most people think of responsive web design, they think of shrinking a website down from a desktop to something that looks great on a tablet or mobile phone. But this is ignoring a growing segment of users, those that have large scale monitors. Yes, while mobile has certain exploded in popularity over the last ten years, so has extra large monitors with ever increasing pixel densities. The problem is that most focus has seemed to be on the smaller side of the spectrum with, few sites truly catering to their large screen users. By looking at your data, you may find that the majority of your users, or at least you're converting users are on displays of 1920x1080 or higher. There are a lot of cool and creative ways to use that kind of screen real estate and clever designers are not afraid to go big.apple.com
- SVG’s are perfect for large screen design because they are scalable, resolution independent, have small file sizes and are supported by most browsers. Here are 10 resources to learn more about them.
- Targeting SVGs with CSS allows you to do cool things like using media queries to hide and reveal parts of an image by screen size. Check out our lesson to learn the basics.
- The Interchange component in Foundation uses media queries to load the images that are appropriate for a user's browser, making responsive images a snap. It decreases the load times for mobile users while still serving the bigger content to your visitors with higher screen resolutions. Learn how to use it.
3. Responsive Components
It's been nearly 8 years since Ethan Marcotte introduced the concept of responsive web design to the world, and we've seen it develop at an incredible pace. There are new techniques and technologies on the horizon though, that are going to dramatically simplify the write of responsive elements and make today's responsive sites look simplistic and naive. Some examples are element queries and the upcoming CSS-grid spec. These two technologies will enable web designers and developers to create experiences that are truly tuned to every device size. Element queries will allow creating components that are responsive based on the space allotted to them rather than the full screen size, while CSS-grid allows us to dramatically change layouts based on media queries.
Between the two, we believe we will see dramatic increase in the diversity of responsive patterns easily available to designers and front-end developers.
- Element queries and container queries open a new horizon for responsive components, here are 10 resources to learn more.
- The Foundation team broke down how responsive components work and what’s coming in the near future in this recent article.
4. Device Specific Microinteractions
As Nick Babich pointed out in a recent post on Medium, microinteractions provide users acknowledgement they crave. Popular apps like Slack have skillfully weaved them throughout the entire experience, delighting users and making the app feel more intuitive.
By taking advantage of whatever is available to them, device specific microinteractions will only serve to make microinteractions more compelling and personal.
- Learn the basics of microinteractions, why they’re important, and how to use them.
- Playing around CSS animations and transitions can help you build and test some neat microinteractions. Here’s a few techniques.
5. Split-screen Design
A simple way to highlight a contrast, balance text with images, or share two different products, split-screen design has grown in popularity with many designers. Easy to implement, split-screen design is a great way to present content in a way that feels fresh and balanced. For products or sites that require a comparison, split-screen design is a no brainer.theoceanfortlauderdale.com
We've seen some really creative uses of split-screen design, and we think people are only beginning to scratch the surface. We're looking forward to new ways this pattern can be used to tell a unique story and guide users.
- Get inspired with some great examples of split screen design on Pattern Tap.
- Still need inspiration? These 20 examples showcase some really creative applications of this trend.
- Nick Babich offer some clear best practices for split screen design you should definitely adhere to.
- Just because they’re simple doesn’t mean they’re easy. Here are three things to keep in mind when building a split screen layout.
6. Reactive Animations
We think we'll soon see more technologies that push what's possible in the browser, led by animation heavy interactions.
- Our Reactive Listener playground piece is a great example of how reactive animation can be used to highlight content to users even before they take action.
- By harnessing the power of JS and a little CSS, combined with the capabilities of modern browsers, we can deliver experiences that are responsive, fluid, react to user input and give native mobile apps a run for their money. Here are 10 resources to start with.
7. Refreshing Card Based Interfaces
While cards have been around for years, they are a solution that is not going away anytime soon. A pattern tailor made for responsive web design, they make it easy to display large amounts of information in a way that is easy to browse and simple to implement. In recent months, we've seen them used for more than text and links, becoming hubs of all kinds of rich media. Designers are playing around with rich microinteractions within cards themselves, and are finding ways to make this old pattern new again.google.com
We see no reason to abandon tried and true patterns that solve common problems, and are excited about the new experimentation we're seeing with cards.
- Cards are all over the web, but we still see designer making these 5 mistakes.
- Not a big reader? Learn how to avoid those 5 mistakes by watching this video.
- Cards are the basis for a ton of successful interfaces. These 10 resources will help you figure out how to best use them in your project.
- Foundation’s new Flex cards open you up to all kinds of possibilities. In this lesson, Rafi breaks down how to use this new component.
- Nick Babich highlights some best practices of using a card based UI in this incredible article.
Download the PDF for 10 More Trends, Exclusive Resources and Tutorials
The world of the web moves at light speed. It requires designers and developers working in it to constantly soak up new information, techniques and strategies to stay effective and impactful. To help them stay up to date and on top of new trends and solutions, we publish Responsive Reading, an email magazine covering new developments in responsive web design each month. It's free to sign up, and if you join now you'll get a free copy of our 17 Responsive Trends PDF that contains all 17 trends along with links to resources, tutorials and articles that will help you implement these trends in your own projects today.
Did you know that most men own at least one pair of underwear that's over 7 years old? We didn't' and we sort of wish that realization stayed hidden from us, to be honest. MeUndies, a company leading the movement in underwear innovation by providing comfortable everyday basics and a transparent shopping experience, gave us this fact. They recently started using Foundation on their site in an effort to boost their mobile sales, which constitutes most of their traffic and we wanted to share their story.
After 7 years, it was time for MeUndies to change their site's underwear, which is to say their code. See, the MeUndies site was beginning to boom on mobile, but they were losing sales by not optimizing the experience and ease of use for those mobile users. The team began to put their heads together and started exploring solutions.
What's underneath matters, something MeUndies knows all too well, so they chose Foundation as the basis for their new responsive website. With the decision clearly made, the MeUndies team put on their freshest pairs of undies for coding and got to work. Since they're a small start-up team of 2-3 people coding, they needed to be able to work quickly and effectively. It was an ambitious project, involving rebuilding their entire website, but Foundation made it easy for them to work at lightning speed. Within just 3 months they were able to build a beautifully responsive site with some especially slick interactions on mobile. 'How did this help them?' you may ask. Well, after they put a new, fresh pair of Foundation-woven underwear on their site to make it responsive, they saw a 40% increase in their mobile conversion! Now their mobile traffic is 60% of their sales. Just like on any third date, underwear was the closer.
According to MeUndies, Foundation is the best underwear they could have put on their site. What makes Foundation such a good pair though? Check out the case study to see how the MeUndies team cleverly swapped out a non-responsive grid for Foundation's and how they configured Foundation's components to do their bidding.
If you're site is in need of a refresh, we encourage you to check out Foundation- don't wait seven years to change out your underwear or your site's code! Hey and guess what? MeUndies was so happy with Foundation they wanted to give back to you, the community, by giving what they know best: undies!
We're partnering with MeUndies to give one lucky winner a pair of underwear for each month of the year - that's 12 pairs! All you need to do to enter is sign up for our email newsletter and you're entered in to win. Not only will you be entered into the giveaway, but you'll also stay up to date with all the latest updates and news from us and on Foundation. That way, you can get the freshest code possible on your site, to always keep it fresh, clean, and sexy. So, open up those drawers (or terminals), throw out your old underwear and get a fresh new pair now!
Mutation, it is the key to our evolution. It has enabled us to evolve into the dominant species on the planet. This process normally takes thousands and thousands of years. But every few hundred millenia, evolution leaps forward. - Professor X (Marvel's X-Men Comic Book Series)
Oscar Isaac as "Apocalypse" in 'X-Men: Apocalypse.' 20th Century Fox Film
Following along the history of the Marvel Universe, there was a long period of time with no change in the world of Mutation... the DOM Events Level 3 spec deprecated Mutation Events but there were no major changes from 2000 until the arrival of the DOM Events Level 4 spec in 2013, where Mutation Observers were introduced.
As with the proliferation of observed Mutants in Marvel's universe during WW2, the re-instigation of the Browser Wars in the early 2010s resulted in the rapid spread of Mutation Observers throughout the web ecosystem. First showing up in Safari, Chrome and Firefox in early 2012 (before the public spec was drafted!), they rapidly arrived in iOS Safari (January 2013), Opera (July 2013), Internet Explorer (October 2013), and Android Browser (December 2013). They are now widely enough spread that we are able to more or less count on their presence throughout the web, and they have been added to Foundation in the 6.3.0 release.
Foundation's First Mutants
The first steps towards the true integration of Mutation Observers were submitted as a pull request by Corey Snyder on August 18, 2016. This pull request started out simply by creating the infrastructure we need to take advantage of this new capability throughout the framework. By adding a data-mutate attribute and some automatic listeners and triggers, we began to lay the groundwork for our Mutant future. Like Professor X setting up Xavier's School for Gifted Youngsters, this utility gives us the ability to begin teaching ALL of our Foundation components how to work with and understand Mutations.
Building and Distributing Cerebro
Patrick Stewart as "Professor X" in 'X-Men.' 20th Century Fox Film
The primary use case for Mutation Observers is for elements that need to understand something about their children (the elements they contain) in order to properly render or behave. For example, the Equalizer component depends on understanding the sizes of all of the different sub-elements that it is equalizing. Prior to utilizing Mutation Observers, if those sub elements changed, the Equalizer component would break, unless you as a user manually told it to reinitialize. What the [data-mutate] attribute allows for is to have the Equalizer component AUTOMATICALLY notice when those subcomponents change and reinitialize itself to adjust. This is kind of like the Cerebro machine used by Professor X - adding a [data-mutate] attribute amplifies the abilities the Equalizer component already has and gives it the ability to be instantly in touch with changes happening in its children.
Many components such as Equalizer, Tabs, Interchange, Toggler, and Responsive Navigation have already benefited from the Mutation Observer infrastructure and in doing so have cleaned up and resolved many long-standing bugs. As we get deeper into this shift, one can imagine new possibilities of automatic adjustments and interacting components.
However, with great power there is great responsibility - it takes time, energy, and care to teach someone to use Cerebro - and simply slapping a 'data-mutate' attribute onto a component may cause more problems than it solves. Many of the components that will eventually benefit from understanding Mutation Observers still need work to make it happen. There's a catalog of ongoing efforts underway here, you can watch the progress or even jump in and help make it happen.
You Too Can Take Advantage of Mutation Observers
Cast of 'X-Men: Apocalypse.' 20th Century Fox Film
One of the awesome things about integrating Mutation Observers into the Foundation Triggers utility is that it makes it much easier for YOU to take advantage of Mutation Observers. Simply add a [data-mutate] data attribute to any element in your page, and the Foundation Utilities will set up observers on the children of that element, triggering a 'mutateme.zf.trigger' event on any structural or stylistic change. With this infrastructure in place, Mutation Observers can finally follow Mutants out of the shadows, and into the key roles of society (aka application) where they can do the most good.
Check out the new Foundation 6.3 update to learn more about Mutation Observers and all of the other cool new features!
Holiday season has arrived and that usually means one thing' more gifts than you can shake a handlebar mustache at! The Foundation team, Yetinauts, and a whole lotta contributors have been hard at work on a huge update to Foundation that is stuffed to the brim with new goodies you're going to go nuts for. The best part? It's available for you to download today, whether you've been naughty or nice. You don't need to shake the box, we'll tell you exactly what's inside:
- A new, bulletproof off-canvas: 6.3 includes an all new off-canvas implementation that adds features and improves performance over the existing version. Open from the top, bottom, side, you name it. It's even backwards compatible so you don't need to change any markup. Thanks for your hard work Brett Mason!
- Cards!: After lots of debate and iterations we have added Cards to Foundation 6. Card based designs are perfect for responsive sites and make it easy to display a ton of information without overwhelming your users (as long as you use them correctly). Another awesome contribution by Brett Mason!
- Responsive Accordion to Tabs: Tabs work great on larger screens but can be a mess on mobile. With this new update, you can switch your UI based on screen size from tabs to responsive accordions for a better experience on mobile. It's a breeze to implement and provide an awesome experience for your users. Thanks to designerno1, for this one!
- Mutation observers: Foundation is the most advanced framework in the world for a reason. We're always looking to include awesome technologies that will help you develop faster. Mutation observers work behind the scenes and automatically detect DOM changes and triggers updates in components. This saves you manually having to Reflow elements to trigger changes in things like reveal modals, sticky bars, equalizer, and more. Shoutout to Corey Snyder for putting this one together!
- Deep linking to Tabs: Deep linking has become one of the hottest topics on the web within the last few years and absolutely critical for eCommerce sites and mobile apps. Have specific content in tabs and want to send users to it? Now you can in 6.3 thanks to ahebrank.
- Print Styling: Traditionally, printing a responsive webpage is very difficult. Foundation typically would only show the mobile screen, other frameworks throw up their hands, and you'd have to spend hours setting up a custom print stylesheet. In 6.3, you can specify exactly which breakpoint you want your print page to mirror, and Foundation will figure out the rest. Shout out to Andy Cochran for adding that!
- Vertical Rhythm: Foundation has always made it easy to manipulate the sizes of your different types of headers and text, but to create strong vertical rhythm on a site you need more than this. With 6.3 the configuration of typography sizing, line height, and margins are all accessible in a single compact setting. Kudos to Karl Anders!
- Flexbox Helpers:We've been using #FLEXBOX more and more recently, and getting more and more excited about using it for UI. In 6.3 we've added a bunch of new helpers that make Flexbox more accessible and easier to prototype with.
Yep, we're ending the the year with a bang, our biggest update since Foundation for Sites 6 was launched last year. It's also a fitting way to cap off Foundation's 5th birthday celebration. Thanks to all who contributed, Foundation is still the most advanced front-end framework in the world. We couldn't have done any of this without our awesome community of Yetinauts and contributors. So tear into the new Foundation for Sites 6.3 update today and let us know what you think!
The new Transformers movie trailer just dropped to a surprising amount of fanfare. Regardless of how you feel about Michael Bay's metal clanking movie pantheon, you have to admit that at least the concept of robots beating the snot out of each other is pretty cool. In the series, a set of shape changing robot-beings invade earth and entangle humans in their battles in search of universal domination. In the web world we're fighting a similar battle, the proliferation of devices that have led to the rise of a set of shape changing components, entangling designers in their own search for universal domination.
Like Transformers, responsive components change their size and shape to fit into different circumstances and devices. But how do you make sure you're using them effectively and not just creating a loud, metallic mess? Key to winning the battle is a deep understanding of the makeup of your 'troops', knowing the key factors to consider and the components you can call upon to step up and fill their roles.
Assessing the Battlefield - Key Factors of Responsive Components
When considering responsive components, the elephant (or Dinobot) in the room is space, but there's a multitude of space-related factors to consider.
- Vertical Space - how much will you need to scroll, can you make something take less height by shrinking an image, or splitting a list into multiple columns?
- Horizontal Space - Large numbers of columns are challenging to display within a mobile device, resulting in a desire to create interfaces that make sense when you stack components or align them vertically.
- Clickable Space - On mobile devices, while you have less space to play with, you actually want clickable items to take up MORE space, because fingers on a touch screen are less precise than a mouse.
Your Transformer Army - Common Responsive Patterns
Just as the Transformers have different specialties and are called to duty in ways that match their abilities, different components also have specialties. As mobile-first design has become more and more of a standard, we've begun to develop common, reusable patterns that function well responsively and can be used as parts of your design tool chest.
The first of these is cards. Cards are the Bumblebee of Responsive design - small, able to fit into many situations, but often overused and can get into trouble. Cards are by their nature incredibly easy to make responsive - they form an atomic unit that can be expanded or laid out side by side as screen size permits, but also fit naturally within a mobile environment. Just be careful not to overuse.
Another extremely common pattern for a responsive component is in site navigation. This is a place where not only the content layout matters, but interaction patterns are super important. Dropdown menus feel extremely natural in desktop environments, but are clunky and hard to navigate on a small, touchscreen device. In contrast, drilldown menus have been a part of iOS native navigation since the beginning, and feel completely natural in a mobile environment. An extremely common pattern for a responsive navigation component is now to use a top bar containing a set of links that have dropdown navigation on large screens, switching over to have a top bar hamburger icon that taps open either a drilldown menu or scrollable 'mega menu'. These menu patterns are like the Constructicons - relatively weak in isolation, but super similar and when their powers combine they create a super-powerful component.
A final pattern we want to highlight is for hiding and displaying content. Sometimes, you have just too much content to handle, and you need to throw something powerful at it. In the Transformers, this is when Optimus Prime gets called in - he's relatively vanilla but can handle situations that no one else seems to be able to deal with. In the responsive web world, this is when you want to use accordions and tabs. On large screens, it is common to have tabs-based interfaces to allow you to navigate between different content blocks or images, but on a small screen fitting both the tabs and the content all on screen is challenging. Designers have learned to switch their tabs for accordions on mobile to keep the hide/show controls directly adjacent to the content being shown, making it much easier to navigate on a small screen. This responsive 'accordion-tabs' pattern has been growing in popularity and is starting to show up in many different situations where you're trying to manage large amounts of content in a small space.
Responsive Components in Foundation 6.3
While navigation has been reasonably well handled in Foundation 6 via responsive menus and the off-canvas component, we have not had a built in responsive accordion/tabs solution, and we have not had a cards component. Until now. Foundation 6.3 (due to ship December 15, check out the release candidate here) will include BOTH a responsive accordion tabs component and a cards component.
The cards component, while very 'foundational', makes it easy to start building responsive cards within Foundation without having to spend a bunch of time building up the basic component structure.
The responsive accordion tabs component follows the model of our responsive menus, allowing you to use the exact same markup to generate an accordion at one screen size, shifting seamlessly into tabs at another. This will dramatically improve the ease of implementing this common design pattern. Optimus Prime has arrived. ;)
The Future of Responsive Components
There are a few technologies on the horizon that are going to dramatically shift our ability to build powerful responsive components. Currently we create components that are responsive based on screen size using media queries, but the coming of element queries will allow the creation of components that are responsive based on the space allotted to them rather than the full screen size. This alone will dramatically improve the ease with which we'll be able to integrate responsive components throughout the web.
Cards within design layouts have gained immense popularity over the last several years. Companies like Google, Facebook and Twitter who have millions of users that use their products every day have leveraged this popular UI component within their interfaces. Not surprising since, cards are a perfect response to the rise of responsive design. They're self contained units that can be moved, shuffled and mixed with different content types. They respond easily on different screen sizes, from single columns on mobile devices to multi-column on larger devices, and can move independently around the web.
At ZURB we've found cards to be a great solution within our client work and have been keeping close tabs on their use around the web. Google has written pretty in depth about their usage within their Material Design framework as well as some great content from teams like Intercom. From our 100+ card based projects the last couple years we have, however noticed some pitfalls when designing with them. Here we'll cover 5 of the most common mistakes we see designers make with card based UI:
1. Large visual gaps from different content lengths
In a perfect world, our content would be as neat and tidy (and consistent) as it is in our Sketch files, but real world content isn't perfectly uniform. Titles are longer, descriptions vary and (as much as Apple wishes) names aren't always 4 letters long. When cards are placed in a grid at larger screen sizes we can often see large gaps that interrupt flow. This isn't to say whitespace is frowned upon, but inconsistent whitespace can limit the density and make it difficult to scan cards.
There are three things we ask our designers to consider when this issue arises. First we look to see if the data makes sense when truncated. Will titles or descriptions still make sense when data is capped at a specific character count? Will the user be losing vital info? Secondly, we see if cards will make sense in a masonry layout. This works if content doesn't need to be tediously scanned, but instead when users can just peruse the content. Lastly, we see if we can shift content inside the card to make it work on one column on all device sizes. This allows cards to be as short or tall as needed and often allows us to keep information dense within the site.
2. Too many cards visible at once
It's always tempting to want to use the entire space of your screen, especially when building something like a dashboard or web app where users may appreciate seeing it all at a single glance. This, however, can become an issue with cards as too many cards within a grid, or on screen at any given moment can become overwhelming and can cause users to strain when scanning.
Much like text line length, we want to think about how much content a user can reasonably take in at any given moment and how far a user's eye can scan horizontally over the screen before it loses it's place. We suggest setting a max-width on your cards container to limit this content overload and while there's no magic number for how many cards across is too many, some basic user testing may help you discover this for your own use case.
3. Too many actions at various areas of the card
One of the most valuable things about cards is how well they work as bite sized chunks of content that are gateways to additional info or actions that users can take. This means that it's sometimes tempting to pack cards with tons of actions in every area of the card. A gear in the top left, or a trash can on the top right may seem like a good use of space, but turning every aspect of the card into a link can be be more confusing than helpful to your user.
This link overload is often at the behest of a client or project owner and it can sometimes be easier just to add the actions rather than fight the battle. We encourage our designers to think through what actions are necessary on any given level and to potentially group the actions by importance or type. This allows us to unify the few key actions to their easily found spot at the bottom of each card.
4. Overloading cards with content
Cards do a great job of breaking down large amounts of data into small digestible bits. They are especially fantastic for getting a quick snapshot of a project, a document, or a news story, but can sometimes tempt us to continue piling on content. Adding an Image, a button, a description, a chart, or a graph can seem like a helpful way to give users everything they're looking for, but more often it ends up overloading their ability to focus.
Outlining your primary content, secondary content and tertiary content is a great way to keep the card focused and allow users to take action to see more content. To do this we must know who is using our product and why they're coming to this page. We can then help rule out outliers and trim our card data to the minimum users need to see before they choose to take action and drill down.
5. Forcing a visual when one isn't needed
We've all seen pretty Dribbble shots with amazing photography, illustrations or icons in the header of a card. This makes the card feel visually striking and can split up some of the typographic content, but sometimes our cards' purpose doesn't have a visual that is part of the cards' primary reason for being. We leave a gray place holder in the wireframes and assume we'll figure out it's purpose when we start visual explorations.
When our designers add an image onto a card we often ask for the 'why'. Why does this need an image or an icon? Does this help the user better find content they're looking for, or will it simply become visual noise as users leave the default icon? This is usually a symptom of poor understanding of composition and needing an image or icon to balance out the cars, or separate the content. A great way to combat this is to do some typographic explorations and work with content order and hierarchy till the cards look balanced and clear.
Play Your Cards Right
Card design has been a welcomed force on the web and the ZURB team has been embracing them in our design work for years. We've explored them in websites and web apps in every industry from finance to biotech and have always found them to be a flexible part of a well oiled design. We've even noticed that In recent months as our designers have been coding within Foundation 6 that there has been an increase in projects with card components built from the ground up. While there's nothing wrong from coding a component from scratch, the team has taken the most solid use cases for cards and has added them into the forthcoming Foundation 6.3. This means cards will be even easier to use in your next project, but just make sure you're not falling into any of these pitfalls while using them.
We're testing out Cards in the Foundation 6.3 Release Candidate now with a full release coming December 15th!
Today Foundation turns five years old. What started out as an internal styleguide so our team could build websites faster and easier has transformed into powerful front-end framework that thousands of brands and millions of people use every day. But how did this happen? It wasn't luck. It wasn't being at the right place at the right time. It wasn't chance.
Looking back on the last five years, the reason Foundation has earned the trust and respect of the world's most brilliant designers, developers, brands and companies is simple. Foundation has never been afraid to take the lead, to go against the grain and to be the first. And in doing this, Foundation has pushed the web forward. It's influenced the way people and companies have thought about problems, and made it easier for more people around the world to experience everything the internet has to offer.
This innovation would have not have been possible if it weren't for the efforts of the 880 Foundation contributors, including the Yetinauts, who together with the ZURB team have put in over 12,360 commits and countless hours of their time to make the framework what it is today.
So as we celebrate five years, we'd like to highlight five ways Foundation changed everything:
1. It was the first open source framework to be responsive
Inspired by the work of Ethan Marcotte, Foundation was the first open source framework to be fully responsive. In a time when most people were developing for fixed pixel widths, Foundation's innovative grid system made it easy for designers and developers to dive into responsive web design and learn its concepts. Soon after, other frameworks followed our lead and went responsive as well, increasing the number of responsive sites being built each year. Now, responsive web design is the defacto standard for any brand, company or individual looking to build a site for the modern web. We're thrilled to have helped many designers and developers learn the concepts and best practices of responsive web design through Foundation.
2. It was the first to be semantic
One of the biggest steps forward for the web in the last five years has been the move towards semantic markup with HTML5, allowing for alignment between what people perceive in a web page and what software like a web crawler or text reader can identify. Adoption, however, was slow - especially because to take advantage of frameworks, one had to be using tons of structural and non-semantic css anyway. Foundation's semantic approach with Sass allowed developers to build truly semantic websites and applications while still taking advantage of all the power of a responsive web framework.
3. It was the first to be mobile-first
First coined by our good friend Luke W, Mobile First is an approach the focuses on progressive enhancement by starting with the smallest screens first. With, roughly, 80% of the screen size taken away when you start with mobile first design, you have to think deeply about how to utilize your space and ensure the core values you want to present to users is in the forefront without flooding with superfluous amounts of filler. Then, as you develop for larger screens and devices with more power, you progressively add features and enhance your site. Prior to this approach, developers focused on large screens first, and mobile screens as an afterthought, leading to poor and near unusable performance on devices with smaller screens and less processing power. Foundation helped popularize the mobile first approach and get designers and developers around thinking differently just in time as the mobile internet exploded in popularity.
4. It was the first to be constructed with Sass
The flexibility, power, and extensibility of SCSS are part of what have taken front-end web development from being a 'hack it together' project relegated to junior engineers and amateurs and turned it into a true engineering discipline. By rebuilding with Sass and exposing the build process to everyone, Foundation helped give designers and developers the power to truly make the framework their own, taking it from an immutable 'theme' to be plugged in and layered on top of and into a true customizable framework, ready to create any possible design.
5. It was the first to have accessibility built in
Foundation played a huge role in helping teach designers and developers learn the method sand best practices of responsive web design, and version 6 is doing the same for accessibility. We firmly believe that the web is for everyone, and so every component in Foundation for Sites 6 was rewritten from the ground up to meet accessibility standards and help educate users of Foundation how they could make their websites more a11y friendly. This is new territory for many web developers, and thousands are learning these best practices through using Foundation.
Help Build the Future
It's incredible to look back over the last five years and see the impact Foundation has had on the industry. It's even cooler to think about all the new 'firsts' Foundation will achieve as we continue to focus on the future.
Learn more about where Foundation's been, where it's going, and how you can get involved:
Foundation for Emails 2 modernized email design by taking some of the best practices of modern web development and bringing them to email. For web developers, it was a godsend, they could finally use the tools and workflows they were used to. But for many others, seeing things like Npm and Gulp is intimidating and doesn't help make email development any easier to tackle. We think everyone can and should be able to create responsive HTML emails, even if they don't have a strong web background. That's why we've built Slinky, a new way to build emails right in your browser.
Slinky makes it easy to code up a custom responsive email using just your web browser and our lightning-fast Inky Templating language. With CodePen's slick interface, all you have to do is write up your markup in either Inky or vanilla HTML and then inline. This code takes the Inky language and makes it into one slick HTML file you can import into any email service! No terminal commands, nothing to install, and no uploading. You'll be slinging beautiful, responsive, HTML emails in the cloud in no time.
Using the power of Foundation for Emails 2 and the Inky templating language, Slinky makes it easy to dive into the world of HTML email development. Check it out on the Playground page and sling some responsive emails!
Update: We released 2.2.1 shortly after this release to add in more Ruby scaffolding
We're stoked to announce that Foundation for Emails 2.2 - codename Bismarck, has been released into the wild! There's so much about this release to highlight so we'll focus on the biggest parts. We've got new implementations, juicy features, and time saving bug fixes. Since we launched Foundation for Emails 2.1, we've seen a huge jump in excitement and involvement on GitHub with contributions. We were going to release a 2.1.1 with bug fixes but instead we skipped ahead to 2.2 from 2.1 because there were so many great features jammed into this release!
The most important part of your email is not the code, it's crafting the right message that connects and engages people. The less you have to worry about coding your emails, the more you can focus on your messaging.
A Gem of a Workflow
The highlight of this release is the Ruby versions of Foundation for Emails and Inky. So many people have told us they love the concept of using Inky markup in their workflow but couldn't because they're in a Ruby environment. Well, now you can! Inky-rb and the Foundation for Emails gem now easily integrates into your Rails Asset Pipeline. Now you can use Foundation for Emails CSS along with clean Inky markup to build emails in your environment. Maybe it's just our bias, but we think combining Inky-rb with Premailer might just create the best email development environment for apps ever. ;)
New Features from the Sea of Contributors
There are tons of other great features in this release from over 30 contributors. Most of the features and fixes will help make emails less of pain, saving you from throwing your laptop across the room and flipping your table. There's too many to list here so here's some of our favorites:
- Get that visual treatment you're looking for by vertically aligning content in columns and source ordering columns. HTML attributes can now be passed to rows and columns thanks to Brandon Barringer - commit
- Create more controlled and compelling layouts across devices with different height spacers for the large and small breakpoints. Awesome update from Ethan May - commit
- Raise your open rates, click thrus and reduce spam complaints by including a preheader. This capability has been added to the default layout along with styles to visually hide it - commit and commit
- In case your audience opens your emails in browsers, Buttons and Menu Items can now get attributes thanks to Clement Paris - commit and commit
<hr>'s are notoriously hard to style in most versions of Outlooks. Now
<hr>'s can be styled across every email client thanks to Brandon Barringer - commit
- Hugo Giraudel and Rafal Proszowski simplified Sass code across 10 different files making it easier to read and contribute!
These are just a few of the awesome updates to 2.2 - check out the release notes to see more the of the changes!
From the conversations on Twitter, the Forum, and GitHub, it's obvious there's a ton of energy and excitement about where Foundations for Emails is going. We hope you see the potential here: how much it helps us spend less time coding the emails and more time on messaging and connecting with our audience. So go grab Foundation for Emails 2.2 and if you're in a Ruby environment, get the new gem. If you're working on something you're proud of or have any suggestions for Foundation for Emails, let us know in the comments below!
Foundation for Emails Meetup on July 14th
On July 14th, 2016 at 6:30PM, we're having people over our place to have some pizza, drinks and geek out about emails. We'll be sharing how to code up an email scaffold in just 10 minutes and talk a little about how you can use Foundation for Emails in your Rails asset pipeline. If you're in the area, come meet the team and be sure to bring your laptop!RSVP FOR THE FOUNDATION FOR EMAILS MEETUP
- Page 1 of 9
- Older Posts »