Updates from greg Toggle Comment Threads | Keyboard Shortcuts

  • greg 4:34 pm on April 20, 2015 Permalink |

    Dear web designer, let’s stop breaking the affordance of scrolling 

    We’ve all seen it. You get on a website and there it is: a massive edge-to-edge picture, and it’s beautiful… It’s a huge (pun intended) web design trend and it looks like a lot of people love it.

    Dear web designer, let’s stop breaking the affordance of scrolling — User Experience Design (UX) — Medium

    Dear web designer, let’s stop breaking the affordance of scrolling — User Experience Design (UX) — Medium.

  • greg 6:44 pm on April 16, 2015 Permalink |

    Icon fonts vs. svg icons 

    We can all agree that using png sprites for icons is not the most modern (or best) way to present icons on the web. Png is a rasterized format which means that if you try to make the image (or icon) larger, the quality will become worse. When browsers started properly supporting @font-face and svg some people chose to use icon fonts to serve their icons, others chose svg sprites to do this. These methods share the big benefit of scalability. This matters because our websites get viewed on many devices and you want your icons to be crisp on every device, not just the ones you optimized for by hand. This post is intended to give an overview of these two methods and to explore the benefits and drawbacks of each method. At the end of this post you will hopefully have an understanding of both svg icons and iconfonts and you’ll be able to choose one of these icon delivery methods for your own projects.

    TL;DR: The comparison is very close, both have their big upsides and no real big downsides. I’d say iconfonts win because they’re a bit easier to use. Svg icons are a easier to position and manipulate. The code for this blogpost is on Github.

    via Icon fonts vs. svg icons | Donny Wals.

  • greg 8:10 am on April 16, 2015 Permalink |

    UI Patterns on Twitter 

  • greg 9:19 am on April 7, 2015 Permalink |  

    A few months ago, Chris Coyier shared his favourite CodePen demos right here on David’s blog. A while back David asked me to share some of my favourite pens too, so here are some of the demos that have blown my mind in the past few months as well.The main thing you’ll notice about my favourite pens is that most of them are done using SVG. SVG’s awesome animation capabilities combined with some really great animation libraries can yield some very impressive effects, as you’ll see.

    via Sara Soueidan’s Favorite CodePen Demos.

  • greg 3:45 pm on January 13, 2015 Permalink |  

    What WordPress Theme Is That?

    What WordPress Theme Is That is a free online tool allows you to easily detect what WordPress theme a site uses (including parent and child themes). Additionally, it will also detect what WordPress Plugins are being used.

  • greg 10:15 am on October 24, 2014 Permalink |

    The Three-Click Rule is an unofficial website navigation rule that suggests that users should be able to find any information within a website using no more than three mouse clicks.

    Many user experience (UX) professionals believe that users of a site will become frustrated and leave if they cannot find desirable content within the three clicks. Therefore, if a website follows this three-click rule, navigation is more efficient.

    Read the whole glorious thing…  User Experience Myth Or Truth: The Three-Click (Or Tap) Rule.

  • greg 11:05 am on October 23, 2014 Permalink |  

    Nice collection of IFTTT tactics for automating the socials and such…

    Social Media Automation :: Best IFTTT Recipes for Social Media Managers.

  • greg 7:54 am on October 10, 2014 Permalink |  

    “Can I use” provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

    Can I use… Support tables for HTML5, CSS3, etc.

  • greg 9:31 am on September 18, 2014 Permalink |
    Tags: SASS,   

    Sass for WordPress Developers 

    There are many benefits of Sass for WordPress developers. You’ve probably heard many arguments for using a pre-processor by now. CSS pre-processors provide the opportunity for better code organization by using partials and nesting styles. Pre-processors help developers style faster by writing mixins and functions. Pre-processors also allow us to write more maintainable, scalable code with logic and variables.

    read all about it @ Sass for WordPress Developers.

  • greg 8:00 am on September 9, 2014 Permalink |
    Tags: ,   

    How do you identify a browser bug? 

    Your new site is not behaving how you’d expect – but how do you know if the bug is hidden in your code, or if it’s a browser issue? Creative Bloq asked the experts.

    Check out How do you identify a browser bug?

  • greg 10:17 am on August 28, 2014 Permalink |

    Unleash the Power of the WordPress Shortcode API 

    WordPress introduced the Shortcode API in its version 2.5. This API allows developers to add some more or less complex features in their plugins or themes without the user having to insert any HTML code.

    The advantage of the Shortcode API is that developers do not need to use regular expressions to detect if the user included their shortcodes into their posts: WordPress automatically detects the registered shortcodes.

    In this tutorial, we will learn how to use the Shortcode API. We will create our own shortcodes, see how to use classic and unnamed attributes and also how to handle content.

    Get ready to …. Unleash the Power of the WordPress Shortcode API.

  • greg 9:19 pm on August 14, 2014 Permalink |  

    Using Sass to Build a Custom Type Scale with Vertical Rhythm 

    One way to achieve visual consistency in web design is to use a vertical rhythm. For a website, this would mean that no matter what font-size any text element is, its line-height is always an even multiple of a consistent unit of rhythm. When this is done precisely, you could put a striped background behind your page and each text block (paragraphs, headings, blockquotes, etc) would line up along the lines in that grid.

    As you could imagine, setting this up by hand would require a lot of math and typing. If you want to change the proportions of that grid responsively, you’ll redo that work for every breakpoint. Sass, as you might expect, provides a great toolbox to automate all that work and generate a custom type scale with consistent vertical rhythm more easily.

    I’ll start off by admitting that there are already some good Sass plugins that help build a custom type scale with consistent vertical rhythm. If you’re just looking to grab a pre-built chunk of code, try Typesetting, Typomatic, or Typecsset.

    This one is really good. Took a  little time to read through – as i’m not a super trained high-skill “artist” who wears a beret.


    check out – Using Sass to Build a Custom Type Scale with Vertical Rhythm.

  • greg 5:55 pm on June 24, 2014 Permalink |
    Tags: , ,   

    Checking Media Queries With Javascript 

    With the web being used on so many different devices now it’s very important that you can change your design to fit on different screen sizes. The best way of changing your display depending on screen size is to use media queries to find out the size viewport of the screen and allowing you to change the design depending on what screen size is on.

    read the whole article at Checking Media Queries With Javascript.

    personally, i think this is possibly an excellent way to inject only the needed javascript libraries according to their usefulness. If a particular feature ability isnt used in a certain context, say a Revolution Slider in desktop which isn’t used in tablet or mobile… don’t load that library unless you have to!

  • greg 7:53 am on June 24, 2014 Permalink |

    UX designer Curt Alredge wanted to test if the assertion made by Aubrey Johnson was true:

    Hollow icons create more work for users and ultimately create cognitive fatigue

    Icon differences

    Icon Recognition Test is a web app game that will test your skills in identifying hollow and non-hollow icons.

    Research has shown that users begin to map the meaning of icons to their positions in the interface – was a line from Alredge’s article which I agree with mostly, especially as I took the test. If an icon appeared nearby an item I was looking for, I would tend to look for the next icon in search near there. If it was close by, quicker correct answer.


  • greg 10:17 am on June 6, 2014 Permalink |  

    There are many stock art sites out there, from larger companies where illustrations is only part of their offering, to smaller sites focusing purely on illustrators – anything from a tiny handful to a more extensive roster.

    Check out this list of some of the best and most popular sites for you to check out.

    The 13 best places to download stock art online from Creative Bloq

  • greg 8:37 am on June 4, 2014 Permalink |

    Is space above the fold still valuable in 2014?

    At the end of 2013, Peep Laja spoke at SearchLove about the Principles of Persuasive Web Design. He had observed that despite it being 2013 (now 2014) and us living in a much more scroll-oriented world, content placed above the fold was still grabbing 80% of our attention.

    read up  – Life Above and Beyond the Fold – Moz.

  • greg 8:12 am on May 23, 2014 Permalink |  

    Curated resources for everything design related

    oozled brings together 534 curated resources in 41 categories.

    check out oozled.

  • greg 8:59 am on May 1, 2014 Permalink |  

    Responsive Email Design | Campaign Monitor 

    If you read your email regularly using an Internet-enabled phone, you probably know that it’s an experience that can swing from awesome to awful. While an email newsletter can look superb in the inbox, when squeezed onto a small screen, it can become absolutely unusable, with small fonts, narrow columns and broken layouts being common issues.

    In this guide, we’ll look at why designing for mobile has become a necessary skill for email designers, cover the fundamentals of designing and building a mobile-friendly email and back it all up with some neat tips and techniques. We’ll assume you know a little about coding HTML for email, but if not, we’ve also got a couple of great guides to get you started.

    Responsive Email Design from Campaign Monitor.

  • greg 8:51 am on April 18, 2014 Permalink |
    Tags: ,   

    There isn’t just one way to animate SVG. There is the <animate> tag that goes right into the SVG code. There are libraries that help with it like Snap.svg or SVG.js. We’re going to look at another way: using inline SVG (SVG code right inside HTML) and animating the parts right through CSS.

    read all about it Animating SVG with CSS | CSS-Tricks.

  • greg 11:25 am on April 10, 2014 Permalink |  


    BuiltWith Technology Lookup.

    Seriously – extremely useful tool. I absolutely used this tool today to determine what platform a client site was built with… 

Compose new post
Next post/Next comment
Previous post/Previous comment
Show/Hide comments
Go to top
Go to login
Show/Hide help
shift + esc