What a CSS Code Review Might Look Like

Go to Source

Many programming languages go through a code review before deployment. Whether it’s a quick once-over, in-depth peer review, or complete unit testing, code reviews help us release code into the wild with confidence.

I started to imagine what a CSS code review might look like. CSS can be written in a number of ways, and the best way is often subjective to the project. I’m definitely not trying to get dogmatic with a post like this, but instead lay the foundation for what could be a starting point for getting the most out of CSS before it is released.

Why should CSS be reviewed at all?

It’s fair to wonder why we would want to review CSS in the first place. A review is yet another step that adds time and cost and effort and all that other stuff that seems to hold us up from shipping a product.

At the same time, a code review allows us to step back, take off our battle gear, and give our work an honest assessment—or hand it off to someone else for a fresh perspective. This is what separates us from the machines and, in the end, can save us the headache of having to deal with bug and performance fixes that could have been caught before they were shipped.

There’s much more benefit here than just preemptively squashing bugs. I find that splitting a review into specific areas focused on these benefits helps frame the conversation and prioritize those positive outcomes. The benefits for you may be different from what I’ll cover here, but these are ones I find myself coming back to time and again.

Area 0: It does the job

Let’s not dwell on this, but not forget it either. The first job of CSS is to style the page so it looks like it’s intended to. It matches the designers mockup or fits the style guide or whatever it’s supposed to do. And it can do so with variable content (titles and content of various lengths, images of various sizes, etc.) If it doesn’t, that needs to be fixed first.

If the design is responsive, make sure the design does what it’s supposed to do fluidly and at each breakpoint.

Area 1: Style and Consistency

The goal here is to ensure that CSS is well-written, organized, and documented. Those of us who have inherited projects from other developers know the benefits here. Code that uses a consistent naming convention and includes thorough documentation is easier to dive into and provides instruction for how to maintain and enhance the code in the future.

Questions to ask:

  • Is there a CSS style guide available for this project? If so, does the code follow it?
  • Is the code thoroughly documented? Are there confusing elements, properties, or hacks that would prevent another developer from knowing why something was written the way it was?
  • Are there any blatant inconsistencies in how elements are named or how their properties are organized?

Available resources:

  • CSS Lint: An excellent tool to find mistakes or inconsistencies. It’s even available as Grunt and Gulp tasks that can be configured to check against your own set of rules.
  • CSS Style Guides: A roundup of style guide examples that can be used as inspiration for creating your own.
  • What makes for good docs?: Dave DeSandro with the down low on how documentation is related to marketing.

Area 2: Browser Compatibility

Once CSS is organized and consistent, I tend to turn my attention to how it looks on different browsers and devices. Well-written code is one thing, but it isn’t worth much if it doesn’t work where and when it should.

Questions to ask:

  • Which browsers and devices does this project support? Do we have access to them for testing?
  • Are there analytics for this site? If so, do they give us insight into what browsers are more important to be testing for?
  • Are there any instances of “hacks” aimed at a specific browser or device? If so, is there another way around them? Are they well-documented?

Available resources:

  • Can I Use: A central repository for referencing which CSS properties are compatible with any browser and version.
  • Ghostlab: An app for synchronized browser testing across multiple devices.
  • OpenDeviceLab.com: An interactive map to locate nearby device labs for testing.
  • Establishing an Open Device Lab: Smashing Magazine does a deep dive on the the benefits of device labs and tips for how to set one up.
  • Support vs. Optimization: Brad Frost does a fine job of covering the difference between the two and how that can affect the way code is written.
  • Cross browser testing services: Cross Browser Testing or Browserstack.

Area 3: Specificity

Now is the time to gauge just how specific the elements in the code are and identify whether there are opportunities to refactor. This creates a responsible cascade of styles where elements are either as modular or as specific as we want them to be.

Questions to ask:

  • Are IDs used anywhere? If so, will a class name work instead? Does the style guide have anything to say about this?
  • Does !important make its way into the code? If so, why was it used and can the code be refactored to avoid using it?
  • Do we rely on prefixing and, if so, are prefixes organized in such a way that there are proper defaults in place for unsupported browsers?
  • How modular are the elements? Do they hold up in a “Kitchen Sink” test, where they are all used together in the same HTML document?

Available resources:

Area 4: Preprocessor Utilization

Ignore this if the project isn’t using a preprocessor. But if it is, there are certainly some extra things to think about.

Questions to ask:

  • Are existing variables being used where they should be? Have new variables been introduced? If so, do they make sense and are they documented?
  • Were other abstractions (e.g. extends, mixins, loops, maps, etc) used effectively and in adherence with how the rest of the code is doing things?
  • Is the new CSS placed into the correct partials? Were new partials used? Do they make sense architecturally?
  • Are they following any established preprocessor-specific style guides?

Available resources:

Area 5: Performance

I include performance toward the end of a review not to belittle it, but to make sure it is the cherry on top of our review sundae. Performant CSS is often about refinement and how it is packaged and served, so it seems appropriate for it to cap off the review process—even if performance is always in the back of our minds as we work.

Questions to ask:

  • How much does the final CSS file weigh? Are we planning to minify and gzip it (yes, please!) and what is the weight difference when we do?
  • How many different stylesheets are we loading (via <link> or native @import)? Can we reduce that number? Can they be served conditionally? Async?
  • We’re caching CSS in production, right?

Available resources:

  • CSS Stats: Pop in the URL of a site and get a slew of stats returned, including a report of all the fonts and colors that were used.
  • CSS Dig: Very similar to CSS Stats, but packaged as a convenient Chrome browser extension.
  • unCSS: A task-runner that removes unused CSS by comparing it to the HTML and JavaScript markup. Available for Grunt, Gulp, and Broccoli.
  • Critical CSS: Another task-runner, but one that creates individual CSS files based on the HTML markup for a given page. This optimization is consistently recommended by Google PageSpeed Insights.
  • loadCSS: A function for loading CSS asynchronously

Wrapping up

I definitely wouldn’t say that every question and tool mentioned here is needed or even relevant for all projects. In fact, there are likely more questions and tools to consider. Are there questions you routinely ask before releasing CSS? For example, where would accessibility fit in for you? Please share!

Also, remember that the goal of auditing our code is not to make it perfect. We make compromises in CSS for many reasons (whether intentional or not) and, at the end of the day, just trying to do a good job is more than enough and this is part of that effort.

What a CSS Code Review Might Look Like is a post from CSS-Tricks

Go to Source

Remove Easy Digital Downloads sales summary widget

Go to source

From: wpsnipp.com
By: Kevin Chard

Not everyone is a big fan of wordpress dashboard widgets and although I really like the Easy Digital Downloads sales summary widget, others may not. Pippin Williamson has provided and easy way for you to remove the EDD sales summary widget. Just add this single line of code to the functions.php of your wordpress theme or run as a separate plugin to remove the widget.

link: Remove Easy Digital Downloads sales summary widget

Remove Easy Digital Downloads sales summary widget is a post from: wpsnipp.comWordPress Snippets, Code, Hacks, 615+ for your wordpress theme or blog.

Replace Easy Digital Downloads Menu Icon

Go to source

From: wpsnipp.com
By: Kevin Chard

If you want to replace the standard menu icon in Easy Digital Downloads with an icon from Dashicons. Just add the following snippet to the functions.php of your wordpress theme. Don’t forget to checkout the Dashicon options available.

link: Replace Easy Digital Downloads Menu Icon

Replace Easy Digital Downloads Menu Icon is a post from: wpsnipp.comWordPress Snippets, Code, Hacks, 615+ for your wordpress theme or blog.

10 Powerful Methods to Increase Page Views and Reduce Bounce Rate on Your WordPress Site

Go to source

It sure is frustrating when you put so much hard work into your WordPress website, only to be faced with dwindling visitor time spent on site and high bounce rates.

Even if your site traffic and engagement is pretty good, it takes some real work and experimentation to figure out how to encourage more visitors to stay on your site longer than a few seconds and actually click around and check out more pages before closing the tab or hitting the back button.

There’s no one-size-fits-all solution, and it’s not about to get any easier, either. The average internet user now has an attention span of eight seconds, according to a Microsoft study – that’s 1 second less than a goldfish. If you can’t convince visitors in that amount of time (or less) that your content is of value to them, the extra page views you hoped to get from extra link clicking, social shares, and repeat visits will most certainly suffer.

With all that in mind, we’ll offer some practical advice in this post that can help you maximize those all-important page views on your site.

Before You Do Anything

You can promote your site and try to rack up more page views until the cows come home, but none of that time or energy spent will bring you the best results if your content is junk and your design creates more confusion than enticement. It’s time to get honest with yourself and ask whether your visitors could find the same information elsewhere or whether your theme could use some serious updating.

Caching plugins can speed up the loading time of your site. Check
Caching plugins can speed up the loading time of your site. Check out our guide 5 Quick Ways to Speed Up Your WordPress Site.

If you want to get serious about page views, you should look into testing how fast your site loads. Visitors expect your site to load in two seconds or less, so that’s what you should be aiming for. using a caching plugin and compressing your images to help speed up the loading time of your site.

Got these essential things down? Good. Here are some more specific tips, plus related tools and plugins you can take advantage of to help ramp up those page view stats.

Gather Clues from Your Bounce Rate

Here’s Avinash Kaushik’s definition of bounce rate:

“I Came, I Puked, I Left.”

The Google Digital Marketing Evangelist’s words refer to single-page visits that are followed by no additional action other than leaving the site entirely. If you’re using Google Analytics to track your traffic stats, you can find your bounce rate by navigating to Behavior > Site Content > All Pages. You’ll be able to find the bounce rate for each of your site’s pages by looking at the table on this page.

Without getting terribly specific, an overall bounce rate of 41–55% is about average while 26–40% is excellent. Since Google interprets the time spent on a page and the bounce rate by looking at the time between site entry and last page view, real stats may be off a bit. To get a bit more of an accurate reflection of how visitors are really interacting with your WordPress site, you can try using the Reduce Bounce Rate plugin. This plugin informs Google every ten seconds about any page interaction that would otherwise be ignored or counted as bounced.

The pages with the highest bounce rates will let you know what you should really be focusing your investigative work on. In general, users bounce for two main reasons – either:

  1. The page didn’t serve their expectations, or
  2. It did, but they simply didn’t find anything else relevant enough to click on.

Here are two ways you can combat bounce rate:

Match Visitor Expectations

This goes back to making sure that your content is excellent. Even if you think it already is, there’s still room for optimization.

Here’s a bunch of questions you can ask yourself:

  1. Could high-bouncing pages use some updated facts or research?
  2. Are pages too ‘thin’?
  3. Could the formatting be better?
  4. Could any images or videos be added?
  5. Do they really serve to inform the visitor about the keyword phrase it might be ranking for in Google?
  6. Could the title tags and meta descriptions be improved?

The more satisfied your visitors are with what you give them, the higher the chances they’ll be convinced that your site is worth exploring by clicking on other pages or posts for more valuable information.

Give Visitors More Relevant Stuff to Click On

There’s a big difference between a site that’s been plastered with useless links and a site that cleverly places links to flow nicely and lead the visitor through a series of useful pages based on where they started.

Here are a few ideas:

  1. Break up lengthy posts into a series.
  2. Provide relevant internal links within your content.
  3. Feature popular posts within your sidebar or at the bottom of posts.
  4. Categorize and tag your posts in a value-added manner, then link to those categories and tags
  5. Make good use of excerpts.

Below, you’ll find these link-clicking, page view-loving strategies explained in more detail.

  • Use a Good SEO Plugin

    Infinite SEO

    The most natural way you can get more page views is by ranking in the search engines – just by having great content that is optimized for keyword phrases. With so much competition these days though, it’s easier said than done. Nevertheless, having a solid and reputable SEO plugin can help. Our very own Infinite SEO is the best premium plugin you can use to get right down to the nitty gritty (even if we do say so ourselves!).

  • Break up Long Posts by Using the Page-Link Tag

    Screen Shot 2015-06-18 at 10.27.55 PM

    If you regularly post long articles, a simple way to increase page views is to break them up into two or more separate posts, then use the Page-Link Tag by typing <!—nextpage–> at the end of the post pages that flow into the others (while in text editor mode). This will create numbered pages at the end of the post page, informing the visitor to click to the next page to continue reading.

    A word of warning: Visitors don’t exactly love to keep clicking through to more pages in order to see more content that could’ve easily been put on one page, so consider experimenting with how your visitors interact with it. And if you plan on ranking well in search, bear in mind that Google tends to favor pages with more content to them.

  • Insert Relevant and Related Links in the Right Places

    Screen Shot 2015-06-18 at 10.31.28 PM

    Adding links within content is a good way to give visitors the opportunity to learn more about a topic or piece of information that was mentioned but not covered in full. Nearly as popular is the use of related links placed at the very end of a post. You can do this manually, or you can use one of the many plugins out there that can do it automatically for you.

    Yet Another Related Posts Plugin (YARPP) seems to be the big favorite among WordPress users. Most users agree that it does the best job at automatically picking out the most relevant posts to link to, and has the biggest impact on increased page views.

  • Interlink Your Posts

    Screen Shot 2015-06-18 at 10.39.39 PM

    Besides adding related links at the end of a post, another similar linking strategy you can use to drive up page views is to link to other posts or pages directly within the text of your content. WordPress actually has a feature that makes it easier for you to do this. Simply highlight the text you want link, click the Insert/edit link button in the visual or text editor, and click on Or link to existing content. You can search for a specific post or choose one from the list given.

    Make sure that the words or phrases you’re linking to are worth exploring further, and keep the links relevant. You can also use an interlinking plugin as an alternative. WordPress Insights is one that not only enables you to quickly link to other pages and posts, but also gives you the opportunity to do more with images, videos, maps, and search.

  • Use Your Sidebar to Feature Popular Content

    Screen Shot 2015-06-18 at 10.42.44 PM

    Your sidebar is a valuable piece of website real estate, and you should know that. Rather than filling it with big images and banner ads, use it to showcase the links to your most popular content. Those posts or pages are more popular than the rest for a reason, and you’ll probably see more clicks on them compared to showcasing your most recent posts in your sidebar.

    WordPress Popular Posts is a great plugin that functions as a widget, that you can drag into your sidebar and it conveniently lists all the posts that get the most action. You can even add thumbnails, set a time range, customize the types of posts you want shown, and use multiple versions of it in other sidebars or footer areas. As an added bonus, you’ll be able to tell for sure whether they’re actually driving page views by looking at the stats of your most popular posts that appear in your WordPress admin.

  • Create a Compelling Category Menu


      It’s common practice to have a basic menu featuring all the pages of your site, but it’s not quite as common to see categories used cleverly as a menu as well. Your visitors need as much help finding relevant information as they can get, and categories are just the way to do it.

      There are lots of WordPress themes out there that already have category navigation built into them, or that support the custom menu feature under Appearance in WordPress admin, so you have no excuse not to highlight the more specific areas that visitors might really be interested in. If you want multiple menus, you can check out this article for a step-by-step walkthrough on how to add more navigation menus to your WordPress theme.

    • Use Excerpts

      Screen Shot 2015-06-18 at 10.49.34 PM

        Excerpts are “hand-crafted summaries of your content”. They’re generally used on pages like the home page or blog page, featuring your most recent posts. In addition to the post title and possibly a thumbnail image, excerpts are used to hook the visitor so that they click through, resulting in more page views compared to just having WordPress use the first sentence or two of your post by default.

        You can find the excerpt feature beneath the post editor box in WordPress admin. When crafting your excerpts, try to describe up the post in a way that really pique’s visitors’ interest makes it irresistible to click on. You can check out this article for more great tips on creating better WordPress excerpts.

      Wrapping Up

      These are just a few of the WordPress-specific things you can focus on, but there really are a seemingly endless amount of things you can do to increase your page views.

      If you want to explore a few more strategies to help improve your site on site and bounce rate, check out Creating a Killer Home Page That Reduces Bounce RateBoost time-on-site by auto-loading new posts like qz.com and Medium and The Best Related Posts Plugins for WordPress.

      Which of these strategies have you used to get more page views? Did some get you better results than others? Are there any additional WordPress-specific things worth mentioning that you do to get visitors to keep clicking? Let us know in the comments below.

      Related posts:

      1. 5 Quick Ways to Speed Up Your WordPress Site No one likes waiting around for a site to load….
      2. What To Do When Your WordPress Site Has 17,871 Landing Pages What can and should you do when your home page…
      3. Creating a Killer Home Page That Reduces Bounce Rate Learn how to the reduce the bounce rate on your…

      Milestone Sales Alert with Easy Digital Downloads

      Go to source

      From: wpsnipp.com
      By: Kevin Chard

      This is a simple but great snippet for Easy Digital Downloads that will email the admin when a specific download milestone has been reached. You will need to change the $download_id, to the ID of the download and then change the $milestone to the sales milestone you want to the email.

      link: Milestone Sales Alert with Easy Digital Downloads

      Milestone Sales Alert with Easy Digital Downloads is a post from: wpsnipp.comWordPress Snippets, Code, Hacks, 615+ for your wordpress theme or blog.

      7 secrets for enhancing UX with micro-interactions

      Go to Source

      Knowing that we all judge a book by its cover, smart designers create catchy and practical interfaces. Potential users may be hooked, but how do you reel them all the way in?

      In trying to answer this question, all roads lead to a human-centered design approach, where the user is the prime focus. Be human: your application should speak the same language we use every day, including emotions, colloquial speech, and with a pinch of “come-hither” look. An interface should be your good friend, ready to give advice striving to enhance your experience, and make you chuckle.

      Curtains up, hit the lights: micro-interactions come into play. To be more precise, this is about interactive animations that come along with an interface to make it more appealing. A good animation can:

      • Communicate status and provide feedback
      • Enhance the sense of direct manipulation
      • Help people visualize the results of their actions

      In UX, what matters is how you deal with users and how they feel when using the product. Even minor details deserve close attention. Micro-interactions provide users with needed feedback and an understanding of the ongoing processes, making an interface approachable no matter how complicated the logic behind it may be.

      1) Show system status

      The first usability heuristic principle by Jakob Nielsen states: keep your user informed about what is going on. Users expect to get responses immediately, but there are situations when a site needs some time before an action is completed.

      So, the interface should keep the user enlightened about what is happening by displaying a graphic in the background, measuring bitrate, or playing a sound. The same principle relates to file transfers: don’t let your user get bored; show them progress. Even a not-so-pleasant notification such as a transfer fail should be delivered in a cute way. Make your user smile!

      2) Highlight changes

      Often, to save space, an app will simply replace one button with another when it’s needed. Sometimes we have to show notifications to make sure the user sees it. Animation will attract their attention and not let users overlook what you think is important.

      3) Keep context

      In the era of smartphones and smart watches with small screens, it can be difficult to fit a lot of information on one screen. One way to handle it is to keep clear navigation between different pages; so the user understands what appeared from where, and is able to easily navigate back. There are many options for this:

      4) Non-standard layouts

      Continuing with the previous examples, micro-interactions should help users understand how to interact with uncommon layouts without unnecessary confusion. Photos flipping forward, scrolling graphs, and rotating characters are all great options:

      5) Calls to action

      Apart from helping a user effectively interact with an application, micro-interactions have the power to encourage users to actually interact: keep on browsing, like, or share content, just because it’s attractive and they don’t want to leave:

      6) Visualize input

      Data input is one of the most important elements of any application. The quality results users get depends on the data input. As a rule, it is pretty boring, but micro-interactions turn this process into something special:

      7) Make tutorials come alive

      And of course, animations can help educate users after the launch of an application by highlighting basic features and controls needed for further usage without a hitch.


      So, if you value your user experience, polish your interface from A to Z, spicing it up with micro-interactions and animations. It will breathe life into your project.

      Attention to each and every detail is key to your success making human-computer interaction easy to use.

      250 Awesome Vintage Logos, Labels and Badges – only $10!

      Go to Source

      Zoom Slider

      Go to Source


      View demo Download source

      Today’s Blueprint is a simple content slider with depth-like zoom functionality. Each slide has a predefined zoom area that will be used to calculate the appropriate scale value for a fullscreen fill. Once the icon for zooming is clicked, the zoom area as well as the page get scaled, creating the illusion that the viewer is approaching the item. Once the whole page is covered, we show some more details.

      Navigating the slider will animate the inner parts of the slide, allowing for an independent control of the image area and the title. We are using CSS transitions and dymanic.js for moving the slide elements. Dymanic.js by Michaël Villar is a JavaScript library to create physics-based animations.

      Please note that we are using a couple of modern CSS properties, so only contemporary browsers are supported.

      Browser Support:

      • ChromeSupported
      • FirefoxSupported
      • Internet ExplorerSupported from version 10+
      • SafariSupported
      • OperaSupported

      The HTML

      <!-- Main container -->
      <div class="container">
      	<!-- Blueprint header -->
      	<header class="bp-header cf">
      		<!-- Page title etc. -->
      	<!-- Grid -->
      	<section class="slider">
      		<div class="slide slide--current" data-content="content-1">
      			<div class="slide__mover">
      				<div class="zoomer flex-center">
      					<img class="zoomer__image" src="images/iphone.png" alt="iPhone" />
      					<div class="preview">
      						<img src="images/iphone-content-preview.png" alt="iPhone app preview" />
      						<div class="zoomer__area zoomer__area--size-2"></div>
      			<h2 class="slide__title"><span>The Classy</span> iPhone 6</h2>
      		<div class="slide" data-content="content-2">
      			<!-- ... -->
      		<!-- ... -->
      		<nav class="slider__nav">
      			<button class="button button--nav-prev">
      				<i class="icon icon--arrow-left"></i>
      				<span class="text-hidden">Previous product</span>
      			<button class="button button--zoom">
      				<i class="icon icon--zoom"></i>
      				<span class="text-hidden">View details</span>
      			<button class="button button--nav-next">
      				<i class="icon icon--arrow-right"></i>
      				<span class="text-hidden">Next product</span>
      	<!-- /slider-->
      	<!-- content -->
      	<section class="content">
      		<div class="content__item" id="content-1">
      			<img class="content__item-img rounded-right" src="images/iphone-content.png" alt="Apple Watch Content" />
      			<div class="content__item-inner">
      				<h2>The iPhone 6</h2>
      				<h3>Incredible performance for powerful apps</h3>
      		<div class="content__item" id="content-2">
      			<!-- ... -->
      		<!-- ... -->
      		<button class="button button--close">
      			<i class="icon icon--circle-cross"></i>
      			<span class="text-hidden">Close content</span>
      	<!-- /content -->
      <script src="js/classie.js"></script>
      <script src="js/dynamics.min.js"></script>
      <script src="js/main.js"></script>

      The CSS

      /* Helper classes */
      body {
      	overflow: hidden;
      	height: 100%;
      .container {
      	position: relative;
      	overflow: hidden;
      	overflow-y: scroll;
      	width: 100%;
      	height: 100%;
      	-webkit-overflow-scrolling: touch;
      .noscroll .container {
      	overflow-y: hidden;
      .slider {
      	position: relative;
      	z-index: 200;
      	width: 100%;
      	margin: 0 auto;
      	padding: 0 0 7em;
      	text-align: center;
      	-webkit-user-select: none;
      	-moz-user-select: none;
      	-ms-user-select: none;
      	user-select: none;
      	-webkit-touch-callout: none;
      	-khtml-user-select: none;
      .slide {
      	position: absolute;
      	top: 0;
      	visibility: hidden;
      	width: 100%;
      	opacity: 0;
      .slide--current {
      	position: relative;
      	z-index: 100;
      	visibility: visible;
      	opacity: 1;
      .slide__mover {
      	position: relative;
      	z-index: 100;
      .slide__title {
      	font-size: 1.75em;
      	font-weight: normal;
      	margin: 0 auto;
      	padding: 1em 0 0 0;
      .slide__title span {
      	font-size: 55%;
      	font-weight: bold;
      	display: block;
      	letter-spacing: 2px;
      	text-transform: uppercase;
      	color: #35303d;
      .slider__nav {
      	position: absolute;
      	bottom: 2em;
      	width: 100%;
      	text-align: center;
      .button {
      	font-size: 1.31em;
      	position: relative;
      	display: inline-block;
      	overflow: hidden;
      	margin: 0 25px;
      	padding: 0;
      	cursor: pointer;
      	color: #5c5edc;
      	border: none;
      	background: none;
      .button:focus {
      	outline: none;
      .button:hover {
      	color: #fff;
      .text-hidden {
      	position: absolute;
      	top: 200%;
      .button--close {
      	font-size: 1.55em;
      	position: absolute;
      	top: 30px;
      	right: 30px;
      	margin: 0;
      	opacity: 0;
      	color: #50505a;
      	-webkit-transition: opacity 0.3s;
      	transition: opacity 0.3s;
      .content--open .button--close {
      	opacity: 1;
      /* Zoomer */
      .zoomer {
      	position: relative;
      	height: 360px; /* this is needed for IE10 so that vertical flexbox centering works */
      .flex-center {
      	display: -webkit-flex;
      	display: -ms-flexbox;
      	display: flex;
      	-webkit-align-items: center;
      	-ms-flex-align: center;
      	align-items: center;
      	-webkit-justify-content: center;
      	-ms-flex-pack: center;
      	justify-content: center;
      .zoomer__image {
      	display: block;
      	margin: 0;
      	-webkit-flex: none;
      	-ms-flex: none;
      	flex: none;
      .preview {
      	position: absolute;
      	top: 50%;
      	left: 50%;
      	-webkit-transform: translate3d(-50%,-50%,0);
      	transform: translate3d(-50%,-50%,0);
      .zoomer__area:focus {
      	outline: none;
      .zoomer__area--size-1 {
      	/* Apple Watch */
      	width: 96px;
      	height: 118px;
      .zoomer__area--size-2 {
      	/* iPhone */
      	width: 112px;
      	height: 198px;
      .zoomer__area--size-3 {
      	/* MacBook */
      	width: 315px;
      	height: 200px;
      .zoomer__area--size-4 {
      	/* iPad */
      	width: 150px;
      	height: 200px;
      .zoomer__area--size-5 {
      	/* iMac */
      	width: 315px;
      	height: 189px;
      .preview {
      	overflow: hidden;
      	background: #18191b;
      .preview img {
      	display: block;
      	border-radius: inherit;
      	-webkit-transform: translate3d(0,0,0);
      	transform: translate3d(0,0,0);
      .zoomer--active .preview img {
      	-webkit-transform: translate3d(100%,0,0);
      	transform: translate3d(100%,0,0);
      .rounded {
      	border-radius: 15px;
      .rounded-right {
      	border-radius: 0 15px 15px 0;
      .preview__content {
      	position: absolute;
      	top: 0;
      	left: 100%;
      	width: 100%;
      	height: 100%;
      	border-radius: inherit;
      /* Content */
      .content {
      	position: fixed;
      	z-index: 1000;
      	top: 0;
      	left: -100%;
      	overflow: hidden;
      	overflow-y: scroll;
      	width: 100%;
      	height: 100vh;
      	background: #18191b;
      	-webkit-overflow-scrolling: touch;
      .content--open {
      	left: 0;
      .content__item {
      	position: absolute;
      	top: 0;
      	display: -webkit-flex;
      	display: -ms-flexbox;
      	display: flex;
      	overflow: hidden;
      	height: 0;
      	min-height: 100%;
      	margin: 0 auto;
      	padding: 2em 0;
      	pointer-events: none;
      	opacity: 0;
      	color: #fff;
      	-webkit-align-items: center;
      	-ms-flex-align: center;
      	align-items: center;
      .content__item--current {
      	pointer-events: auto;
      	opacity: 1;
      .content__item--reset {
      	height: auto;
      .content h2 {
      	font-size: 3.5em;
      	font-weight: normal;
      	margin: 0;
      .content h3 {
      	font-size: 1.95em;
      	font-weight: normal;
      	margin: 0.25em 0 0.5em;
      	color: #685884;
      .content p {
      	font-size: 1.25em;
      	line-height: 1.5;
      .content__item-img {
      	display: block;
      	max-width: 40vw;
      	max-height: 80vh;
      	-webkit-transform: translate3d(-120%,0,0);
      	transform: translate3d(-120%,0,0);
      	-webkit-flex: none;
      	-ms-flex: none;
      	flex: none;
      .content__item--current .content__item-img {
      	-webkit-transform: translate3d(-10px,0,0);
      	transform: translate3d(-10px,0,0);
      .content__item-inner {
      	padding: 0 10vw 0;
      	opacity: 0;
      	-webkit-transform: translate3d(0,50px,0);
      	transform: translate3d(0,50px,0);
      .content__item--current .content__item-inner {
      	opacity: 1;
      	-webkit-transform: translate3d(0,0,0);
      	transform: translate3d(0,0,0);
      /* All synced transitions */
      .zoomer {
      	-webkit-transition: -webkit-transform 0.5s;
      	transition: transform 0.5s;
      	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
      	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
      .zoomer.zoomer--notrans {
      	-webkit-transition: none;
      	transition: none;
      .zoomer__image {
      	-webkit-transition: opacity 0.3s 0.3s;
      	transition: opacity 0.3s 0.3s;
      .zoomer--active .zoomer__image {
      	opacity: 0;
      	-webkit-transition-delay: 0s;
      	transition-delay: 0s;
      .preview img {
      	-webkit-transition: -webkit-transform 0.6s 0.3s;
      	transition: transform 0.6s 0.3s;
      	-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
      	transition-timing-function: cubic-bezier(0.2,1,0.3,1);
      .zoomer--active .preview img {
      	-webkit-transition: -webkit-transform 0.3s;
      	transition: transform 0.3s;
      .content {
      	-webkit-transition: left 0s;
      	transition: left 0s;
      .content__item {
      	-webkit-transition: opacity 0s;
      	transition: opacity 0s;
      .content__item {
      	/* delay for content to disappear and zoomer to start transitioning back to 0 */
      	-webkit-transition-delay: 0.3s;
      	transition-delay: 0.3s;
      .content__item--current {
      	-webkit-transition: none;
      	transition: none;
      .content__item-img {
      	-webkit-transition: -webkit-transform 0.4s;
      	transition: transform 0.4s;
      	-webkit-transition-timing-function: cubic-bezier(0.7,1,0.8,1);
      	transition-timing-function: cubic-bezier(0.7,1,0.8,1);
      .content__item--current .content__item-img {
      	-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
      	transition-timing-function: cubic-bezier(0.2,1,0.3,1);
      	-webkit-transition-duration: 1s;
      	transition-duration: 1s;
      .content__item-inner {
      	-webkit-transition: -webkit-transform 0.6s, opacity 0.3s;
      	transition: transform 0.6s, opacity 0.3s;
      	-webkit-transition-timing-function: cubic-bezier(0.7,1,0.8,1), ease;
      	transition-timing-function: cubic-bezier(0.7,1,0.8,1), ease;
      .content__item--current .content__item-inner {
      	-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1), ease;
      	transition-timing-function: cubic-bezier(0.2,1,0.3,1), ease;
      	-webkit-transition-duration: 1.7s;
      	transition-duration: 1.7s;
      /* Media Queries */
      @media screen and (max-width: 50em) {
      	.content__item {
      		display: block;
      	.content__item-img {
      		max-width: calc(100% - 80px);
      		max-height: 70vh;
      	.content h2 {
      		font-size: 3em;
      	.content__item-inner {
      		font-size: 82%;
      		padding: 4em 3em 2em;

      The JavaScript

       * main.js
       * http://www.codrops.com
       * Licensed under the MIT license.
       * http://www.opensource.org/licenses/mit-license.php
       * Copyright 2015, Codrops
       * http://www.codrops.com
      ;(function(window) {
      	'use strict';
      	var bodyEl = document.body, 
      		docElem = window.document.documentElement,
      		support = { transitions: Modernizr.csstransitions },
      		// transition end event name
      		transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' },
      		transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
      		onEndTransition = function( el, callback ) {
      			var onEndCallbackFn = function( ev ) {
      				if( support.transitions ) {
      					if( ev.target != this ) return;
      					this.removeEventListener( transEndEventName, onEndCallbackFn );
      				if( callback && typeof callback === 'function' ) { callback.call(this); }
      			if( support.transitions ) {
      				el.addEventListener( transEndEventName, onEndCallbackFn );
      			else {
      		// window sizes
      		win = {width: window.innerWidth, height: window.innerHeight},
      		// some helper vars to disallow scrolling
      		lockScroll = false, xscroll, yscroll,
      		scrollContainer = document.querySelector('.container'),
      		// the main slider and its items
      		sliderEl = document.querySelector('.slider'),
      		items = [].slice.call(sliderEl.querySelectorAll('.slide')),
      		// total number of items
      		itemsTotal = items.length,
      		// navigation controls/arrows
      		navRightCtrl = sliderEl.querySelector('.button--nav-next'),
      		navLeftCtrl = sliderEl.querySelector('.button--nav-prev'),
      		zoomCtrl = sliderEl.querySelector('.button--zoom'),
      		// the main content element
      		contentEl = document.querySelector('.content'),
      		// close content control
      		closeContentCtrl = contentEl.querySelector('button.button--close'),
      		// index of current item
      		current = 0,
      		// check if an item is "open"
      		isOpen = false,
      		isFirefox = typeof InstallTrigger !== 'undefined',
      		// scale body when zooming into the items, if not Firefox (the performance in Firefox is not very good)
      		bodyScale = isFirefox ? false : 3;
      	// some helper functions:
      	function scrollX() { return window.pageXOffset || docElem.scrollLeft; }
      	function scrollY() { return window.pageYOffset || docElem.scrollTop; }
      	// from http://www.sberry.me/articles/javascript-event-throttling-debouncing
      	function throttle(fn, delay) {
      		var allowSample = true;
      		return function(e) {
      			if (allowSample) {
      				allowSample = false;
      				setTimeout(function() { allowSample = true; }, delay);
      	function init() {
      	// event binding
      	function initEvents() {
      		// open items
      		zoomCtrl.addEventListener('click', function() {
      		// close content
      		closeContentCtrl.addEventListener('click', closeContent);
      		// navigation
      		navRightCtrl.addEventListener('click', function() { navigate('right'); });
      		navLeftCtrl.addEventListener('click', function() { navigate('left'); });
      		// window resize
      		window.addEventListener('resize', throttle(function(ev) {
      			// reset window sizes
      			win = {width: window.innerWidth, height: window.innerHeight};
      			// reset transforms for the items (slider items)
      			items.forEach(function(item, pos) {
      				if( pos === current ) return;
      				var el = item.querySelector('.slide__mover');
      				dynamics.css(el, { translateX: el.offsetWidth });
      		}, 10));
      		// keyboard navigation events
      		document.addEventListener( 'keydown', function( ev ) {
      			if( isOpen ) return; 
      			var keyCode = ev.keyCode || ev.which;
      			switch (keyCode) {
      				case 37:
      				case 39:
      		} );
      	// opens one item
      	function openItem(item) {
      		if( isOpen ) return;
      		isOpen = true;
      		// the element that will be transformed
      		var zoomer = item.querySelector('.zoomer');
      		// slide screen preview
      		classie.add(zoomer, 'zoomer--active');
      		// disallow scroll
      		scrollContainer.addEventListener('scroll', noscroll);
      		// apply transforms
      		// also scale the body so it looks the camera moves to the item.
      		if( bodyScale ) {
      			dynamics.animate(bodyEl, { scale: bodyScale }, { type: dynamics.easeInOut, duration: 500 });
      		// after the transition is finished:
      		onEndTransition(zoomer, function() {
      			// reset body transform
      			if( bodyScale ) {
      				dynamics.css(bodyEl, { scale: 1 });
      				// fix for safari (allowing fixed children to keep position)
      				bodyEl.style.WebkitTransform = 'none';
      				bodyEl.style.transform = 'none';
      			// no scrolling
      			classie.add(bodyEl, 'noscroll');
      			classie.add(contentEl, 'content--open');
      			var contentItem = document.getElementById(item.getAttribute('data-content'))
      			classie.add(contentItem, 'content__item--current');
      			classie.add(contentItem, 'content__item--reset');
      			// reset zoomer transform - back to its original position/transform without a transition
      			classie.add(zoomer, 'zoomer--notrans');
      			zoomer.style.WebkitTransform = 'translate3d(0,0,0) scale3d(1,1,1)';
      			zoomer.style.transform = 'translate3d(0,0,0) scale3d(1,1,1)';
      	// closes the item/content
      	function closeContent() {
      		var contentItem = contentEl.querySelector('.content__item--current'),
      			zoomer = items[current].querySelector('.zoomer');
      		classie.remove(contentEl, 'content--open');
      		classie.remove(contentItem, 'content__item--current');
      		classie.remove(bodyEl, 'noscroll');
      		if( bodyScale ) {
      			// reset fix for safari (allowing fixed children to keep position)
      			bodyEl.style.WebkitTransform = '';
      			bodyEl.style.transform = '';
      		/* fix for safari flickering */
      		var nobodyscale = true;
      		applyTransforms(zoomer, nobodyscale);
      		/* fix for safari flickering */
      		// wait for the inner content to finish the transition
      		onEndTransition(contentItem, function(ev) {
      			classie.remove(this, 'content__item--reset');
      			// reset scrolling permission
      			lockScroll = false;
      			scrollContainer.removeEventListener('scroll', noscroll);
      			/* fix for safari flickering */
      			zoomer.style.WebkitTransform = 'translate3d(0,0,0) scale3d(1,1,1)';
      			zoomer.style.transform = 'translate3d(0,0,0) scale3d(1,1,1)';
      			/* fix for safari flickering */
      			// scale up - behind the scenes - the item again (without transition)
      			// animate/scale down the item
      			setTimeout(function() {	
      				classie.remove(zoomer, 'zoomer--notrans');
      				classie.remove(zoomer, 'zoomer--active');
      				zoomer.style.WebkitTransform = 'translate3d(0,0,0) scale3d(1,1,1)';
      				zoomer.style.transform = 'translate3d(0,0,0) scale3d(1,1,1)';
      			}, 25);
      			if( bodyScale ) {
      				dynamics.css(bodyEl, { scale: bodyScale });
      				dynamics.animate(bodyEl, { scale: 1 }, {
      					type: dynamics.easeInOut,
      					duration: 500
      			isOpen = false;
      	// applies the necessary transform value to scale the item up
      	function applyTransforms(el, nobodyscale) {
      		// zoomer area and scale value
      		var zoomerArea = el.querySelector('.zoomer__area'), 
      			zoomerAreaSize = {width: zoomerArea.offsetWidth, height: zoomerArea.offsetHeight},
      			zoomerOffset = zoomerArea.getBoundingClientRect(),
      			scaleVal = zoomerAreaSize.width/zoomerAreaSize.height < win.width/win.height ? win.width/zoomerAreaSize.width : win.height/zoomerAreaSize.height;
      		if( bodyScale && !nobodyscale ) {
      			scaleVal /= bodyScale; 
      		// apply transform
      		el.style.WebkitTransform = 'translate3d(' + Number(win.width/2 - (zoomerOffset.left+zoomerAreaSize.width/2)) + 'px,' + Number(win.height/2 - (zoomerOffset.top+zoomerAreaSize.height/2)) + 'px,0) scale3d(' + scaleVal + ',' + scaleVal + ',1)';
      		el.style.transform = 'translate3d(' + Number(win.width/2 - (zoomerOffset.left+zoomerAreaSize.width/2)) + 'px,' + Number(win.height/2 - (zoomerOffset.top+zoomerAreaSize.height/2)) + 'px,0) scale3d(' + scaleVal + ',' + scaleVal + ',1)';
      	// navigate the slider
      	function navigate(dir) {
      		var itemCurrent = items[current],
      			currentEl = itemCurrent.querySelector('.slide__mover'),
      			currentTitleEl = itemCurrent.querySelector('.slide__title');
      		// update new current value
      		if( dir === 'right' ) {
      			current = current < itemsTotal-1 ? current + 1 : 0;
      		else {
      			current = current > 0 ? current - 1 : itemsTotal-1;
      		var itemNext = items[current],
      			nextEl = itemNext.querySelector('.slide__mover'),
      			nextTitleEl = itemNext.querySelector('.slide__title');
      		// animate the current element out
      		dynamics.animate(currentEl, { opacity: 0, translateX: dir === 'right' ? -1*currentEl.offsetWidth/2 : currentEl.offsetWidth/2, rotateZ: dir === 'right' ? -10 : 10 }, {
      			type: dynamics.spring,
      			duration: 2000,
      			friction: 600,
      			complete: function() {
      				dynamics.css(itemCurrent, { opacity: 0, visibility: 'hidden' });
      		// animate the current title out
      		dynamics.animate(currentTitleEl, { translateX: dir === 'right' ? -250 : 250, opacity: 0 }, {
      			type: dynamics.bezier,
      			points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}],
      			duration: 450
      		// set the right properties for the next element to come in
      		dynamics.css(itemNext, { opacity: 1, visibility: 'visible' });
      		dynamics.css(nextEl, { opacity: 0, translateX: dir === 'right' ? nextEl.offsetWidth/2 : -1*nextEl.offsetWidth/2, rotateZ: dir === 'right' ? 10 : -10 });
      		// animate the next element in
      		dynamics.animate(nextEl, { opacity: 1, translateX: 0 }, {
      			type: dynamics.spring,
      			duration: 2000,
      			friction: 600,
      			complete: function() {
      				items.forEach(function(item) { classie.remove(item, 'slide--current'); });
      				classie.add(itemNext, 'slide--current');
      		// set the right properties for the next title to come in
      		dynamics.css(nextTitleEl, { translateX: dir === 'right' ? 250 : -250, opacity: 0 });
      		// animate the next title in
      		dynamics.animate(nextTitleEl, { translateX: 0, opacity: 1 }, {
      			type: dynamics.bezier,
      			points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}],
      			duration: 650
      	// disallow scrolling (on the scrollContainer)
      	function noscroll() {
      		if(!lockScroll) {
      			lockScroll = true;
      			xscroll = scrollContainer.scrollLeft;
      			yscroll = scrollContainer.scrollTop;
      		scrollContainer.scrollTop = yscroll;
      		scrollContainer.scrollLeft = xscroll;

      View demo Download source

      Zoom Slider was written by Mary Lou and published on Codrops.

      Go to Source

      Beyond The Boring: The Hunt For The Web’s Lost Soul

      Go to Source

      Has web design lost its soul? And is responsive design to blame? These questions, posed by my friend and colleague Noah Stokes1, are provocative to say the least. After all, the responsive web has made browsing on our ever increasing collection of Internet-connected screens not only possible, but enjoyable.

      Our priority as designers must be to solve problems; perhaps more than anything else, this is what we do. Responsive web design is a fantastic solution to the problem of creating virtual experiences that adapt to different devices. There are other problems out there that we’re called on to solve, though, not least of which is to make content of all kinds appear interesting and engaging. A page of plain text becomes a beautiful blog post, a mess of unconnected JPGs becomes a professional portfolio.

      The question, then, becomes: can we succeed at solving both of these problems?

      What We’ve Gained

      There’s no doubt about it, the web has become an aesthetically beautiful place. Simple, attractive sites that are built on solid grid layouts have become the standard. The wild west of the web has been tamed. Law and order in the form of frameworks and fluid grids have taken over and peace reigns throughout the land.

      All of this is a good thing. The benefits of simple, attractive sites are both clear and plentiful:

      1. Familiar and easy for users to navigate (when done correctly).
      2. Prototyping is (relatively) fast and easy.
      3. Heavy standardization of site-building techniques (assembly lines have replaced artisans).
      4. Fast layout leads to big cost savings (which may or may not be passed down to the customer).
      5. Strict grid layouts lend themselves to responsive design (the minimal layout trend is driven heavily by this need).
      There are many simple and attractive websites.2

      A stroll through a web design gallery like Awwwards3 reveals hundreds of fantastic sites that fit the criteria of simple and attractive sites. (View large version4)

      It can’t be overstated that there is immense value in standardization and associated techniques. Countless individuals and small businesses benefit from having simple, attractive (and not at all unique) sites to share their brand with the world. However, that’s just one side of the story.

      What We’ve Lost

      Taken in individual doses, the average professional website today looks great. Compare even a lowly designer’s portfolio site today to the best design agency sites ten years ago, and you’ll have to concede that we’ve gotten a lot better at this web design thing. However, as you look around, it’s easy to come to the conclusion that everything is starting to look the same.

      Have designers lost that pioneer spirit? Has creativity been sacrificed on the altar of convenience? Before answering these questions, let’s take a look at what’s causing the lack of variation in web design today.

      Reasons Why Sites All Look The Same

      What’s the driving force behind the feeling of sameness that we get as we look around the web today? What’s to blame? As it turns out, it’s not as simple as pinning it all on one tool or method. RWD might contribute, but it’s just one item in a long list. Here are a few of the likely suspects.


      Limited layout ideas are one of the most prominent and obvious reasons for a lack of variation on the web. Strip out colors, animations, parallax scrolling effects and the like, and you start to see that a few basic layouts rule the web. How many sites can you name that use only slight variations of these five layouts?

      Five common web layouts.5

      Five common web layouts. (View large version6)

      This is what Noah meant when he lamented that all he saw were “boxes and grids everywhere.” We seem to have reached a stagnation point where unique layouts are a lost art.

      Responsive Web Design

      Once upon a time, you could guarantee that everyone visiting your website would be doing so on a low-resolution desktop computer screen. These days, websites that look great on almost any viewport at any resolution aren’t a luxury, they’re a necessity. Basic, fluid-width, collapsing grids make responsive web design a much simpler process than more organic layouts.


      Web design frameworks have the potential to rapidly speed up both design and development workflows. For many, they’re the safest, most straightforward route to a responsive, cross-browser website. As a bonus, they also take care of simple styling for all manner of common elements, from buttons to forms. The incredible popularity of tools like Bootstrap and Foundation leads to thousands of web designers using the exact same codebase, layouts, and even aesthetic style on every project they take on.

      Prototyping Tools And Processes

      Even our blank-canvas design process has intentionally reduced creativity from the design process. Most prototyping tools encourage and perhaps even force you to use standardized, boxy elements that conform to strict grid layouts.

      Many prototyping tools encourage common grid layout structures.7

      Many prototyping tools encourage common grid layout structures. (View large version8)

      High-Quality Free Photos And Graphics

      Never before have beautiful, free design assets been so readily available. Again, convenience and affordability reign supreme, so we see designers flocking to free photo sites, pulling from the same small (but growing) pool of resources.

      Two free stock photographs.9

      Two free stock photographs. (View large version10)

      In the last two years, how many sites have you seen using one (or both) of the two photos above? If you browse the web regularly, I’d wager the number is in the dozens.

      The same photographs used on different sites.11

      The Village Style12 and Jigglist13; College Essay Guy14 and Get Busy Make Money15 (View large version16)

      This goes way beyond photos, extending to icons, fonts, patterns, and so on. The upside here is that designers with zero budget can still make great looking sites; the downside is that every other designer is doing the same thing with the same resources.

      Design Trends

      To some designers, “trend” is a dirty word. It shouldn’t be though. Pick a decade in the 20th century and examine its design trends. What you find is fascinating. It gives that time period its own distinct style and personality, and is often a reflection of the entire culture. Even if you can’t see it, it’s happening right now in your work. Everything you see and experience is affecting what you do, and the web amplifies this like never before. The result is a lot of designers gaining inspiration from the same sources and pursuing the same trends.

      You And Me

      Every tool and resource listed above is incredibly valuable. These things make our jobs easier, open up web design and development to more people, and save clients money. I didn’t choose them arbitrarily, I use them. If we’re looking for someone to blame for a lack of variation in web design, I’ll raise my hand. It’s me. And while I don’t think every project merits a unique design, I’d like to tip my hat to the designers out there who are trying to do something more interesting.

      It’s also important to note that you can use any or all of the above and still create a unique design. It’s all in how you wield the tools that are available to you.

      How To Challenge The Status Quo

      At this point, you’ve already decided whether or not you care if your site designs are unique. Maybe that’s not your thing — that’s completely acceptable. If you find yourself wanting to break out of your typical workflow, though, here are a few ideas to get you going and some sites that serve as great examples.

      Get Weird With Layout

      Close your prototyping app, take out a pen and some paper, and think about how you can make an interesting, usable layout that’s not something you’ve ever done before.

      Phases Magazine

      Phases Magazine1917 is a good example of a site doing something unexpected with layout. It’s boxy — there is a grid at play here — and yet somehow they made it feel totally outside the typical web design experience (the screenshot doesn’t really give you a good feel for it; be sure to visit the site). If you see this and think, “Whoa, that’s weird,” good! That’s what they’re going for. Some will love it, some will hate it, but I really like that they’re trying something different.

      Phases Magazine uses an unconventional grid.18

      Phases Magazine1917 uses an unconventional grid. (View large version2220)

      Unfortunately, the site’s overall experience is quite poor. There’s some unnecessary scrolljacking, and the seemingly responsive layout breaks massively in certain viewports.

      Phases Magazine's layout breaks on smaller screens.21

      Phases Magazine’s layout breaks on smaller screens. (View large version2220)
      Curious Space

      A better implementation of a similar idea is Curious Space282523.

      The layout of Curious Space.24

      The layout of Curious Space282523. (View large version26)

      Here the grid still has a more organic feel, but scrolling functionality is normal and the breakpoints are perfectly functional.

      Curious Space adapts well to different devices.27

      Curious Space282523 adapts well to different devices. (View large version29)

      There are a lot of nice little design touches that you notice as you interact with the site. For instance, the image stack order changes on hover:

      Hovering with a mouse brings content to the foreground.30

      Hovering with a mouse brings content to the foreground. (View large version31)

      Also, they have a bit of fun with scrolling, but it’s not disrupting in the least, and it fits with the haphazard visual theme of the site. The logo starts off as a jumble of letters, but as you scroll, they fall into place and form “Curious Space” in the navigation bar.

      The letters of the logo fall into place as you scroll.32

      The letters of the logo fall into place as you scroll. (View large version33)
      Le Temps D’un Trajet

      Another interesting example is Le Temps d’un trajet3634. Once again, we see a non-standard grid, but instead of being sporadic, the layout is more intentional and clustered.

      The homepage layout of Le Temps d'un trajet.35

      The homepage layout of Le Temps d’un trajet3634. (View large version37)

      Each block in the arrangement is a static image that turns into a short video on hover. The coolest part, though, is how the grid shifts fluidly to accommodate focusing on different nodes.

      Don’t Be A Square

      One easy way to give your site a different atmosphere is to think outside the box. As cringeworthy as that sounds, when you open yourself up to different geometry, things can get really interesting.

      Built By Buffalo
      Hexagonal layout.38

      Built By Buffalo4139 uses hexagons for layout. (View large version40)

      Check out the hexagon hive that Built By Buffalo4139 has going on. This gallery design doesn’t translate nicely to mobile, so they simply switch to rectangles at one of their breakpoints. This is a great example of doing something unique where appropriate, but realizing where the boundary should be drawn to give your users the best possible experience.

      The layout switches to rectangles on narrower viewports.42

      The layout switches to rectangles on narrower viewports. (View large version43)
      Anakin Design Studio

      One of my favorite sites in this vein that I’ve seen recently is Anakin Design Studio4644. Not only is the layout beautiful and unpredictable, the shapes at play here are all far outside what you’d expect scrolling through today’s websites.

      Homepage of Anakin Design Studio.45

      Anakin Design Studio4644‘s homepage. (View large version47)

      As you can see, the huge, masked typography makes a bold impression. Beyond that though, if you move down the page you see a display of recent work. Most designers would put a simple rectangular thumbnail grid here and call it a day, but Anakin has played with the shapes to make it a lot more interesting. They’re still rectangular images, but they’ve used white backgrounds to create the illusion of varying shapes.

      Anakin Design Studio's portfolio of work.48

      Anakin Design Studio’s portfolio. (View large version49)
      Avex Designs; Mathilde Jacon

      Here are some other sites doing unexpected experiments with interesting shapes.

      Examples of interesting shapes from Avex Designs and Mathilde Jacon.50

      Avex Designs51 and Mathilde Jacon52 use unconventional shapes to create unique experiences. (View large version53)

      Go Organic

      Fixate; For Better Coffee

      Sites like Fixate5754 and For Better Coffee5855 combine illustration with organic, crazy-busy layouts that make for powerful and memorable experiences.

      Complex illustrated layouts.56

      Fixate5754 and For Better Coffee5855 use highly illustrated layouts to help them stand out.(View large version59)

      The layouts above only seem complex because of the artwork; in reality, they can be pulled off fairly easily. Custom illustration work is a fantastic way to communicate a unique brand personality in a world lost in minimal thumbnail grids that all look the same.

      For Better Coffee uses entertaining animations to track the coffee bean through the coffee creation process as you scroll. The experience is smooth, and it doesn’t jump the page to predefined points, so scrolling becomes a story-telling feature.

      Coffee bean story.60

      A coffee bean falls toward a grinder as the page is scrolled. (View large version61)
      Pouring coffee.62

      Further down the page, scrolling pours fresh coffee into a cup. (View large version63)

      While we’re on the topic of beautifully illustrated sites, you should check out HappyFunCorp64.

      At first, it seems like a fairly normal site with some fun little animations. The cool part happens when you start to navigate. The scene on the homepage serves as the basis for the rest of the site, so when you follow a link, instead of loading a brand-new page it zooms in to a detail of the whole scene.

      A zoomed-in section of the HappyFunCorp site.65

      Following a link zooms in to a detail. (View large version66)

      It’s quirky, but I love the original thinking that went into it. Also, because the navigation is still presented in a standard way means that there’s no learning curve for users. The whole experience in delightfully unexpected, but in a way that doesn’t contradict how you normally interact with a site.

      Vary The Experience

      One basic expectation that users have is that everyone who lands on the same site will receive the same experience; a fun way to do something different is to toss that out the window. Vasilis van Gemert’s site6967 not only uses a unique, overlapping box layout, it also changes its entire color scheme for every visit.

      Three different color schemes.68

      Three different color schemes from Vasilis van Gemert’s site6967. (View large version70)

      This creative feature extends beyond the homepage to all of the major subpages.

      Subpages also change their color schemes.71

      Subpages also change their color schemes. (View large version72)

      Create A Unique Visual Theme

      Another way to make your site design unique is to decide on an entertaining or interesting theme that you can use as the basis of all your design decisions. This provides a nice framework for everything you do and encourages you to explore beyond traditional UI.

      While not appropriate for all sites (a government website, for instance), for things like event announcements or small company pages it can be refreshing. The new site for dConstruct 20157573 is a great example of this idea.

      Part of the retro-futuristic design for dConstruct 2015.74

      Part of the retro-futuristic design of the dConstruct 20157573 site. (View large version76)

      As you can see, they went for a retro-futuristic vibe, heavily reminiscent of The Jetsons77. The result is a site that’s flat out fun to scroll through as you discover the how they present each new section.

      A detail from the dConstruct design.78

      A detail from the dConstruct design. (View large version79)

      There are a couple of really great things to note about this site. First of all, the headline treatments are wonderfully retro, using a combination of Lamplighter Script and Andes.

      The best part, though, is that these are live web fonts with the diagonal direction implemented via a simple CSS skew. The repetition of diagonal lines throughout the site helps the design feel both consistent and creative.

      Styled web fonts mean selectable text.80

      With creative use of styled web fonts, all the text is selectable. (View large version81)

      This site is a great example of how responsive design doesn’t have to be boring. The layout doesn’t feel boxy or typical, and yet it manages to reflow nicely to any viewport size. In fact, I really love how creative they were with transforming elements for smaller screens. For instance, as your viewport shrinks, the ticket graphic shown below jumps into an animated transform that shifts from horizontal to vertical orientation. It’s a tiny detail, but it’s clever and shows how much thought was put into every aspect of the layout.


      For narrow viewports, the ticket flips from horizontal to vertical. (View large version83)

      Hats off to Clearleft84 for the great work on this one.

      Use Stock As An Input, Not An End Result

      I work at Creative Market85, so I’m absolutely in favor of using great stock graphics, fonts, photos, and more. Quality stock resources can be immensely helpful for every designer, but how you use them is an important consideration. Whether you’re using some interesting vector artwork, an icon set, or a full-blown website theme, consider putting in some extra effort so that your implementation doesn’t look exactly like that of everyone else. The vast majority of people downloading that asset won’t bother with much or any customization, so a little bit goes a long way.

      The Trouble With Unique Sites

      Finding sites that are truly surprising and unique is a tall order. I put in hours of site searching to prepare for this article and still feel like I have very little to show for it. One overwhelming trend I’ve found is that it often feels like the only designers really pursuing unique web design are producing sites with wonky user experiences.

      Experimentation is great, but sites that confuse users with weird, unexpected and unpleasant UX often fall short of their goals. Many of these sites take a step backwards by presenting us with Flash-like experiences: long loading times, overly ornate animations, jumpy scrolling, and complex user flows. There is a middle ground. You can create beautiful, unique looking websites without trying to reinvent the interaction wheel.

      Web Design Lives

      Standardization and predictable design will always have their place on the web. In fact, they may be the best possible solution for presenting most types of content to most screens. That said, we should let our creative instincts fight it out with our analytical instincts from time to time.

      Let’s do our part to make sure the web remains what it has always been: a place for technology, art and design to overlap in new and interesting ways. Be a pioneer, try something you’ve never seen anyone do — and yes, make lots of mistakes along the way. It’s great to create something weird every now and then, even if other people hate it. That’s how this crazy thing called the web was built, and that’s how we’ll keep pushing it forward.

      Ultimately, despite the fact that plenty of sites look pretty similar, I don’t believe that web design has reached a point of stagnation. There are countless extremely talented designers creating unbelievable sites, constantly raising the bar for their peers. This topic is wide open for debate, though. I’d love to hear your thoughts about the state of design on the web, and who you think is doing the most interesting work.

      (ml, og)


      1. 1 http://www.creativebloq.com/web-design/why-web-design-losing-its-soul-51514950
      2. 2 http://www.smashingmagazine.com/wp-content/uploads/2015/06/01-awwwards-opt.jpg
      3. 3 http://www.awwwards.com/nominees/
      4. 4 http://www.smashingmagazine.com/wp-content/uploads/2015/06/01-awwwards-opt.jpg
      5. 5 http://www.smashingmagazine.com/wp-content/uploads/2015/06/02-layout-opt.jpg
      6. 6 http://www.smashingmagazine.com/wp-content/uploads/2015/06/02-layout-opt.jpg
      7. 7 http://www.smashingmagazine.com/wp-content/uploads/2015/06/03-prototyping-tools-opt.png
      8. 8 http://www.smashingmagazine.com/wp-content/uploads/2015/06/03-prototyping-tools-opt.png
      9. 9 http://www.smashingmagazine.com/wp-content/uploads/2015/06/04-free-stockphotos-opt.jpg
      10. 10 http://www.smashingmagazine.com/wp-content/uploads/2015/06/04-free-stockphotos-opt.jpg
      11. 11 http://www.smashingmagazine.com/wp-content/uploads/2015/06/05-stockphoto-examples-opt.jpg
      12. 12 http://thevillagestyle.com/adventure1/
      13. 13 http://jigglist.com
      14. 14 http://www.collegeessayguy.com/
      15. 15 http://www.getbusymakemoney.com
      16. 16 http://www.smashingmagazine.com/wp-content/uploads/2015/06/05-stockphoto-examples-opt.jpg
      17. 17 http://www.phasesmag.com
      18. 18 http://www.smashingmagazine.com/wp-content/uploads/2015/06/06-phases-magazine-opt.jpg
      19. 19 http://www.phasesmag.com
      20. 20 http://www.smashingmagazine.com/wp-content/uploads/2015/06/06-phases-magazine-opt.jpg
      21. 21 http://www.smashingmagazine.com/wp-content/uploads/2015/06/07-phases-magazine-opt.jpg
      22. 22 http://www.smashingmagazine.com/wp-content/uploads/2015/06/06-phases-magazine-opt.jpg
      23. 23 http://www.curiousspace.com
      24. 24 http://www.smashingmagazine.com/wp-content/uploads/2015/06/08-curious-space-opt.jpg
      25. 25 http://www.curiousspace.com
      26. 26 http://www.smashingmagazine.com/wp-content/uploads/2015/06/08-curious-space-opt.jpg
      27. 27 http://www.smashingmagazine.com/wp-content/uploads/2015/06/09-curious-space-opt.jpg
      28. 28 http://www.curiousspace.com
      29. 29 http://www.smashingmagazine.com/wp-content/uploads/2015/06/09-curious-space-opt.jpg
      30. 30 http://www.smashingmagazine.com/wp-content/uploads/2015/06/10-curious-space-opt.jpg
      31. 31 http://www.smashingmagazine.com/wp-content/uploads/2015/06/10-curious-space-opt.jpg
      32. 32 http://www.smashingmagazine.com/wp-content/uploads/2015/06/11-curious-space-opt.jpg
      33. 33 http://www.smashingmagazine.com/wp-content/uploads/2015/06/11-curious-space-opt.jpg
      34. 34 http://letempsduntrajet.fr
      35. 35 http://www.smashingmagazine.com/wp-content/uploads/2015/06/12-le-temps-dun-trajet-opt.jpg
      36. 36 http://letempsduntrajet.fr
      37. 37 http://www.smashingmagazine.com/wp-content/uploads/2015/06/12-le-temps-dun-trajet-opt.jpg
      38. 38 http://www.smashingmagazine.com/wp-content/uploads/2015/06/12b-build-by-buffalo-opt.jpg
      39. 39 http://builtbybuffalo.com
      40. 40 http://www.smashingmagazine.com/wp-content/uploads/2015/06/12b-build-by-buffalo-opt.jpg
      41. 41 http://builtbybuffalo.com
      42. 42 http://www.smashingmagazine.com/wp-content/uploads/2015/06/13-build-by-bufallo-opt.jpg
      43. 43 http://www.smashingmagazine.com/wp-content/uploads/2015/06/13-build-by-bufallo-opt.jpg
      44. 44 http://www.anakin.co/en
      45. 45 http://www.smashingmagazine.com/wp-content/uploads/2015/06/14-anakin-opt.jpg
      46. 46 http://www.anakin.co/en
      47. 47 http://www.smashingmagazine.com/wp-content/uploads/2015/06/14-anakin-opt.jpg
      48. 48 http://www.smashingmagazine.com/wp-content/uploads/2015/06/15-anakin-opt.jpg
      49. 49 http://www.smashingmagazine.com/wp-content/uploads/2015/06/15-anakin-opt.jpg
      50. 50 http://www.smashingmagazine.com/wp-content/uploads/2015/06/16-interesting-shapes-opt.png
      51. 51 http://avexdesigns.com/
      52. 52 http://www.mathildejacon.com/
      53. 53 http://www.smashingmagazine.com/wp-content/uploads/2015/06/16-interesting-shapes-opt.png
      54. 54 http://fixate.it
      55. 55 http://forbetter.coffee
      56. 56 http://www.smashingmagazine.com/wp-content/uploads/2015/06/17-organic-sites-opt.png
      57. 57 http://fixate.it
      58. 58 http://forbetter.coffee
      59. 59 http://www.smashingmagazine.com/wp-content/uploads/2015/06/17-organic-sites-opt.png
      60. 60 http://www.smashingmagazine.com/wp-content/uploads/2015/06/18-for-better-coffee-opt.png
      61. 61 http://www.smashingmagazine.com/wp-content/uploads/2015/06/18-for-better-coffee-opt.png
      62. 62 http://www.smashingmagazine.com/wp-content/uploads/2015/06/19-for-better-coffee-opt.png
      63. 63 http://www.smashingmagazine.com/wp-content/uploads/2015/06/19-for-better-coffee-opt.png
      64. 64 http://happyfuncorp.com/#home
      65. 65 http://www.smashingmagazine.com/wp-content/uploads/2015/06/20-happy-fun-corp-opt.png
      66. 66 http://www.smashingmagazine.com/wp-content/uploads/2015/06/20-happy-fun-corp-opt.png
      67. 67 https://vasilis.nl/
      68. 68 http://www.smashingmagazine.com/wp-content/uploads/2015/06/21-vasilis-van-gemert-opt.png
      69. 69 https://vasilis.nl/
      70. 70 http://www.smashingmagazine.com/wp-content/uploads/2015/06/21-vasilis-van-gemert-opt.png
      71. 71 http://www.smashingmagazine.com/wp-content/uploads/2015/06/22-vasilis-van-gemert-opt.png
      72. 72 http://www.smashingmagazine.com/wp-content/uploads/2015/06/22-vasilis-van-gemert-opt.png
      73. 73 http://2015.dconstruct.org
      74. 74 http://www.smashingmagazine.com/wp-content/uploads/2015/06/23-dconstruct-opt.jpg
      75. 75 http://2015.dconstruct.org
      76. 76 http://www.smashingmagazine.com/wp-content/uploads/2015/06/23-dconstruct-opt.jpg
      77. 77 https://en.wikipedia.org/wiki/The_Jetsons
      78. 78 http://www.smashingmagazine.com/wp-content/uploads/2015/06/24-dconstruct-opt.jpg
      79. 79 http://www.smashingmagazine.com/wp-content/uploads/2015/06/24-dconstruct-opt.jpg
      80. 80 http://www.smashingmagazine.com/wp-content/uploads/2015/06/25-dconstruct-opt.jpg
      81. 81 http://www.smashingmagazine.com/wp-content/uploads/2015/06/25-dconstruct-opt.jpg
      82. 82 http://www.smashingmagazine.com/wp-content/uploads/2015/06/26-dconstruct-opt.jpg
      83. 83 http://www.smashingmagazine.com/wp-content/uploads/2015/06/26-dconstruct-opt.jpg
      84. 84 http://clearleft.com
      85. 85 https://creativemarket.com

      The post Beyond The Boring: The Hunt For The Web’s Lost Soul appeared first on Smashing Magazine.

      Go to Source

      Collective #175

      Go to Source


      Collective #175 was written by Pedro Botelho and published on Codrops.

      Go to Source