ux Archives - circlecube

URL Structure FTW – Pretty and Readable Permalinks

Posted on July 31, 2015March 21, 2016 by Evan Mullins

I noticed that the clearleft.com site has very clever url structure. You can read the urls like a sentence. Like their about section is “/is” and their capabilities is ‘/does’, and their portfolio section is “/made” , so clearleft.com made code for america. Check the urls listed here and you’ll notice that they read like a sentence. These urls were made intentionally for humans!

Although they are missing an opportunity I think, their blog is clearleft.com/thinks/, but then they just use a post id for the url. http://clearleft.com/thinks/298, I was hoping it’d be clever. If it had the title of the post, it’d make more sense.

Something to think about as we create sites.

I then looked around a bit and found a talk about some of this, here it is and the relevant bits:

If you really want to take this content-first approach to its ultimate limit, something I like to do, if I ever get the chance to do this on products is I like to start with the URLs; really bring it down to the most basic webiness of what you’re building is, what is the URL structure, which is something I think people don’t think about enough. And yet, URLs are so, so important. Some people treat them like an implementation detail of the web, like, “oh yeah, we’ve got native, we’ve got the web, web has URLs, whatever,” whereas I think it’s the most powerful part of the web. In fact, once you have the name of something and once you have the address that you can pull up on any device, as long as it’s connected to a network, that is amazing. That immediately makes it part of this huge, big, chaotic mess of a web. It was Tim Berners-Lee who said, when you have a URL, it’s part of the web, it’s part of the discourse of humanity, this giant Library of Alexandria that we’re all collectively building.
URL design as a skill is something I feel we’re losing, which is a real shame because I will admit, I’m a URL fetishist. I love a good URL. But I think, rightly so, because they are this fundamental unit of the web. Kyle Neath who works at GitHub—where they have beautiful URLs—he said:

URLs are universal. They work in Firefox, Chrome, Safari, Internet Explorer, cURL, wget, your iPhone, Android and even written down on sticky notes, they are the one universal syntax of the web.

That’s so important to remember: written down on sticky notes, written on a Post-it. They’re for humans. URLs are for humans. Yes, they’re used by machines to fetch a resource, but they’re very much for humans to use. URLs should be hackable, guessable, readable.

Adding Viewport Meta Tag via WordPress Theme Functions

Posted on January 25, 2013August 29, 2014 by Evan Mullins

Add the viewport meta tag with a WordPress hook via your theme’s functions file to allow responsive web design and mobile-friendly themes

With all the responsive web design activity over the past few years, I hope that any theme or site we work on we’re able to make responsive to some extent. An important part of making a web site responsive is adding a viewport meta tag to your html. Without explicitly stating our viewport, the mobile browsers will scale down the website to fit into their ‘viewport’. This is a good thing, since if it was a full website and the browser didn’t scale it down, you’d only see the top left corner, or some small section of the site. This viewport was introduced by apple for iOS and has spread to most mobile devices since. There are viewport properties or parameters we can set with this meta tag such as width and scale and can even use some device aware variables (like ‘device-width’) to set these values.

A WordPress Meta Viewport Hook

I usually end up using the following hook to add a viewport meta tag to my head in wordpress. I set the viewport width to match the width of the device. Then I set the initial scale to 1. Some go and set the maximum-scale to 1 as well. This would prevent users from zooming in on your site. I advocate that we should allow users to zoom if they wish since it is a gesture they may be used to and may still need (no matter how nice your RWD is, they may need/want to see it bigger). RWD is about giving the user a better layout for whatever device they are on, not restricting how they view it.

[cc lang=”php”]
/////////////////////////////////////////////////////////////////////////////////
// Add viewport meta tag to head
//
function viewport_meta() {
?>

A More Interactive Portfolio

Posted on March 23, 2011August 29, 2014 by Evan Mullins

I think a portfolio is something that should be very interactive and intuitive. Check out what that has led to: circlecube’s interactive pog portfolio. I’ve been toying with trying to get something that was fun to look at, but also showed some work. Here is a first look at my Interactive portfolio of work which includes physics simulations and many options to play with the presentation of the body of work. Showing it to a friend he said it made him think of pogs (since the thumbnails are round and moving everywhere).

Well, enough, I’ll let you see what you see… Interactive POG Portfolio

The details

Well, if you’re interested, this is the same portfolio that is listed statically on my website. That’s because I’m using amfphp to read my wordpress database and get the custom post type of portfolio and access all the tags, images and details of each portfolio item. I’m using TweenNano from greensock for some of the motion but all the physics is coded in as3. I’m using the slider and switch from Nick Jonas.

Enjoy playing with the settings!

Now I’m thinking of other ways to implement it: specifically hooking into API services like last.fm, dribbble or twitter. Or rebuild it with jQuery and html5!

Style vs Design

Posted on December 10, 2010August 29, 2014 by Evan Mullins

So what’s the difference between design and style?

I’ve had to explain that to quite a few clients that think all they need is a good looking website and they will make millions. It has to work and the design has to (subconsciously) show users how it works and it’s a perk if it looks good (style).

I’ve been thinking about this a lot and about what a web designer should focus on. Is it all about functionality of a site and making everything “work” or is it all about making it look “pretty” and fresh. Facetious I know, obviously it sits happily in between the two somewhere. But where is the question. I love reading articles and stumbled on this (apparently 2005) gem for the first time recently: Jeffrey Zeldman’s Style vs Design. Don’t ask me how I haven’t come across it before, but it’s awesome and it hit the nail on the head for me so I thought I’d share.

Web designers need to not only make a site work, but make it appealing to the intended audience. What looks good on a website for one audience won’t necessarily apply to another.

The web used to look like a phone book. Now much of it looks like a design portfolio. In fact, it looks like the design portfolio of 20 well-known designers, whose style gets copied again and again by young designers who consider themselves disciples.
…
I worry because young designers who confuse style with design are learning to copy their heroes’ technical tricks and stylistic flourishes, but not necessarily learning to communicate in this medium.

It is cool to make a new effects and transitions with css3 and the like, but let’s not add these styles to a design that doesn’t call for them. We should ask each client/project what their needs and audience is and work on solving that problem aesthetically for that situation.

The Magic Reset Button

Posted on July 22, 2010August 29, 2014 by Evan Mullins

This magic button is almost always forgotten, but 90% of the time when you don’t see what you think you should be seeing on a webpage, the culprit is the same: cache.

Imagine: a few hours after discussing some edits to your site with your trusted designer. Your designer says he just updated the graphics or layout of your website and you’re excited to see it. You go to your favorite browser (which I hope is not IE), and type in your url. “Hm, that’s funny, I thought they said it was updated, do they think every day is April Fools or something?!” Then after an email and a phone call they confirm that they did update the page, you go back to it once again and still don’t see anything different! By this time you are wishing you could reach through the phone and smack somebody. You look on a different computer and see the update, and are beyond confused when you go to your computer and still don’t see the update.

Eventually, the designer tells you to try refreshing or clearing your cache. That sounds like a good plan, but what the heck is he talking about? Cache is one way smart guys have determined the internet can work better and faster. Essentially when your browser (for example Firefox, Safari or Internet Explorer) views a webpage it copies it from the internet to your computer. Then if you view that page again your browser remembers that it’s seen it recently, so it displays your local copy rather than connect with the server and download a new copy every single time. Especially with linked images and files such as style sheets and scripts. This helps you see the internet and websites faster. This is a good thing except when you want to see the most updated version in your browser.

There are however a couple ways you may tell the browser to forget the cached version of the page and load it all fresh from the server. The standard shortcuts are (windows) ‘ctrl + F5’ and (mac) ‘cmd + R’. You can also go to your browser options and delete browser history, but that will clear all your cache and not just the page you are on. This is almost always the case when you’re not seeing what you should be seeing on a site. So next time it happens, take a moment and hit F5 to save a headache.

Better jquery mega-menu tutorial

Posted on July 14, 2010August 29, 2014 by Evan Mullins

My earlier simple mega menu implementation post displayed some simple css and jquery to explode a standard navigation menu into a mega-menu… I’ve made it even better. My biggest issue with that implementation was that it did not keep the order like you’d expect. It read left to right in columns rather than down each column. In the example you can see the first column of three would read from the top: a, d, g, j… this could potentially be confusing. So I wanted to update it to keep the order better and just stack the columns of elements rather than the elements themselves.

I used some different jquery to execute this. First we walk through the menu elements and calculate which column they should be in. We basically map that element’s (li)index to the column it should be, some big math. Luckily I had some experience from actionscript in my arsenal doing just that, so porting the function to javascript I was ready to go. If your number X falls between A and B, and you would like to convert it to Y which falls between C and D follow this formula: Y = (X-A)/(B-A) * (D-C) + C. Plugging this function in and cancelling out the zeros and adding some rounding to get integers I got: Math.floor((liindex / $total * $cols)+1). Using this I added a class to each ‘li’ designating which column it should be in, and then used wrapAll to wrap them into column divs. Very simple and a much better implementation overall anyways. Better code, better user experience… what more can you ask… so here’s the example and jquery code. I’m thinking I should make this into a jquery plugin or something, any thoughts?

See the mega menu in action

Javascript code

[cc lang=”javascript”]
jQuery(document).ready(function() {
//clean up the row of the mega menu. add css class to each element on bottom row.
//only if more than 7 elements. if more than 16, mm-3
jQuery(‘#nav li ul’).each(function(ulindex, ulele){
$total = jQuery(this).children(‘li’).size();
if ($total <= 7) { jQuery(this).addClass('mm-1'); } else { $cols = Math.floor(($total) / 8) + 1; $remainder = $total % $cols; $rows = Math.ceil($total / $cols); jQuery(this).addClass('mm-' + $cols + ' total-' + $total + ' rem-'+$remainder );jQuery(this).children().each(function(liindex, liele){ //alert("total: "+$total+", remainder: "+ $mod+", ulindex: "+ulindex+", liindex: "+liindex); //If your number X falls between A and B, and you would like to convert it to Y which falls between C and D follow this formula: Y = (X-A)/(B-A) * (D-C) + C. jQuery(this).addClass('col-' + Math.floor((liindex / $total * $cols)+1) ); if( (liindex+1) % $rows == 0) { jQuery(this).addClass('last'); } });for (var colcount = 1; colcount<= $cols; colcount++){ jQuery(this).children('.col-'+colcount).wrapAll('

‘);
}
}
});
});
[/cc]

css

[cc lang=”css”]
ul { list-style:none; }

/********** < Navigation */ .nav-container { float:left; background: #398301; margin: 10em 0; width: 960px; } #nav { border: 0px none; padding:3px 0 2px 44px; margin:0; font-size:13px; }/* All Levels */ #nav li { text-align:left; position:relative; } #nav li.over { z-index:999; } #nav li.parent {} #nav li a { display:block; text-decoration:none; } #nav li a:hover { text-decoration:none; } #nav li a span { display:block; white-space:nowrap; cursor:pointer; } #nav li ul a span { white-space:normal; }/* 1st Level */ #nav li { float:left; } #nav li a { float:left; padding:5px 10px; font-weight:normal; color: #fff; text-shadow: 1px 1px #1b3f00; } #nav li a:hover { color: #fff; text-shadow: 1px 1px 3px #ccc; } #nav li.over a, #nav li.active a { color:#fff; }/* 2nd Level */ #nav ul { position:absolute; width:15em; top:26px; left:-10000px; border:1px solid #1b3f00; border-width: 0 1px 2px 1px; background:#398301; padding: 6px 0 6px; } #nav ul div.col { float:left; width: 15em; } #nav ul li { float:left; padding: 0; width: 15em; } #nav ul li a { float:none; padding:6px 9px; font-weight:normal; color:#FFF !important; text-shadow: 1px 1px #1b3f00; border-bottom:1px solid #1b3f00; background:#398301; } #nav ul li a:hover { color:#fff !important; text-shadow: 1px 1px 3px #ccc; background: #2b6301; } #nav ul li.last > a { border-bottom:0; }
#nav ul li.last.parent > a { border-bottom:0; }

#nav ul li.over > a { font-weight:normal; color:#fff !important; background: #1b3f00; }
#nav ul.mm-1 { width: 15em; }
#nav ul.mm-2 { width: 30em; }
#nav ul.mm-3 { width: 45em; }
#nav ul.mm-4 { width: 60em; }
/* 3rd+ leven */
#nav ul ul { top:-6px; background: #1b3f00; }

/* Show Menu – uses built-in magento menu hovering */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:14em; }
#nav li.over ul ul { left:-10000px; }

/* Show Menu – uses css only, not fully across all browsers but, for the purpose of the demo is fine by me */
#nav li:hover > ul { left:0; z-index: 100; }
#nav li:hover > ul li:hover > ul { left:14em; z-index: 200; }
#nav li:hover ul ul { left:-10000px; }
[/cc]

Download

Visit this demo page and view source or save as…

A simple mega menu implementation with CSS and jquery

Posted on July 12, 2010August 29, 2014 by Evan Mullins

I’ve been skinning quite a few ecommerce sites with the magento platform and wanted a simple way to explode the navigation menus. Some sites end up getting a long list of categories and sub-categories, so I wanted to do a mega-menu style navigation. One way to do it was to rewrite the html code for the navigation and pop each column into another nested unordered list. I’m not a fan of doing this because one – I didn’t want to manipulate the html. I like the simplicity of ul navigation with a clear flat list of li elements. Of course for nested sub-navigation any li can contain another ul. I wanted to just use some css and maybe javascript to visually accomplish the same thing. I also wanted it to be portable, so I could take it and use it on a wordpress install or even a plain html site. I went to my favorite: jquery. I knew there was a likely plugin out there already that would do something similar, but nothing after my initial search, but I realized that it was a simple procedure and mostly accomplished with some css.

I’ll walk you through the process here and let you inspect the code yourself and see it in action on the demo page. Assign each ul to be a default width of 15em, then each li element we float:left and also give it a width of 15em. This way we can change the ul width to 30em and automatically I have 2 columns! Assigning the nested ul a specific width according to it’s class is done through css, mm-0 will be 15em and incrementally each next one will be 15em more. mm-1 is 30 and mm-2 is 45. Then we use jquery to determine the number of elements in the list and assign it a class accordingly. This involves some math and some preferences. Using the magic ui number 7, I determined that a menu with more than 7 elements should explode into multiple columns. So anything less than or equal to 7 I assign the class ‘mm-1’ which in the css sets the width to the standard 15em (ie 1 mega menu column). More than 7 should pop into columns no more than 8 tall. So dividing the total by 8 will give us the number of columns we want. We’ll add a class of mm-x, where x would be the number of columns. And the li elements will float to the left and fill in the space in columns.
One specific issue is the last element in the menu, sometimes we need to style that element differently. I’ll loop through each child of the nested ul element and if it is on the bottom row apply a class of ‘last’. But this was a little tricky in calculating which would be last because were never sure how many elements there will be or how many columns. I just used the remainder after dividing the total by the number of columns, then if the remainder could be used to know which elements are on the bottom row.

OK, now that that’s out of the way, let’s look at the code.

HTML

This I won’t show, you can inspect the source of the demo if you wish to see it, it a basic nested collection of unordered lists. It’s the standard that is created by magento, wordpress and most other CMS platforms.

CSS

[cc lang=”css”]
html, body { margin:0; padding:0; }
ul { list-style:none; }

/********** < Navigation */ .nav-container { float:left; background: #186C94; margin: 10em 0; width: 960px; } #nav { border: 0px none; padding:3px 0 2px 44px; margin:0; font-size:13px; }/* All Levels */ #nav li { text-align:left; position:relative; } #nav li.over { z-index:999; } #nav li.parent {} #nav li a { display:block; text-decoration:none; } #nav li a:hover { text-decoration:none; } #nav li a span { display:block; white-space:nowrap; cursor:pointer; } #nav li ul a span { white-space:normal; }/* 1st Level */ #nav li { float:left; } #nav li a { float:left; padding:5px 10px; font-weight:normal; color: #fff; text-shadow: 1px 1px #111; } #nav li a:hover { color: #fff; text-shadow: 1px 1px 3px #ccc; } #nav li.over a, #nav li.active a { color:#fff; }/* 2nd Level */ #nav ul { position:absolute; width:15em; top:26px; left:-10000px; border:1px solid #104A65; border-width: 0 1px 2px 1px; background:#186C94; padding: 6px 0 6px; } #nav ul div.col { float:left; width: 15em; } #nav ul li { float:left; padding: 0; width: 15em; } #nav ul li a { float:none; padding:6px 9px; font-weight:normal; color:#FFF !important; text-shadow: 1px 1px #111; border-bottom:1px solid #104A65; background:#186C94; } #nav ul li a:hover { color:#fff !important; text-shadow: 1px 1px 3px #ccc; background: #135575; } #nav ul li.last > a { border-bottom:0; }
#nav ul li.last.parent > a { border-bottom:0; }

#nav ul li.over > a { font-weight:normal; color:#fff !important; background: #104A65; }
#nav ul.mm-1 { width: 15em; }
#nav ul.mm-2 { width: 30em; }
#nav ul.mm-3 { width: 45em; }
#nav ul.mm-4 { width: 60em; }
/* 3rd+ leven */
#nav ul ul { top:-6px; background: #104A65; }

/* Show Menu – uses built-in magento menu hovering */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:14em; }
#nav li.over ul ul { left:-10000px; }

Javascript

Don’t forget to include jQuery (I prefer using the google hosted version at http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js)
[cc lang=”javascript”]
jQuery(document).ready(function() {
//clean up the row of the mega menu. add css class to each element on bottom row.
//only if more than 7 elements. if more than 16, mm-3
jQuery(‘#nav li ul’).each(function(ulindex, ulele){
$total = jQuery(this).children(‘li’).size();
if ($total <= 7) { jQuery(this).addClass('mm-1'); } else { $cols = Math.floor(($total) / 8) + 1; $remainder = $total % $cols; jQuery(this).addClass('mm-' + $cols + ' total-' + $total + ' rem-'+$remainder );jQuery(this).children().each(function(liindex, liele){ //alert("total: "+$total+", remainder: "+ $mod+", ulindex: "+ulindex+", liindex: "+liindex); if( liindex + $remainder >= $total || $remainder == 0 && liindex + $cols >= $total ){
//alert(“total: “+$total+”, remainder: “+ $remainder+”, index: “+liindex);
jQuery(this).addClass(‘last’);
}
});
}
});

});
[/cc]

See the demo in action

Web Design and Carpenters

Posted on May 17, 2010March 10, 2016 by Evan Mullins

Does your website pass the big bad wolf test?

I’ve been building websites for years and always enjoy the immediacy of designing and coding a site and having it live relatively quickly. Compare web production to the construction industry where projects span out years and even decades in some cases. Even though the web does foster a faster deliverable, there are many lessons from the physical world that help us better understand and manage web projects.

What is the point of a building? It’s a roof over your head, but more importantly it’s a location. People visit and expect it to be there next week. A website is a location as well in fact url even stands for Uniform Resource Locator and a domain name is your address. There are whole sciences about how to attract people to a certain location online and keep them coming back for more. For those with a brick-and-mortar business a website is a portal or even a drive-thru window to permit easy shopping access and a gallery to showcase your products. It allows your visitors to browse and interact with your products or content from their own home. A physical store that is confusing and messy won’t sell much, but clean it up and get some Feng Shui master in there and the same space can be transformed into a pleasant, functional and usable location. So from the tangible world we can learn that we want a location that is memorable, a layout that is intuitive and agreeable and a presence that is easy and pleasing to our visitors.

Building a website also follows the same process as building a house?

First a house takes planning and preparation. It’s best to make sure you understand what it is you want in your house, what materials will be used and how much it will cost. Long ago, construction crews figured out it cost way to much time and money to change projects on the fly and now require them to be nailed down even before groundbreaking. Web designers have not all learned this lesson yet and have been lenient with demanding a spec. Some clients think they can say “I want a website for x” and then expect the designers and developers to telepathically know all the elements of the site and build it correctly the first time. I’ve worked for so-called visionary gurus and they wanted a new website and didn’t take the time upfront to plan the site and subsequently I redesigned their website daily! Trust me, that kept the site from being functional or usable.

Building a house takes a construction crew, with a website it may be considerably less people, but it does help to have a few people each with their expertise. The main goal here is to make sure you’ve got someone who can handle each piece of the project. An architect will draw up the plans for your house after the requirements are discussed. So these blueprints or wireframes as we call them in web design contain the details needed for the project to be completed. They are written with all the policies and codes in mind so that in the end the structure can be valid, functional and above all- usable.

The website, like a house, sometimes isn’t even recognizable until the very final stages of the project. We don’t complain to the foreman that the walls aren’t the right color when the windows aren’t yet hung and the drywall mud is still wet. When constructing a house first the foundation is set and everyone knows that a weak foundations will ruin the whole project from the get go. Once the foundation is solid the framing begins, and although while the house is being framed there are holes in the house all will turn out fine in the end. Looking at a website before it’s actually complete when even possible can be a very scary thing: things don’t fully connect, layouts are screwy, links may be broken and graphics are totally wrong or missing, but all will turn out in the end as long as the construction crew know what they are doing and the client let’s them focus on doing it.

Once the house is up and walls are in and there’s a roof overhead is when things actually start to look right. Now is the time to be focused on the content of the site and putting everything in the right place. Get the walls the right colors and eventually even hanging pictures and accents in each room. Final tweaks to the place or feel of the place, but now is not the best time to start thinking – ‘What if we moved the kitchen to the basement!’ or ‘Oh, We forgot the elevator/fireplace!’. While these drastic changes are likely possible, they will have more of an after-thought and will be either very difficult or very expensive to correctly put into play, or both.

Once last thing to say in this endless analogy comparing a brick and mortar construction to a website project, what about when it’s “done”. When the house is done and the dust has settled and you’ve moved in. There are always things that still need doing: tweaks, fixes, customizations, just plain maintenance, appliances break and plumbing clogs. Not to scare anyone from the american dream, but it happens, even online. Plugins need updating, security holes are found, bugs come up, things need updated. It happens. The trick is to expect things to happen. For a house you can find any number of Home Warranties that protect you from the sudden costs of repairs. Most web design shops will have a similar maintenance plan that warrants a certain amount of work in a certain amount of time to account for such surprises.

And finally the big bad wolf test. Would your website survive a big bad wolf coming to blow your site down? Make sure that whoever is building your website knows enough to not build your house out of straw or sticks. They need to be up on current technologies and you need to be confident in their ability to give you a valid site that can withstand any visitors at your very own online location.