Author Archives: Al Nemec

How to make the Apple TV 3D Button

If you pay close attention to user interfaces you may have noticed that the primary menu and movie/tv cover art on the new and soon to be released (in october) apple tv are three dimensional.

touch_remote_large_2xThe practical purpose of which is that it helps you sense where your position in the swipe controlled user interface resides. However it is also easy to see that it provides a unique wow factor to the move poster art we are all used to seeing in 2D.

Upon seeing this I thought there could be a practical purpose to its implementation on the web by helping the user track their cursor position as well as create some visual intrigue with the highlighted content it could be marketing.

Tada! I’m done!

See the Pen 3D Panel Button by Al Nemec (@althe3rd) on CodePen.

Ok so maybe I should explain a bit of this. To sum it up…  I created a primary container that I could set CSS properties to preserve 3d and set its perspective size.  From there I created three containers contained within that have varying Z positions to create the background, middle, and foreground levels.

The complexity came into play when I then needed to create the script that would change the angle of the primary container based on the cursors position only while it was within the container in question.

$( "a.tiltAction" ).mousedown(function(event) {
	  	var elem = $(this).closest(".tiltWrapper");
	  	$(elem).addClass("pressed");
  	});
  	
  	$( "a.tiltAction" ).mouseup(function(event) {
	  	var elem = $(this).closest(".tiltWrapper");
	  	$(elem).removeClass("pressed");
  	});
  	
  	$("a.tiltAction").mouseout(function(event) {
	  	var reflectionelem = $(this).next().find(".reflection");
	  	$(reflectionelem).css("opacity","0");	
  	});
  
  	$( "a.tiltAction" ).mousemove(function( event ) {
	  var rotateelem = $(this).next(".tiltPanel");
	  var reflectionelem = $(this).next().find(".reflection");
	  
	  
	  var maxdeg = $(this).closest(".tiltWrapper").attr("data-maxangle");
	  
	  if(!maxdeg) {
		 
		//default to 10deg throw when no max angle is defined in attribute.
	  	var maxdeg = 10;
	  }
	  
	  var elemoffset = $(this).offset();
	  var elemwidth = $(this).width();
	  var elemheight = $(this).height();
	 
	  var cursorX = event.pageX - elemoffset.left;
	  var cursorY = event.pageY - elemoffset.top;
	  
	  
	  if(cursorX < (elemwidth/2)) {
		  var perX = (cursorX / (elemwidth/2))-1;
		  var opacityX = 1-(cursorX / (elemwidth/2));
		  var degX = Math.floor(maxdeg * perX);
		  var refX = elemwidth - cursorX;
		  
	  } else {
		  var perX = 1-(cursorX / (elemwidth/2));
		  var opacityX = (cursorX / (elemwidth/2))-1;
		  var degX = Math.floor(-(maxdeg * perX));
		  var refX = elemwidth - cursorX;
	  }
	  
	  if(cursorY < (elemheight/2)) {
		  var perY = 1-(cursorY / (elemheight/2));
		  var degY = Math.floor(maxdeg * perY);
		  var refY = elemheight - cursorY;
	  } else {
		  var perY = (cursorY / (elemheight/2))-1;
		  var degY = Math.floor(-(maxdeg * perY));
		  var refY = elemheight - cursorY;
	  }
	  
	  
	  var rotation = "transform: rotateX("+degY+"deg) rotateY("+degX+"deg)";
	  $(rotateelem).attr("style",rotation);
	  
	  var reflection = "transform: translate("+refX+"px, "+refY+"px); opacity: "+opacityX+"";
	  $(reflectionelem).attr("style",reflection);
  
	});
	
	$( "a.tiltAction" ).mouseout(function() {
		var rotateelem = $(this).next(".tiltPanel");
		
		var rotation = "transform: rotateX(0deg) rotateY(0deg); transition: 1.0s transform";
		$(rotateelem).attr("style",rotation);
	});

The scripts above cover the math needed to change the 3D rotation of the container in both X and Y directions as well as resetting the position upon the cursor leaving the container area.

The Polish

Last but not least a radial gradient SVG was added to give the reflectivity effect so that the tilting panel appeared to be affected by a light source.

The best part about the scripts above is that since it does its measuring on the fly you can change the container size at any time to anything and it will continue to work.

Conclusion

I quite like how the effect turned out and I may end up using it on an upcoming project. If you have any questions or ideas for improving it drop me a line or leave a comment below.

Perfect is the enemy of the good

If you have worked on the visual design of a site long enough you have likely encountered the phase of the process where you no longer find the once new and inspired design appealing. The site is no longer “fresh” or “shiny” in your eyes and your motivation for completing it is waining. Further, you may even feel compelled to scratch it and start all over with a new design.

I am not talking about identifying serious design issues that will cause visitors to become confused or cause content to go unnoticed.  I am talking about the polish of the site, the part that adds the emotional “oohs” and “aaahs” that you want the visitor to hopefully experience.

I can’t even count the number of times I have been in this same position, sometimes I feel like it occurs on nearly every project. And the only thing keeping me going is either an impending deadline or the lingering threat of regret over not getting the site launched sooner.

So when is the site good? Or perhaps the question is, when is it good enough? To be honest, I think many designers look down on their own work not too long after it is started.  It’s a natural part of our personalities that strives to always create something better.  I suppose this feeling isn’t universal but is in some ways healthy as it keeps us from becoming complacent in our current knowledge and skills. We want our work to wow someone and if it doesn’t wow us how are we supposed to know it will be amazing in the eyes of others.

It is with this thought process that I present the following guidelines when encountering this feeling of design inadequacy.

Do you have a launch deadline looming?
If the answer is yes, then worrying about polish should be considered but not something that causes you to want to start anything over from scratch. Look at how the current design can be enhanced and keep pushing forward.

Has the site already been redesigned recently?
If so than you may be entering a pattern here that isn’t helping. Do what you can to look at the current design and really examine what you don’t like about certain details.  Resist the urge to start over and instead add polish where maybe it wasn’t considered before.

Does the design just feel stale but you can’t pin point anything that would be site breaking?
Maybe the site just needs a fresh set of eyes.  Ask a friend if they wouldn’t mind reviewing it and letting you know what they think.  They may spot something you didn’t notice that needed work or perhaps they will show such enthusiasm for the design that it will re-inspire you to keep working.

If nothing else, launch the site and keep working on it.  The motivation of a live site that others can see might just be enough to keep you updating it faster and to greater effect than you would if the site was still privately on your own local environment.

 

Have you encountered this feeling before? What did you do to overcome it and complete the site design without losing steam? Leave your thoughts and experiences below. I will add some of the top rated suggestions to the list.

5 Things I want in the Spartan Browser

  1. Improved Type Rendering
  2. CSS Filter Support
  3. Smooth Scrolling
  4. Consistent CSS Transform Behavior
  5. Speed

I do really hope that Spartan brings some new competition to the market place in the form of good features and performance.

What do you really want to see in the new Spartan browser from Microsoft? Leave your thoughts below.

Design, Style, and Opinions.

The following is a thought experiment I had about the nuances of web design and how we might focus our attention on the visual nature of the web to understand what is a style trend and what is truly great design.

User experience is made up of many factors, and of those factors the visual design is perhaps one of the most important as it is your first impression to your users.  The immediate emotional response your users have will set the tone for everything else they do on the site. But to take things a bit further I tend to think of the visual design in two forms, design and style.

Design

The design of a site has greater longevity than its style. To me, the design is made up of high level aspects of the site such as its core components, that includes (navigation elements, rough layout, etc.).  Apple.com is a great example of this as its navigation hasn’t changed very much between 2000 and today.  The actual products listed and links available have changed as their product line changed but the overall structure has only changed in very minor ways to simplify the number of items present.

2000Screen Shot 2015-01-27 at 2.56.00 PM

2006Screen Shot 2015-01-27 at 2.55.29 PM

2011Screen Shot 2015-01-27 at 2.56.35 PM

Style

Great design sticks around longer while styles change quickly.  I tend to think of the style of a site as the visual details, its color palette, its typography, its imagery.  These are aspects that change far more often as what is considered “trendy” or “modern” changes. I find this to be the result of what many people define as “new” or “interesting”.  Often what is interesting is what is new, while not always necessarily linked.  It is easy to see why standing out from the crowd and making yourself interesting is done by doing something new.  On the web this occasionally means altering the core of the design, but more often it’s the applied style that people really gravitate too.

Functionality

The comparisons of design and style span into the functionality of the site as well. The rate at which new technologies emerge on the web make it possible for a rapid evolution of what really works well and what doesn’t. And this is truly possible because of the open nature of industry. Since we all get to share and learn about new methods from each other, we are able to create fantastic new experiences without necessarily understanding every corner of web development and design.  Many times the design of a new functional piece is found to be ideal for many applications while the execution differs as each developer might apply their own unique take.

For example two of the more popular online code tools out there are Codepen and Jsfiddle.  Both of these two offer similar functionality in the form of multiple windows for adding code while getting a live preview of the output asynchronously.  However, each site takes a different approach to the details their tools offers and the visual style in which it delivers it.

Screen Shot 2015-01-27 at 3.29.28 PMScreen Shot 2015-01-27 at 3.29.37 PM

In this way, great design has proven the benefit and popularity of these tools while the delivery and style (user experience) differs and changes more rapidly as these tools improve.

Conclusion

Perhaps I am applying too much of a microscope to the differences in a sites user experience.  Perhaps I am confusing design for style and style for design.  Regardless of labels it is important to pay attention to all aspects as they change on the web at a macro and micro level. Recognizing these changes helps to see where things will change next. And thus, make it easier to see new trends as a logical progression and less of a surprise or a mystery.

 

 

 

 

 

Varnish caching on a budget

No matter how you create and manage your website, performance is always a key part of your sites success. It is no surprise that a slow website is likely to turn away visitors particularly on an e-commerce site. Time is money and customers don’t want to use slow sites.

So how do you know if your site is fast? Well there is always the natural perception of how it feels to navigate the site. But depending on how fast your ISP is you may be getting a false sense of speed compared to someone on a mobile device or living on a slower connection in general.

Thankfully there are a number of tools out there to help you determine if your site is lacking in certain areas on more measurable level.

These tools won’t know the way your site is structured but can at least give you a relatively objective look at your sites performance from the perspective of the visitor. In addition, they will help break down where some of the trouble areas are.

Improving performance depends on a number of factors and I won’t be going in to all of them on this post.

Caching

But I do want to talk about an area of performance that particularly affects many users using a content management system (CMS).  Your webserver is mostly likely running apache, mysql, and php. And if you are using a CMS like wordpress your website is causing your webserver to do a lot of processing every time someone visits the site. You can implement some disk based caching (such as the W3 Total Cache plugin for wordpress) but even this will only get you so far since apache is still handling the incoming requests.

Enter Varnish

Varnish is a web caching tool that lives independently of your website and serves up cached pages from memory when they are available.  The result is shockingly fast.

If you are using something like digital ocean (like I am) or another vps service your setup probably looks something like this.

prereq

 

What we would like to do is get to a setup that looks more like this.

goal

To give you an idea to the difference, here is a test I ran using blitz.io that pummeled a site living on a somewhat tiny 512Mb of memory Ubuntu 14 server on digital ocean.  In this test, disk caching has been turned on for a WordPress site.

Without Varnish

Screen Shot 2014-10-01 at 2.41.56 PM

In the test above the site got to about 300 users about 20 seconds in and crashed.

 

With Varnish

In this test I created a new VPS (also with 512Mb of memory on ubuntu 14) and set it as the varnish cache for the site.

Screen Shot 2014-10-01 at 2.44.05 PM

Tada! thats 28,922 hits with 0 errors and timeouts.  You can even see that at no point did the performance of the server slow down either.

Varnish has its downsides as it takes a while to configure properly and requires extra setup when utilizing https. But I think the benefits are clear.

If you want to be sure your site is likely to stay up with a large influx of users, I recommend you take a look at Varnish.  In my situation, I have this whole setup hosted for only $10 a month on virtual private servers.  For a more detailed guide on getting that setup, I recommend following digital ocean’s guide here.

The Year of Frosted Glass

Yesterday’s skinned designs of faux leather stitching and dramatic drop shadows has given way to photo centric flat design.  And one facet of that new style trend is to use transparency.  However as many people come to realize, using a semi transparent color over a photo can often still be too messy visually to allow the content in said container to be easily viewed.

In this example I do not have any text content but you can see how the difference between a transparent window of 70% white (left) and a frost glass effect of 70% (right) make a substantial difference in the ability to see the watermark style icons.

Screen Shot 2014-09-05 at 8.39.32 AM Screen Shot 2014-09-05 at 8.39.56 AM

The effect becomes increasingly beneficial when using a much more detailed background such as in the example below.

Screen Shot 2014-09-05 at 8.49.16 AM Screen Shot 2014-09-05 at 8.49.31 AM

 

The effect is composed of a background image, a semi transparent container, and a layer between the two that is a copy of the background image that is blurred.

blur1exampleStatic Effect

If you are apply the effect to a background image that is static or that doesn’t move you can accomplish this quite easily by just creating a custom version of the background image that has the portion directly where the container will reside blurred.  This is handy when you can get away with it since it avoids additional markup.

HTML

<div class="backgroundImage">
<div class="semiTransparentContainer">My Content</div>
</div>

Dynamic Effect

But what happens when the image is dynamic (generated by a content from a CMS) or is even supposed to move behind the semi transparent container?  This is where it gets more complicated, and fun.

blurexample2If the image source is coming from a CMS but the presentation of the background image to the foreground container is still static then you can generally apply the effect as you would in the static example but in this instance you would call the image into two containers, one that is the clear background and one that is the blurred version that is a “masked” version of the background image blurred using CSS filters.

HTML

<!-- Background Image is in a separate container -->
<div class="backgroundImage">
<div class="semiTransparentContainer">My Content</div>
<div class="backgroundImageCopy"></div>
</div>

CSS

.backgroundImage {
background: url("image.jpg") no-repeat;
background-size: cover;
position: relative;
}

.semiTransparentContainer {
position: absolute;
top: 40%;
left: 40%;
z-index:2;
background: rgba(255,255,255,0.7);
}

.backgroundImageCopy {
position: absolute;
top: 40%;
left: 40%;
z-index:1;
background: url("image.jpg") no-repeat;
background-size: cover;
-webkit-filter: blur(12px);
-moz-filter: blur(12px);
-o-filter: blur(12px);
-ms-filter: blur(12px);
filter: blur(12px);
filter: url("../../resources.svg#svgBlur"); /* Firefox doesn't yet support css filters so SVG must be used */
}

If the object that is blurred is intended to move not in sync with the semi transparent container you will want to apply a scroll event listener using javascript to move the blurred containers image in sync with the background image while the blurred container itself stays in sync with the semi transparent container.

IE Warning

The Dynamic blur effects rely upon the browser to blur the image dynamically.  While not impossible to blur in the browser in IE it does require some extra effort.  In IE9 and below you can use a direct X filter, for IE10 and IE11 you will need to look into using a canvas based blur effect since the Direct X filters are no longer supported.

The Full Site Dynamic Version

But what happens when your blur effect is supposed to be dynamic and could occur over any part of your site?  This is where you need to create what I would call a pseudo shadow DOM.  Thats not an official term but its a label that I think best resembles what you create.

blurexamplegifWith this effect you use Javascript to create a copy of the DOM (after it has been fully loaded in the browser) into a separate container and then apply a css blur filter to that container.  Then use a javascript scroll event listener to dynamically move the duplicate DOM to stay in line with the normal content.  You will also need to make sure your duplicated copy of the dom strips out any ID’s (as those need to remain to unique to your original markup structure) as well as any form elements and any items that would duplicate any html calls.

In order to maintain scrolling performance it was important to move the blurred duplicated DOM using CSS 3D transforms.  Using this method I managed to avoid any significant scrolling performance issues.

Accessibility

This is important! You will also need to set the DOM to not be visible to any screen readers, otherwise you are creating a massive accessibility problem in the process. One option is to add an ARIA attribute of aria-visible=”false” to the duplicated DOM container.

Here is a full video example of the effect.

The end result is a frost glass effect that will work anywhere on your site with any content and at any size.  And thanks to updates in iOS8, the scroll effect even works there live as you scroll at a beautiful 30fps.  On Android browsers I have found the effect to mostly work but the scroll event listener only updates upon scrolling stopping rather than in real-time.

Performance

Using this technique with asynchronous JavaScript and proper caching I have been able to maintain a Google Page speed score of 90.  So overall I have found the effect to be useful without adversely affecting performance.

Conclusion

What do you think of this technique?  Do you have any ideas on how to improve it?  Put your thoughts in the comments below.

Coming Updates – September 8th

I will be providing a downloadable code example later next week for those interested in trying to implement their own version.

Macaw In Practice

So after giving things a try with Macaw I can say that I am very impressed but also a bit disappointed at the same time.

The Good

Being able to work visually is how I often start brand new projects (commonly in photoshop) and being able to take that work and have it already be partially coded was wonderful.  It was also great to see the type rendered out as it actually would be on a webkit browser on the mac rather than photoshops often bizarre antialiasing options.

I also found the default output for Macaw to be very impressive for working entirely in the visual medium.

 

The Bad

While the end result of what came out of Macaw was quite good from a static html perspective it had several issues when translating into what I would want on the web for use in a CMS or other non static platform.

First, I write a fair amount of custom javascript so concatenating and minifying that has been apart of my preprocessors in recent months.  Using Grunt, Gulp, or any other preprocessing tools means needing to still do that setup after macaw gives you its output.  Which also means that if you go back to macaw to make more edits you have to do some of it over again each time.  This is also impacted when Macaw wouldn’t let me do something specific to my markup (that javascript would manipulate). Basically going back to Macaw to do any editing was a non starter.

This in turn makes Macaw an interesting starting point but basically unusable for going back to it to edit the site down the line which in turn makes it less useful over something like photoshop which had the same drawback but at least one could use a boilerplate template that already had a grunt/gulp configuration completed.

 

What would make Macaw better?

One of the reasons Macaw is able to output such clean markup and css is that it controls it all (no code view) but I can’t help but wish that I had the option of manipulating it directly inside the macaw project as many of my designs don’t conform to the basics of CSS / JS.

Maybe if Macaw gets to that point then I could see myself diving in again.

Perhaps this is the result of my experience and skill set not being the target audience for Macaw.  But in my opinion my currently more abstract methods work really well, are very fast, and are more flexible.  So perhaps the lesson here is…

If you can get your head around the abstract nature of today’s web design/development, you won’t find Macaw as useful.  But if you are new to web design and feel overwhellmed, Macaw is a great place to get started.

Macaw

Friends don’t let friends use front page.  Or at least that is the saying some of my fellow designers would always toss around.  The primary issue being the quality of code that front page (and even dreamweaver) would produce when using its WYSIWYG editor was awful. But those early editors did hit upon something that has always been a bit difficult with web design, thinking visually while also thinking in code.

Through a great deal of time, energy, and patience I have long since grown into a design and development cycle where I can write line after line of css and already know in my head what it’s going to look like before I preview it in the browser.  But that sort of training and patience doesn’t come easy and it has had me thinking.  If I had to learn it all over again, would I still be trying to just write code or would I start with one of the new generation of web design tools to learn from?

Macaw and Adobe Muse are a few of the most recently released apps promising to let you create a website visually using the creative side of your brain. These apps still let you export your work so you can see the raw html,css, and JavaScript but Macaw in particular doesn’t want you jumping back and forth between those worlds. So in the case of Macaw, you are left going back to its editor to make further changes or go completely code after a certain point.

From the perspective of someone who has a development process for the front end that starts occasionally in Photoshop (if it’s a radically new visual rethink) and then moves into using sublime text, I do wonder if I could actually speed up my process by starting visually and then switch to code at which point I would have some of the primary structure completed.

My primary concerns revolve around breaking away from my current system of custom sass includes, preprocessor setups, and other boilerplates that may prove quite difficult to re introduce to an exported Macaw site.

But I plan to find out.

Over the next few weeks I will attempt to create a new sample site in Macaw and then port it into my usual text editor, sass, gulpjs workflow.  I am trying not to be too skeptical but my initial impressions make me doubt that it will in fact produce something I can use out of the gate. But here is hoping I will be proven wrong.

Controlling the Medium

As a musician I will often find myself obsessing about the details in the music I listen to.  Everything from the types of music to what I am playing them through and at what volume.  Consuming any art form is an act in of itself that can alter the perception of the work.  Looking at a beautiful van gogh painting in a poorly lit dingy cellar, or listening to a studio recording of charlie parker through a pair of 5 dollar casio speakers.  The atmosphere, technology, and quality of work created all go into the users experience.

Today’s websites afford certain luxuries that other art forms don’t have.  The ability to alter the content after it has been published, fix imperfections, or add mentions.  Even the technology itself allows us to tailor our content to the various web browsers and sizes our users will be using (although that task can sometimes be dizzying). But there are elements that we can’t control that can easily be forgotten among the array of items we try to account for.

I created a subtle and clean user interface for a client that wanted an administration console that felt professional and refined.  It included an array of gray tones and light lines cleanly dividing up various sections without drawing attention away from the well padding typography that stood as a large but light weighted Raleway.  But his initial feedback didn’t match what I had expected.  “It’s just a white page!” the client said in a somewhat surprised and disappointed voice.  Confused by his response I went to his office to see what he was talking about.  All I could think was maybe he was using an older version of IE that I hadn’t accounted for or was viewing it using some sort of corporate distributed version of firefox 2.0.  But that wasn’t the case… He was using Chrome and the latest version at that.  Instead he was looking at his windows 7 computer through what can only be described as an etch-a-sketch like Dell monitor, probably the cheapest option Dell offered in that resolution.

All of the shades of gray and clean lines were completely washed out and were only slightly improved by spending over 20 minutes fiddling with his monitors settings.  It wasn’t the first time this has happened to me, but it’s an aspect to designing for the digital screen I often forget. It’s easy to forget when working on a beautifully crisp and colorful 27 inch studio display that some people are viewing their computer through what is a very generously titled “computer monitor”.

I’m not suggesting there is something that can be done about this problem in all occurrences. But it’s worth reminding ourselves when we present our works that we do what we can to ensure they work in all environments. And when those environments are near the level of “broken” (cheap projector in a brightly lit room) that we take precautions to work around it whenever possible.

And friends, don’t let friends buy cheap monitors.

WordPress 3.9.1 Released

Improved visual editing

The updated visual editor has improved speed, accessibility, and mobile support. You can paste into the visual editor from your word processor without wasting time to clean up messy styling. (Yeah, we’re talking about you, Microsoft Word.)

Edit images easily

With quicker access to crop and rotation tools, it’s now much easier to edit your images while editing posts. You can also scale images directly in the editor to find just the right fit.

Drag and drop your images

Uploading your images is easier than ever. Just grab them from your desktop and drop them onto the editor.

Gallery previews

Galleries display a beautiful grid of images right in the editor, just like they do in your published post.

Do more with audio and video

Images have galleries; now we’ve added simple audio and video playlists, so you can showcase your music and clips.

Live widget and header previews

Add, edit, and rearrange your site’s widgets right in the theme customizer. No “save and surprise” — preview your changes live and only save them when you’re ready.

The improved header image tool also lets you upload, crop, and manage headers while customizing your theme.

Stunning new theme browser

Looking for a new theme should be easy and fun. Lose yourself in the boundless supply of free WordPress.org themes with the beautiful new theme browser.

Browse Themes

 


Under the Hood

Semantic Captions and Galleries

Theme developers have new options for images and galleries that use intelligent HTML5 markup.

Inline Code Documentation

Every action and filter hook in WordPress is now documented, along with expanded documentation for the media manager and customizer APIs.

External Libraries

Updated libraries: TinyMCE 4, jQuery 1.11, Backbone 1.1, Underscore 1.6, Plupload 2, MediaElement 2.14, Masonry 3.

Improved Database Layer

Database connections are now more fault-resistant and have improved compatibility with PHP 5.5 and MySQL 5.6.

New Utility Functions

Identify a hook in progress withdoing_action() and doing_filter(), and manipulate custom image sizes withhas_image_size() andremove_image_size().

Plugins and themes registering custom image sizes can now register suggested cropping points. For example, prevent heads from being cropped out of photos with a top-center crop.