Popular design news of the week: December 5, 2016 – December 11, 2016

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Why We Moved from Adobe to Sketch


4 Top SEO Trends for 2017


A Lawyer Digs into Instagram’s Terms, with Horrifying Results


Site Design: Helloheco.com


How not to Design Web Forms


Top 10 UX Trends for 2016


Awesome Animation Inspiration 2016


Site Design: Rog.ie


20 JavaScript Tools to Blow your Mind


Wired’s Stunning Photo Site


How You Too Can Create Simple Illustrations for the Web


30 Fun Fonts that will Cheer up your Design


Limitations of HTML Email Design – Email Width and Size


What is Adaptive Design? (And is it Different from Responsive Design?)


Dribbble Gift Guide 2016


1Cables: Turn your Smartphone into a Computer


Natural UI will Shape the Future of Design in 2017


Patterninja – Create Patterns Online


The 2016 Annual Email Marketing Report


The State of UX in 2017




Pantone Unveils its Color of the Year


6 Big Visual Trends for 2017


The Brutal Truth About the Creative Process


Spotify Rounds Off 2016 with these Hilariously Personal Ads


Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Design Deck Playable Inspiration, a 52-Card Design Thinking Deck – only $19!


from Webdesigner Depot http://ift.tt/2grwcgQ

Comics of the week #369

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Designer skin 


Sleep designing




All in one

Can you relate to these situations? Please share your funny stories and comments below…

30 Sparkling Glitter Brushes from The Artifex Forge – only $7.50!


from Webdesigner Depot http://ift.tt/2hfvliZ

Affinity Photo 1.5 released, packed with new features and Windows support

In a definite shift towards platform parity, Affinity Photo has finally been relased for Windows, delivering everything that the hugely popular Mac software does.

The availability of a Windows version coincides with the release of version 1.5, which is a huge update packing the Photoshop rival with new features.

Here’s a rundown of the best new features:

Lens Profiles

1.5’s RAW engine now features profiles for thousands of lens-camera body combinations delivering auto lens correction.

Color Picking Tool

In response to user requests, there’s a new color picking tool outside of the color lab.

32-bit Editing Enabled

32-bit unbounded images can be composited and edited together with full Radiance HDR as well as OpenEXR file support.


Designers are able to record any number of operations, save them, and then play them back later on, just like Photoshop’s Actions panel.

Better Metadata Management

1.5 features a substantially upgraded detection of metadata for JPEG and RAW formats.

File Compatibility Changes

This version comes with significant improvements to PSD and PDF import and export.

Tone Mapping Persona

Users will enjoy dramatic results thanks to the full, tone-mapping workspace for LDR and HDR images with local contrast control. The new release features a complete workspace, where users are free to move between color spaces.

360 Image Editing

It’s now possible to both pan and zoom around 360 images. Designers can utilize Affinity Photo’s complete suite of tools to edit them live.

Equations Filter

Users now have the chance to create customized spatial fillers with limitless flexibility, all thanks to the equations filter.

Pixel Art Document Resizing

1.5 incorporates two, brand-new resampling algorithms. This ensures more precise resizing of pixel-based documents.

Pixel Tool Changes

After many requests, Affinity has added shift constrain and configurable CMD-drag behavior to this tool.

New Export Options

The export persona has been changed forever. Now, users can enjoy limitless flexibility to export multiple formats and resolutions for each slice.

OpenEXR Import/Export

All workflows will be supported with the multichannel OpenEXR Import/Export and options like alpha pre-multiplication.

Clone Sources Panel

Users have the ability to store an unlimited quantity of global sources for the clone brush; they can also work across multiple documents.

Text Style Support

The styles of text objects can be linked together now thanks to full text style support.

Marquee Selection Modes

Magnetic, polygonal, and freehand are the three new modes for the freehand selection tool.

Better RAW Processing

A more powerful RAW engine gets designers results more immediately while the presence of more than 70 new RAW camera formats makes for a better user experience.

More Than 1 Million Icons in the Iconshock Complete Icon Pack – only $37!


from Webdesigner Depot http://ift.tt/2h5dmLH

Christmas Goodies: Free Winter- And Holiday-Inspired Icon Sets



Christmas is just around the corner. And, well, what better way to celebrate than with some free goodies? We sifted through the web (and our archives) to find holiday-themed icon sets for you that’ll give your creative projects some holiday flair. Perfect for Christmas cards, gift tags, last-minute wrapping paper, or whatever else you can think of.

Christmas Goodies: Free Winter- And Holiday-Inspired Icon Sets

All icons can be downloaded for free, but please consult their licenses or contact the creators before using them in commercial projects. Reselling a bundle is never cool, though. Have a happy holiday season!

The post Christmas Goodies: Free Winter- And Holiday-Inspired Icon Sets appeared first on Smashing Magazine.

from Smashing Magazine http://ift.tt/2groEcx

Create the Perfect Hero Image Using Contrast

Want to make a great first impression? It starts with your website’s header. The image a user sees will leave an impression—good or bad—and determine whether that user clicks and continues, or leaves the site altogether.

That’s a tall order for a single image.

The key element to creating a hero image that will draw users in and keep them moving around the design is contrast. (Seriously! It all goes back to design theory 101.) A head that features contrasting elements in size, color and scale provides the right mix of visual interest and tells users how to interact with the design. Here are a few ways to maximize contrast on the path to creating a perfect hero image.

Crop Strategically

The hero image does not have to fill the “first” screen on devices. Don’t get caught in that trap.

Crop the image for impact based on the content therein. Consider the other elements that are important to users when they land on the page and make accommodations for those as well. Depending on this framework, that might mean the hero image is scaled to be larger or smaller than the browser window (let’s just consider more standard resolutions for sake of argument).

Before you balk at the idea, consider it for a moment.

  • A shallow image will help preview other content.
  • An unusually deep image will encourage users to scroll for more.
  • Any unusual shape will draw attention.

Consider Animation

You don’t have to create a full-fledge cinematographic experience to add moving imagery to the hero header. The smallest touches of movement create just enough contrast to grab the eye.

Subtle movements, such as the plane flying across the image for Bar Z Winery, provide that element of contrast without being overwhelming. It’s a simple alternative to some of the more flashy video headers that have become popular. The element of contrast is two-fold: The design is different that many of the others that users are exposed to and the subtle movement is delightful and rather unexpected.

On the other hand, you can go all in with animation or video for a hero image. Movement can be particularly engaging and is a popular option. Use it in the same ways you would a still image when it comes to adding effects such as typography and calls to action.

Think Bold Typography

Typography in the hero image should wow the user. It needs to be bold, impactful and memorable.

You can create this with both typeface selection and the words on the screen. (No Arial headers that say “Hello” here.)

The combination of lettering style and messaging needs to have direct impact and appeal on the user. You’ve heard that people have shorter attention spans than goldfish; it’s your job to catch them with beautiful lettering and language.

When it comes to bold type, the key elements of contrast are color and size.

  • The type needs to be a color that stands out from the background. Light on dark or dark on light are the best options when it comes to readability.
  • Bold is a digression from the norm. Consider over- or undersized typography on the hero header for impact.
  • Choose words with meaning. Unless it is key to your message, you don’t need a paragraph in the header. Opt for a few key words that entice users to learn more. (The number of words will impact how large or small lettering can be.)

Choose Color Carefully

A hero image might not be an image at all. It could be a color block or cool texture.

Choose a color carefully that portrays the exact meaning you intend. A bold color hero header can impress users, but the wrong color can be a turn off.

Bright, trendy options are a good alternative. The nice thing about this option is you can mix it up from time to time just by changing the background color. A big color background can also help reinforce brand identity—particularly if it has a strong color association—and lends itself to readability because of the simple nature of the design.

Color is also an important consideration when used with another image or video. From colored typography to colored user interface elements, it is important to make sure that color choices in the image match the rest of the design. Much of this goes back to color theory and an understanding of the color wheel so that the image and color choices work together in the design.

But what if the hero image and brand colors don’t mesh? Think creatively about how to use the parts in the hero image together. Try a color overlay on the photo; consider black and white for the image or text. Move high-color elements into a navigation bar that’s white or black to keep them off the actual image. When the image and the mandated colors don’t play well, the best option is to eliminate or separate the color.

Think About Light and Dark Spaces

Accounting for dark and light spaces in an image might be the most difficult task when adding elements to create contrast in a hero image. Particularly with responsive formats and breakpoints, the placement of text or buttons on an image can change and you can’t always find a great location.

What’s a designer to do?

  • Choose another image;
  • opt for a different type family, size or color;
  • add a color overlay;
  • make the best of it.

Each of the above is a viable option. The best option may vary by project.

The Society Inc.’s solution in the hero image slider—with plenty of variance between light and dark spaces – was to include a logo overlay with white text in a black shape. It does not detract from the images and is a lot less obtrusive than you might think from hearing the idea. The logo in the center also helps establish brand and visual identity.

Include a Distinct Call to Action

Don’t forget the CTA!

What do you want users to do after they look at your cool hero image? Tell them.

The call to action should be clear, whether it is to fill out a form, scroll for more content or to click a link to another page. It should include enough definition and contrast so that it is easily seen against the image background. (What’s the point in a CTA if no one sees it?)

Color and size are of particular importance here. The color of the button (a common CTA cue) should stand out from the rest of the image. The words telling users what to do need to be exceptionally readable, simple and clear.


Contrast is one of the key techniques for any good design. It creates separation between elements and helps guide users toward the desired action.

Take special care to create enough contrast when designing a hero image so that users know exactly what actions to take on the page. Peek at your metrics and if those conversions aren’t happening, rethink the amount of contrast in the design. It might be time to amp it up even more.

Dazzle Scene Creator: 1500+ Mockup Positions, 30+ Ready-Made Scenes & more – only $24!


from Webdesigner Depot http://ift.tt/2gamHh4

Giveaway: Win 1 of 3 Template Monster themes

Themes are a great way to speed up a website launch. They make for a fantastic minimum viable product when you need to get going, and fast. Put a little work into them, and you might never need a custom design. Great themes can get expensive, though.

Well put your wallets away, dear readers, because it’s time for free stuff! For a limited time only, TemplateMonster.com is teaming up with us to give away three of their flagship templates and themes of 2016.

What can you win?

You can win your choice of themes for WordPress, Joomla, Magento PrestaShop, Moto CMS 3, or even static HTML5. There’s a little something for everyone, just take a look at your options:

Monstroid WordPress theme

Monstroid is a multipurpose responsive WordPress theme aimed both at the experienced developers and DIY guys. It is an all-inclusive toolkit for all your web design and development needs. Monstroid comes with 50 Child themes created specifically for the most popular business niches. All pages of every Monstroid theme can be edited (the pack includes 100+ layered PSD files) in Photoshop.

Details | Demo

Video preview:

Jumerix: a multipurpose Joomla template

Jumerix is a multipurpose responsive Joomla template suitable for your blogs, portfolios, business and personal sites as well as eCommerce projects (due to the VirtueMart integration).

Details | Demo

Video preview:

Intense: Multipurpose HTML5 template

Intense lives up to its name by packing in everything you might need to get your site started. Like what, you ask?

  • 250+ HTML Files, 10 home Layouts and demos, 13 header & 4 footer styles
  • 10+ eCommerce shop templates, 30+ blog Templates, 20+ Portfolio Templates
  • 60+ Reusable Elements,
  • Event Templates + Calendars, Various Sidebar & Footer Widgets

The full list is much, much longer, so… you get the idea.

Details | Demo

Video preview:

Vini Magento theme

Vini is an incredibly powerful Magento theme created for clothes and fashion stores. The theme is totally optimized for modern eCommerce: it’s fast, trendy, and intuitive.

Details | Demo

Video preview:

Styler PrestaShop theme

Styler is a PrestaShop theme developed for fashion and clothing stores. It is responsive, so your customers will be able to do the shopping from any modern device they prefer. The theme is Multilingual, which will help you expand your product market and increase conversions accordingly.

Details | Demo

Video preview:

Spectrum Business Moto CMS 3 Template

And last, but not least, is Spectrum. It’s an all-in-one solution for your business. This responsive template is designed to get you up and running with Moto CMS 3 as fast as possible. You don’t need to spend your precious time optimizing your website. Everything has been already done for you.

Details | Demo

Video preview:

How to enter

To enter this awesome competition, all you need to do is leave a comment below, telling us: which template you want to win, and what you like best about it.

You must add your email address to the comment, or use a Disqus account registered with your email address—if we can’t contact you, you can’t win. (Your email address will only be used to notify you if you’re a winner, it won’t be passed on to anyone.)

Entries are open from Tuesday 6th December 2016, until midnight on Tuesday the 13th December 2016. Three winners will be chosen at random.

Good luck!


[– This is a sponsored giveaway on behalf of Template Monster –]

OhMy! Designer’s Toolkit: Easily Build Creative Scenes in Photoshop – only $14!


from Webdesigner Depot http://ift.tt/2gg84Mo

The Big Interview: Kevin Ball and Rafi Benkual talk all things ZURB

This month we got the opportunity to interview Kevin Ball and Rafi Benkual from ZURB. We got to talk about the future of the web, the state of web design today, and of course, about Foundation.

WebdesignerDepot: Hello Ladies and Gentlemen, I am Ezequiel Bruni for Web Designer Depot, and today we are talking to these two lovely people from ZURB, would you mind sharing your names with the audience?

Kevin Ball: Hi, I’m Kevin. I also go by KBall here at ZURB, and this is…

Rafi Benkual: I’m Rafi, and I’m Foundation Advocate here at ZURB.

KB: Oh yeah, I should say what I do. I’m the Foundation Lead.

WDD: Ok, Foundation Lead, what is it exactly that you do? You decide the direction for Foundation, or…?

KB: Ah, yeah, there’s a number of different pieces there. I’m less of a dictator, and more of a facilitator and a synthesizer. I spend a lot of time in conversations—both in person and online—just trying to get a sense of where people are struggling with Foundation, where the web is going, where responsive design is going, and trying to make sure we’re out ahead of that curve.

WDD: Ok, and Rafi, what do you do as… Foundation Advocate, was it?

RB: Yeah, that’s a hard one to describe, so there’s a lot of community advocacy, growing the community, marketing sales. And then also coding on both client projects, internal projects, and obviously everything with Foundation, and also working with the community to fix bugs, and make new features for Foundation.

WDD: How did you guys get your start in web design and development, and all of this?

KB: Uhh, sure, you want to go first, Rafi?

RB: You go first.

KB: Well, I’m longer. So I’m kind of an old-school guy, so I started in back-end hardware and low-level software, compilers, device drivers, and stuff like that. And then coming into 2008-2009 I was at a career transition, I founded a startup called Causes, which was doing social advocacy, non-profit work, and that sort of stuff online.

KB: Those of you who were paying attention to the web then may remember that Causes was the largest non-game application on Facebook, back when Facebook first launched applications. And so we were trying to ride that Facebook boom at a time when everybody was getting excited, so we were seeing hundreds of thousands of new sign-ups a day, riding the brand new open Facebook platform.

So that was my intro to the web, it was: “Welcome aboard, we’ve got an application. We’ve got a million people using it today.” And six months later, it was 15 million people, and by the time I left, it was over a hundred million people using the thing. So kind of riding that wave, and learning all about scaling large applications and how to do that.

It was kind of funny, ’cause I got a job at a web company, and in my interview, they had me do a bunch of data analysis, and I said, “Great, I’ve got it, how do you want it output?” And they said. “Well, just put it in a list. An HTML list.”, and I’m kinda like “Ok, what’s that?”, right? ’Cause I was coming from this back-end deep-in-the-weeds thing, and they’re like, “Oh, ok, here’s the markup. Start going.”

KB: It turns out that when you’ve been doing deep coding and C and all of that, HTML is not so bad.

WDD: And Rafi, how’d you get started?

RB: Well actually, I came from a sales and marketing background, and from online retail and things like that, and I was actually friends with some people that worked at ZURB, and I would come around the office, helping out a lot.

And the boss kind of told us that he was looking to grow Foundation, and looking for somebody dedicated to the Foundation community. But I had never touched HTML and CSS before in my life, ’til like three years ago, so I had to learn Foundation in about a month, and then take a test and pass that to get hired on at ZURB.

That’s kind of where I started, I did it, and I did really well, and just immediately got thrown into the mix of fixing bugs in GitHub, which is crazy.

WDD: I have to say, you guys are a little lucky to have had actual training. I was self-taught and the only reason I kept going was because I didn’t know I sucked.

KB: Oh yeah, I know, I learned in-industry. I studied physics in school. I think, actually, if you look at ZURBians who code, we’re probably 80% self-taught in one form or another.

WDD: So that’s really cool. You’ve already addressed how you guys came to work at ZURB, and that’s interesting. How did you guys get assigned to Foundation specifically? Were you put directly on this project when you started, or were you doing other things first or…

KB: Rafi came straight into Foundation. I came in as an engineering lead at ZURB and sort of started gradually absorbing more and more projects, and kind of leading different ones. It got to a point where one of our previous Foundation leads left to move on to something else, and I was looking at all of these projects, saying, “Well these are all well and good, but what really gets me pumped, and really gets me excited is working on Foundation and interacting with its community.”

So I talked to the folks at ZURB, talked to the boss-man talked to everyone, I was like, “I’m doing all of these things, but really what I want to be doing is Foundation.” They kind of looked at me and said, “Great! Go!, Do!”

WDD: Ok, Kevin, when did you first realize that Foundation was going to be such a big deal, when did you first kinda get the sense that?

KB: So by the time that I got into Foundation—I mentioned that I got into the web, what is it, eight years ago now?—but I’ve been at ZURB just a year. So by the time I really got into Foundation, it was already a pretty big deal. To me, I think broadly, frameworks—Foundation and Bootstrap—kind of were… discovering them was huge for me. Because back when when I started doing web stuff even have a grid system, like 960, was a huge innovation. And then all of a su…

Ezequiel [interrupting rather rudely, he’s very sorry]: I know!

KB: More than just a basic grid, something that you can adjust, something that’s responsive, like, my goodness this is incredible. So coming from a development background, moving gradually more to the front end, having that type of resource, I could see that was huge even before it got huge.

RB: Foundation was, by the time I started three years ago, already huge in the web development world. If you do web development, you probably knew of Foundation and Bootstrap, and then there weren’t really too many other frameworks out there at the time. Maybe Semantic was brand new, but that’s not really a full framework, so there wasn’t too much out there. So Foundation was already huge.

What happened was, as I started work on Foundation, I started realizing how many different brands and websites are built on Foundation, and that was really eye-opening to me. So every day we’re discovering brand new companies that have been using Foundation for a few years, and it’s just amazing to see. Check out our brands page and you can see all of the hundreds of huge brands that are on there, and there’s probably thousands more that we don’t even know about.

KB: Yeah it still trips me out sometimes, play a little bit on what Rafi’s saying, like you get down to the weeds, and you’re just doing the work, right, and then you step back…

Like, I’m a big sports fan… NBA.com recently did a re-launch. Their whole new site is built on Foundation. And of course I go and look at the site, and I’m like “Oh, there’s a bug, and there’s a bug…”, and I’m still down in the weeds. Then I step back and I’m like, “What am I talking about? This is my favorite sports league, and they’re built on the product that I worked on. This is incredible!”

WDD: [Laughs] That’s got to be an incredible feeling. Meanwhile, I have developed to tell when any website is built on Bootstrap. It’s not a super power I wanted when I was a child, but that’s what I have.

KB: It runs out it doesn’t require a huge super power, given the the approach that they’ve chosen to take. You know, this is one of the things that we talked about a lot with Foundation. Obviously, Bootstrap has a bigger audience at this time, and one of the reasons they have that is that they have such a strong visual opinion out of the box, which means that somebody who has no idea what they want something to look like… they can plug it in and it’ll look decent. It will look like Bootstrap, but it’ll look decent.

WDD: That’s true. That sort of out-of-the-box functionality is actually a huge part of the web today. Templates and themes are not going anywhere. Frameworks are not going anywhere, people will always need an easier way to just get something done, and faster… which is why Foundation and other frameworks are going to be such a huge part of the web moving forward.

How do you see Foundation moving forward?

KB: That’s a great question, and it’s something I spend a lot of my time thinking about. I can give you a short-term, a medium-term, and a long term answer to that. I think. In the short term, one of the places that we see that we have to get better, is in the pre-existing theming.

Foundation’s core is being extremely customizable, being just that: a Foundation that you can build on top of so that not every Foundation site looks alike. However, there’s a huge audience of people who need something that is a little bit more strongly-opinionated to start from.

And while that is possible right now, that is not as easy in Foundation as it should be, and so that’s a huge focus of ours over the next… I would say three-to-six months. Making it a lot easier for folks who are coming from a design background to create something that then folks who have no design background can just drop in and use all over the place.

WDD: Alright, so, child themes, essentially.

KB: Essentially, yeah. There’re a couple of different variations that we’re looking at for ways to do this. Because one of the things that is, as I said, kind of core to Foundation is this idea that it’s never, we’re always going to put the design audience first.

ZURB is a design company, and that’s where we’re coming from, so however we end up implementing it, it cannot sacrifice that ability to implement your visual identity, your vision. But, we believe that we can make it a lot easier to sort of just drop things in and put stuff in place when you want to.

So that’s one area. Another huge area that we are looking at for medium-to-long-term is really trying to continue to push forward this idea of responsiveness. Foundation has always kinda been on the front edge of that, we were the first framework to go mobile-first, we put a whole bunch of different mobile things in there, and we’re starting to see this basic idea of responsiveness has won.

Like, everybody’s building responsive websites now, but they’re kind of going, many of them are going stale. Like, there’s a few patterns that people figured out, like there’s a hamburger icon, and the off-canvas menu, and all this stuff, and everybody’s stuck with this thing. “Ok, I’m gonna stack the content on mobile, and do this, that, and the other.”

But we think that, especially as mobile devices are becoming more powerful, becoming more prolific, there’s a whole range of possibility out there that is just barely getting played with right now. A responsive website right now often looks like something that is amazing on desktop and it works okay on mobile, or it’s amazing on mobile and works okay on desktop.

And we think that that’s unnecessary. You should be able to have something that is amazing on mobile, amazing on tablet, is amazing if you put the thing up on a TV, is amazing if you’re interacting with it via a screen-reader, so that all of these different things are not just kind of accounted-for, but actually optimized-for, if that makes sense.

WDD: That does make sense. Actually I was thinking about this as you were talking, because I’ve noticed that a lot of sites have adopted the mobile-first mentality, focusing way more on mobile than on larger screen sizes. Now, that’s fair because mobile is huge, mobile everywhere, everybody’s got a mobile phone whether or not they have a desktop or a laptop. They have mobile phones in places where they wouldn’t even have the power for a desktop.

However, screens in more developed places are also getting bigger, and of course more dense, as far as pixels go, and besides that, we’re getting 4K TVs, 4K monitors, the prices are very slowly going down, and what I’ve noticed is that a lot of web designers do not account for the larger screen sizes. These screens that are getting absolutely massive. And you don’t have the option to just maker the window smaller on TV, like a smart TV, or with an Xbox…

I’m a little bit curious, because everybody wants to customize for mobile, and that’s good, but what are you guys going to do in terms of helping your users optimize for the super big screens?

KB: This is something that the world broadly is grappling with, and this where I say that my role is not as a dictator, but rather as a synthesizer. So a couple of our designers were recently on a project that was focusing on big screens. It turns out that some of the things that we already have in Foundation enable you to do things like that, because you can customize your set of break points, you can add an extra, extra large break point. You can do a bunch of stuff for that already.

But people don’t really realize that, they aren’t aware of those options, so a lot of what we want to do there is simply publish best practices for targeting those things. The framework, conceptually works there. Folks are often taking the break points they get out of the box, and not thinking, “Ok, wait, does this actually apply to my entire audience? What are these folks working on?.”

Something that we see the need for, and are working on actively is just better education about what is there and how you use it.

RB: Inside the framework, there are, as you mentioned, mixins. We already have an extra large break point, and you can add more. And then there’s also media queries for pixel ratio and other things like that. I think what we need is… yeah, more best practices, more education on how to handle those situations.

KB: Some additional stuff we’ve got in the pipeline, in fact something I was playing with right up until this call, is something that helps across all the screen sizes: going to more vector graphics, and being able to do more things with vectors.

WDD: SVG. We’re all waiting for “The Year of the SVG”.

KB: “The Year of the SVG”, we have some fun stuff in the pipe to try to make that happen, so I think people don’t always realize how powerful SVG is. If you inline those things, then suddenly you can style them with CSS, you can manipulate them with JavaScript, plus they look beautiful on all screen sizes out of the box. So this idea of responsive imagery is something that we’re really excited about. Stuff that perhaps is not only responsive in that it scales with pixel density, and scales with size, but is also perhaps changing the features that are visible within an image based on screen size.

There’s all sorts of interesting possibilities there. I think what’s lacking right now is not the capability of SVGs, but the tooling. So that’s one thing that we at ZURB can really help push forward: tooling to make that easy.

I could go into more details, but, we’re going to be doing that soon.

WDD: I’m sorry, I just realized that I have literally never thought about the possibility that with an inline SVG image, you could literally drop objects from the image based on screen size. That’s actually kind of huge.

KB: It’s amazing, it’s incredible, and nobody’s doing it. They don’t think about it, because these things are sort of locked away in, “Oh, it’s an asset I’m going to load.” But no, these things are documents. You could do whatever the heck you want.

WDD: They’re documents as dynamic, and changeable, and malleable as HTML itself. That’s an important thing to remember. Second-to-last question in this section is: what is your favorite part about the framework as it is now? Are there any specific components that you think of your favorite, or maybe you worked on it so it’s your baby?

KB: I recently fell in love with responsive menus, and I mentioned that I haven’t been on the project that long. This is a pretty extensive codebase. I’ve been working on the project six/eight months, so I keep discovering new things. Responsive Menus are really powerful.

The core concept is that the type of menu you might use to do your navigation varies a lot by device. So for example, the pattern of a drop-down menu, which is something that’s been in frameworks like Bootstrap and Foundation for a long time, is extremely powerful on desktop and often almost unusable on mobile, especially if you’ve got nested layers to it. However, there are some menus that work perfectly on mobile, for example a drill-down menu. iOS popularized this. They gave us this idea of a drill-down menu where you tap on something and it slides over [to] the sub-menu, you drill down to the place you need to go.

Foundation supports both of those, and the way that it does it is actually using exactly the same markup, but with slightly different data-attributes for the JavaScript. What that enables is a responsive menu that behaves as a drop down when you’re at one break point, and shifts over to a drill-down when you’re at another break point. So you have the exact same markup, you tell it, “Hey, this is responsive”, to drill-down on small [screens], to drop-down on large [screens], and it just works.

WDD: I’d absolutely love to see more of that, because honestly, for example, drop-down menus where you choose your country or region are unusable on the desktop, much more so on mobile. Any drop-down with two-hundred or more entries is just ridiculous.

KB: Yes, one-hundred percent.

WDD: Those should be drill-down by default. But anyway, how about you, Rafi? Is there anything you like?

RB: Yeah, in recent projects, we just did a meetup on the Flexbox grid, and I’m really in love with the Flexbox grid. Just Flexbox in general… if you start to learn some of the properties, they’re not that hard to learn, and they’re really powerful, and really improve over a standard float grid. So if your project can allow it I would definitely—IE10 and up is the restriction—so, if your project allows it, I would definitely check out the Flexbox grid. Right now, it’s my favorite thing.

WDD: Ok, and the last question in this section is, well it’s not a question… I miss Orbit, guys. I do. I realize that sliders and carousels are not the best UX, but sometimes you just need one or the client asks for one, and I miss Orbit.

KB: Did you know it’s in six?

RB: They brought it back.

WDD: They put it back?

KB: It’s back in Foundation 6.

WDD: I actually did not… Wow, I have been out of the loop.

KB: So, the back story on that, in Foundation 5, we got to a point with Orbit where it was becoming a little too feature-heavy, and very hard to maintain as an open source project. We were trying to do too many things. It was trying to be everything. So when we re-vamped it for Foundation 6, we decided we wanted a simple feature-set, all of the markup on the page on load, instead of having JS dynamically add that stuff. And as something simple for prototyping or even a simple carousel for production, it works great.

If you’re looking for something a little bit more feature-rich, like being able to change how many slides per break point, or how many slides it moves over at once, maybe you wanna have like three on a page and then move one over each time, there’s other carousels out there for that that we’ve used in our projects. Like Owl, or Slick Carousel.

RB: So it went back to being more of a “Foundational” component, not trying to do everything, everywhere, but being something that focuses on getting the basics right, and letting you customize it into something much more. That’s a philosophy that Foundation has tried to do all the way, but occasionally lost its way on.

It’s something that we’ve definitely refocused on: making sure that things that we’re providing are not trying to do everything. They’re foundational, and they’re extensible. We make them such that you can interact with them, you can extend them, you can do all those things, but they’re not necessarily doing everything you want out of the box.

And one of the pieces that we sort of talked about, in being able to drop in themes, or child themes, or something like that… another piece of that is being able to drop in this concept of building blocks. Somebody who’s taken a bunch of pieces and wired them together and added a bunch of behavior on top, and making those easier to plug and play with.

WDD: Oh, so like modules, or plugins, like jQuery plugins but for… okay wow that could actually be pretty huge. Especially if people check them for compatibility and being able to easily drop them in. One thing I have had trouble with in the past was combining resources from various places. People sometimes use similar variable names and that screws everything up. Or the CSS is just incompatible because… reasons, because browsers.

KB: This is a real problem, and that’s why I think looking at the package managers that are out there… they’re not really designed for shipping markup and CSS very well.

WDD: They are not.

KB: So this isn’t a fully-solved problem. We’re looking at different ways that we can do it, but one of the things that we’re thinking about is making sure that you’re using and leveraging the same basic SASS variables of the rest of the framework such that if you’re dropping something in, it takes on your theme or your styles immediately.

WDD: Well that sounds like a great idea. I’ve always been impressed by package managers, but to be perfectly honest, if you come up with a solution that allows me to just drag files from a .zip file to my project folder, and it just works, that’ll do for me. I’m still a very manual kind of guy when it comes to my HTML and CSS. I don’t use a lot of package managers.

I realize they’re the future, yes, but I build smaller stuff, and that was another thing I was say about Orbit: I don’t need something full of too many features, most of the time, when I needed a carousel, I just needed to move images from right to left. That’s all I needed.

KB: Try it out in Foundation 6, it’s there. If something doesn’t work how you want, file a bug, and we’ll see about fixing it.

RB: There is a cool improvement on Orbit. It’s hooked in with Motion UI, so you can actually change the animations right in the HTML. So if you want a fade, or you want a slide, or you want to slip it out, or spin it in, or whatever crazy animations… it’s all hooked in there.

WDD: That’s definitely cool. Lastly, not least, and just for fun: how is your relationship with the framework that shall not be named?

KB: Little-known fact: the inventors of Bootstrap actually used to work at ZURB.

WDD: Really?!

KB: Yeah. Mark Otto was a designer here, I believe. So the thing that may not be known is that Foundation and Bootstrap actually come from the same genesis. These are both frameworks that were inspired by what ZURB was doing for our clientele. We were building out these HTML and CSS style guides, and we wanted to systematize that a little, so the first open source version of Foundation was version 2. Version 1 was internal.

So Bootstrap and Foundation come from the same roots. They obviously have chosen different paths in terms of what they optimize for, and Bootstrap has been wildly successful with the developer audience. Foundation was, and continues to be more popular with the designer audience, because it doesn’t exert that heavy visual opinion on there.

WDD: That makes sense.

KB: To play a little bit more, obviously there’s a friendly rivalry going on.

WDD: Naturally.

KB: And I think we need to be talking to different folks. I talk to a lot of different people about Foundation, obviously, and the message we seem to get, particularly from more senior folks is that, “I like Foundation better, it’s more powerful. We’re using Bootstrap anyway, because all of my junior devs know it.” That’s compelling. It tells us what we need to be working on, right? One of the biggest things that we need to be working on is we’re winning the functionality battle, we’re winning the feature battle, we need to win the onboarding battle.

We need to improve our ability to… for people to pick this up and play with it out of the box. ’Cause if all the senior folks like it better, and all the designers like it better… yes we obviously have to keep pushing forward, we mentioned there’s places like SVG, we can support making 2017 the year of the SVG, Foundation can help make that happen.

There are other pieces, CSS grid, there are other technologies that we can play the role we’ve always played of helping push the web forward. But we also need to be focused on how we can support the newbie audience which is huge. How do we bring people up, and help them learn?

The world and the web work better with competitors. The browser wars were stagnant until Google came along with Chrome and we saw incredible innovation. I think we need to keep looking at Bootstrap, Bootstrap should keep looking at us…

RB: They are.

KB: They are, we know that they are, and we’re looking at them, and I think that we can each take the best ideas coming from each other, and keep pushing the web forward.

WDD: Ok just make sure you steal Tyler Tate before they do. I don’t know if you’re familiar with his work. He did the 1KB CSS grid back in the day, in the days of 960.gs, he also did semantic.gs. It was one of my favorite LESS-based grid frameworks, well… more like grid generator, for a long time. Seriously, steal that guy.

KB: Ok, let me find him. Oh yeah, he’s local.

RB: That’s awesome.

KB: Tyler, if you’re watching this, let’s do coffee. I see that you’re into coffee, from your website. Design, code, coffee. Let’s do coffee, my treat.

WDD: Ok, seriously, Ladies and Gentlemen this episode is brought to you by caffeine, lots and lots of caffeine. Pick your brand, because no one’s paying me for this yet. So, on to the last couple of fun questions: Do you guys have a Twitter logo on a dart board somewhere in the office, and if not, why not?

[Some slightly uncomfortable laughing from them. More genuine laughter from me.]

KB: I’m actually a huge Twitter fan.

WDD: Ah darn it. I’m just joking around. And have you at least had a Nerf war with the Bootstrap dev team. Again, if not, why not? Get on this. You need to video this.

RB: I think that’s a great idea.

KB: That might be fun. Maybe paintball.

RB: We’ve got some dead ringers over here.

WDD: Ok, can we make this official? Would you like to call out the Bootstrap dev team? Challenge them to a paintball war?

KB: Paintball war, Bootstrap dev team. Mark, we’ve got your number.

RB: We have a lot more people, I dunno…

WDD: Thank you both for your time, and I’m very glad to have been able to talk to you, like this. Anything else you’d like to say to our readers/listeners before we go?

KB: There’s a lot of amazing stuff happening in Foundation. Version 6.3 is coming out in just a couple of weeks, and it’s gonna innovate more on Foundation and responsiveness, so definitely check that out. I’d say if you want to keep up to date with everything, check out http://ift.tt/2gYMfCe, and you can get on our mailing list.

RB: The other thing I want to call out is don’t hesitate to get involved. We have all sorts of different issues at different levels of difficulty. It feels like a big thing to touch the framework, but if you want to start getting involved as a contributor, come check it out. Ping one of us, ask, “Hey what’s something that I can work on?”

We’ll point you in the right direction, we’ll point you at where the file is that you might want to modify. We’ll get you started and going. This is a community project. We’re extremely proud of the fact that we have over eight hundred contributors in the history of the project, and we want to see you involved.

WDD: Alright, well thank you very much, and see you all around.

KB & RB: Thanks!

WDD: This is Ezequiel Bruni for Web Designer Depot signing off.

Bundle: 200+ Highly Customizable Infographics – only $18!


from Webdesigner Depot http://ift.tt/2gYQg9S