Kyle Larson Web Design Articles » Blog

How SimCity Taught Me to Design Websites

Kyle Larson — Sun, 17 Feb 2013 23:50:20 +0000

The fun I had putting my passion and energy into playing the game SimCity 2000 as a kid explains why I love building websites. When SimCity 2000 came out I purchased a copy for my Mac and was immediately hooked. The game was fun to play, required imagination, and was a perfect intersection of my interests in design, strategy, and planning. I spent hours designing all kinds of different cities, experimenting with different layouts, reading gigantic manuals on strategy, and discussing the game with friends. I got a chance to test out a beta of the new SimCity game coming out this year and it made me realize that the skills I learned playing the game translate perfectly into my real-world job, designing websites.

One of my original cities from 1997.

Start with a Goal

The first key to building a successful city is knowing what your goal is. Do you want a giant metropolis, an entertainment destination, a giant bank account, or the happiest sims in the world? You can have multiple goals, but you should decide what is most important to you for the inevitable time when you’ll have to make a tough decision (do you sacrifice some monthly income to improve pollution and make people happier?).

This is exactly how you should begin your web design process. Decide what your site’s primary goal is and what you’ll need to provide to your users to achieve that goal. You should evaluate anything else you build into the site (or product) and make sure it supports your goal instead of holding you back.

Plan Ahead

In SimCity and web design, planning ahead is crucial to achieving your goal. Growing a city requires close attention to a variety of factors including: the distance from your sims to city services, a logical network of roads, and the correct ratios of housing and employment. Good web design begins with gathering content and deciding how it should be organized. Starting with a good foundation makes it easier to scale without having problems. If you don’t plan these things out, you’re going to spend a lot of time and money trying to fix them later.

An organized city.

Get Feedback and Optimize

SimCity is all about making decisions based on the feedback that the game provides you. It is filled with advice for you to leverage including: a team of advisors, charts, graphs, overlays, and the monthly newspaper. You can also learn a lot just by watching how your city develops and how your sims behave. This is where the game really gets fun. With your goal in mind, target something that you’d like to improve and start to experiment. You’ve got all the data immediately available to decide what is successful and what to continue tweaking.

Managing a website works almost exactly the same way, you just have to set up the tools to provide feedback. These items can include: Google Analytics for statistics, Optimizely for A/B testing, Usertesting.com for visual feedback, Crazy Egg for data mapping, and online forms for conducting user surveys. Once you have all this data coming in you can start tweaking things just like you did in SimCity and see what works.

Don’t be Afraid to Adjust

Part of any good design process is being willing to acknowledge when something isn’t working and change it. In SimCity, the bulldozer tool is your best friend. You’ll need to remove polluting buildings, fix roads with traffic issues, and clear space to fill in things you might have missed along the way. The web works in a similar way. Something may have seemed like a great idea to begin with, but if it’s getting in the way of your primary goal you’ll need to reassess. Don’t be afraid to cut a feature, simplify a design, or re-write content. Often cutting can be just as important as building.

Connect to Your Neighbors

In SimCity you can connect your roads to your neighbors so people can move between cities and strike deals to share resources. It’s important to realize you can’t be the best at everything and that’s why you need to work with your neighbors. Keep your focus on your primary goal and don’t waste your time trying to build something that you can get for a small fee. In web design these things could include textures, photography, copywriting, code snippets, scripts, and plugins. Web design is also about community. Share your findings on social media, blogs, forums and keep the conversation going. The community makes everyone’s work stronger.

Finding a Better Web Design Process

Kyle Larson — Mon, 10 Dec 2012 07:02:30 +0000

Creating a successful website is all about process. A good design process helps you get the ideas out of your head and into a format that can help you make logical design decisions. Breaking the process down into chunks lets you focus on the most important choices first, without getting bogged down in minutia like using a lighter shade of blue, finding the perfect stock photo, or increasing the size of a logo. This article will walk through my approach to the web design process and how it can be used to create a better website.

Step 1: Content

The first step of any good website process absolutely needs to be getting content! This content includes analyzing an existing site, surveying stakeholders, doing user research, and much more. We’re going to take this content and turn it into a fully-functional design. Starting the process without it is like building a house without a foundation; it may end up looking pretty, but it’s not going to take long before it crumbles down.

This article assumes you’re starting with this content and here are some resources for getting that done:

Content Strategy for the Web, 2nd Edition – Amazon
Starting Out Organized: Website Content Planning the Right Way – Smashing Magazine

Step 2: Project Analysis

After you’ve got all your content, the next step is to take it and break it into pieces that will help guide your architectural and design decisions.

These design items include:

A list of user goals – What are users trying to accomplish?
A list of stakeholder goals – What do the stakeholders in the project want to accomplish?
Brand guides and styles – Is the site professional, fun, artistic, modern, or rugged?

Your architectural pieces will include (Visio & Omnigraffle are useful for site maps and diagrams):

A site map – How will the user navigate through the site? How can content be logically grouped?
User flow diagrams - What steps will the user take to accomplish their goals?
Back-end requirements – What technologies will be used to make the site functional?

Step 3: Sketching (Low-Fidelity)

Once I have all the requirements, content, and architecture defined for a website, I start sketching. I think this is an extremely important part of the process because it lets you create a bunch of layouts very quickly. If you went straight to Photoshop or another mock-up tool you’ll tend to waste time not focusing on the essentials. My goal is to ‘fail fast’ in the early stages of a design, before the productivity and mental costs of failing are much higher. You’ll find that each time a design doesn’t work, you learn something that improves the subsequent designs.

When doing your first sketches, it’s important to only focus on organization and placement of key content, not on the quality of your sketch. The goal isn’t to present these first sketches to stakeholders. It may be helpful to use a whiteboard or other large-tipped marker to prevent being tempted to add too much detail. Consider sketching any significant sections of your site, not just the homepage.

Build > Test > Refine

Every piece of the design process follows the same pattern: Build, Test, Refine. Our goal is to start working with our ideas in this cycle as fast as possible. Sketches are very fast to build, provide enough information to visually test, and require minimal effort to refine. To test your sketches, focus on what you learned from the content discovery and make sure the layout accomplishes user and stakeholder goals.

Once you’ve completed your discovery by sketching, you can either create a slightly more detailed sketch to show others involved in the project or you can take the concept to a higher-fidelity.

Step 4: Choose a Path

Many designers have a favorite process that they swear by to continue the design from here. They may suggest jumping into Photoshop or Illustrator, working in code, or creating wireframes. I think all of these are valid next steps, but it’s important to look at the big picture and decide what is going to be most useful for the project you’re currently working on. Don’t follow design dogma. I’ll outline a few options for your next step and when I use each of them.

If you’re working with many stakeholders and need stages of approval, it will make sense to create a medium fidelity mockup from your sketches. Typically, this is a good idea and can save you a lot of headaches down the road. By taking this approach you can apply the build, test, and refine process without being locked in to a particular design. If you’re working on a small site, a very minimally designed site, or don’t need buy-off you may choose to go straight into your high-fidelity design.

Medium-Fidelity

A medium-fidelity design takes our initial sketches and gives them some additional definition. In this stage, don’t focus on the colors, textures, and pixel-precision of the final site. Just like the sketches, this stage allows further refinement without investing so much time that it’s painful to have some failures to learn from. Medium-fidelity mockups are extremely useful for getting buy-off from stakeholders and conducting user-testing. They can be created using a tool for a static layout, by writing code to allow functionality testing, or both.

Wireframes and task flows allow you to build an accurate representation of a site in a short amount of time. These can be shown to users and stakeholders to get immediate feedback without loosing them on emotional reactions they may have to how something is designed. Some tools you may find useful in this process are Visio, Omnigraffle, and Balsamiq. I’ve had a lot of success using Balsamiq for this process.

Medium-fidelity designs can also be created in HTML, CSS, and simple JavaScript to give the feeling of actually using a website. One benefit of this method is that you’ve already started a code-base that you can expand on once you’re in the final stages of building the site. If you’re building a responsive website (a site that adapts to various screen sizes), this can be extremely useful for testing before having a lot of complex code. If you’re interested in user testing, you could use a service like usertesting.com to get immediate feedback.

High-Fidelity

The final stage of the design process is creating the high-fidelity design. This design is the culmination of all the research, building, testing, and refining that you’ve done. In this stage, you have the option of creating your design in a graphics program or going straight to code. I find that if I’m doing a very complex site, with a lot of textures and graphics, that it’s easier to make at least part of the template in Photoshop so I can write my code to the design. This way I don’t have to do as much code clean-up from my experimentation with styling. A less complex design or a responsive site lends itself to designing in code because it’ll typically be faster to reach the testing phase.

Various Tips

Having problems with clients requesting ‘Frankenstein’ designs (combining elements of multiple designs into one)? Instead of providing different high-fidelity designs, get medium-fidelity mock-ups in their hands to make important decisions before they get emotional about design elements.
Make sure to pass along any technical requirements, if you’re working with a developer or server team, so they can work on them in tandem with your design process.
Always get all your ideas out of your head and store them somewhere (paper or electronic). They’re much easier to test this way and you won’t forget something important.

iPhone 5 Web Design

Kyle Larson — Thu, 13 Sep 2012 20:25:49 +0000

Apple’s newest phone, the iPhone 5, was announced yesterday and it will be available to the public on September 21st. The biggest change for web designers to be aware of is the new screen dimensions. While app developers will have to make updates for their apps to run in full screen, our websites will simply have more available screen real estate. Web designers should be aware of what will be displayed before scrolling (what is above the fold) and how to update the start-up image for your web app.

iPhone 5 Resolution

The iPhone 5 resolution has increased to 1,136 x 640 px at the same 326 pixels per inch (ppi) as previous Retina Devices. The iPhone automatically scales the viewport to fit 980 px so it works well with most webpages without any changes. If you’d like to specifically target the default screen size of the iPhone for a mobile site you can add the following metatag:

Apple has a reference of the available options for the viewport metatag.

The default full screen size of the iPhone 5 is 320 x 568 px (w x h). This is half of the screen resolution because of the pixel doubling in a Retina Display. If you’re looking to see what will be displayed ‘above the fold’ (what the user can see before scrolling), you’ll also need to keep in mind the size of the OS bar and the browser UI. Here are the key numbers you’ll need to know for previous versions of the iPhone and the iPhone 5:

iPhone Resolution Comparison

	iPhone 1-4s	iPhone 5
Portrait (WxH)	320 x 356 px (320 x 416* / 320 x 460**)	320 x 444 px (320 x 504* / 320 x 548**)
Landscape (WxH)	480 x 196 px (480 x 256* / 480 x 300**)	568 x 196 px (568 x 256* / 568 x 300**)

* – measurements without the browser navigation bar
** – measurements without any browser chrome for a web app

If you are building a website that you would like to work well on many devices, I’d highly recommend looking into responsive webdesign. Ethan Marcotte has a great article on Responsive Web Design at A List Apart to get you started.

iPhone 5 Web App Not Fullscreen

If you’re having issues with your web app not running at full screen on iPhone 5 (web app is letterboxed), it is likely due to an issue with the viewport metatag. The new iPhone doesn’t seem to like the width being set in the metatag. When you remove it, the issue is fixed. For example:
Broken Code:

Working Code:

iPhone 5 Startup Image

Updated based on code shared by K K in the comments below.

If you’d like to make your website a web app so users can save it to their phone and run it similar to an app, you can make an iPhone startup image to display while the page is loading.

First make sure you do not have width in your viewport metatag, that seems to make web apps run in the smaller mode, as mentioned above.

Then add the web app metatag:

Then create graphics at these sizes for compatibility with each phone:

iPhone 1 – 3gs:	320 x 460 px
iPhone 4 – 4s:	640 x 920 px
iPhone 5:	640 x 1096 px

Then add the code in your page’s header to link to them:

iPhone 5 Retina Images

The iPhone 5 supports retina images just like the iPhone 4 & 4s. There are a variety of methods for adding these images, but the basic concept is to create an image at 2x the size you’d like it displayed and then tell the browser to display it at half of that size. The Retina Device will see the extra pixels in the image and display them. I’ve written a blog post on some methods for adding Retina images to your website for reference. The startup images described above are Retina-ready.

iPhone 5 Web App Icons

The iPhone 5′s icons are the same resolution as the Retina iPhone 4/4s. Here is a blog post describing how to create an app icon for your site.

Creating Retina Images for Your Website

Kyle Larson — Fri, 06 Jul 2012 15:00:44 +0000

Apple’s newest devices feature the Retina Display, a screen that packs double as many pixels into the same space as older devices. For designers this immediately brings up the question, “What can I do to make my content look outstanding on these new iPads and iPhones?”. First there are a few tough questions to consider, but then this guide will help you get started making your websites and web apps look amazingly sharp with Retina images!

Things to Consider When Adding Retina Images

The main issue with adding retina images is that the images are double as large and will take up extra bandwidth (this won’t be an issue for actual iOS apps, but this guide is covering web sites & web apps only). If your site is mostly used on-the-go over a 3G network it may not be wise to make all your graphics high-definition, but maybe choose only a select few important images. If you’re creating something that will be used more often on a WI-FI connection or have an application that is deserving of the extra wait for hi-res graphics these steps below will help you target only hi-res capable devices.

Creating Retina Icons for Your Website

When users add your website or web app to their homescreen it will be represented by an icon. These sizes (from Apple) are as follows:

iPhone	57 x 57
Retina iPhone	114 x 114
iPad	72 x 72
Retina iPad	144 x 144

For each of these images you create you can link them in the head of your document like this (if you want the device to add the round corners remove -precomposed):

If the correct size isn’t specified the device will use the smallest icon that is larger than the recommended size (i.e. if you left out the 114px the iPhone 4 would use the 144px icon).

Retina Background Images

Background images that are specified in your CSS can be swapped out using media queries. You’ll first want to generate two versions of each image. For example ‘bgPattern.png’ at 100px x 100px and ‘bgPattern@2x.png’ at 200px x 200px. It will be useful to have a standard naming convention such as adding @2x for these retina images. To add the new @2x image to your site simply add in the media query below (You can add any additional styles that have background images within the braces of the same media query):

.repeatingPattern {
     background: url(../images/bgPattern.png) repeat;
     background-size: 100px 100px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
     .repeatingPattern {
          background: url(../images/bgPattern@2x.png) repeat;
     }
}

JavaScript for Retina Image Replacement

For your retina images that aren’t backgrounds the best option seems to be either creating graphics with CSS, using SVG, or replacing your images with JavaScript. Just like the background images, you’ll want to create a normal image and one ‘@2x’ image. Then with JavaScript you can detect if the pixel ratio of the browser is 2x, just like you did with the media query:

if (window.devicePixelRatio == 2) {

//Replace your img src with the new retina image

}

If you’re using jQuery you could quickly replace all your images like this very basic example below. It’s a good idea to add a class to identify the images with hi-res versions so you don’t replace any others by mistake. I’ve added a class=”hires” for this example. Also make sure you have the standard (non-retina) image height and width set in the HTML:

Server-Side Retina Images

If you’d like to implement a server-side retina image solution, I recommend checking out Jeremy Worboys’ Retina Images (which he also posted in the comments below). His solution uses PHP code to determine which image should be served. The benefit of this solution is that it doesn’t have to replace the small image with the retina one so you’re using less bandwidth, especially if you have lots of images that you’re replacing.

Website Optimization for Retina Displays

If you’re looking for additional information on creating Retina images, I’ve recently had a short book published called Website Optimization for Retina Displays that covers a range of related topics. It contains some of what is above, but also includes samples for many different situations for adding Retina images. It explains the basics of creating Retina images, backgrounds, sprites, and borders. Then it talks about using media queries, creating graphics with CSS, embedding fonts, creating app icons, and more tips for creating Retina websites.

article originally published April 6, 2012

Adding an Icon for iPhone, iPad & Android to Your Website

Kyle Larson — Thu, 19 Apr 2012 14:20:35 +0000

Many sites currently add a favicon before launch that is visible in your user’s browser tabs and bookmarks, but lots of sites are still missing icons for iOS. By adding an iOS icon, anyone who decides to save your webpage to the home screen of their iPhone, iPad, or Android* will see a nice app-like icon rather than an image of your page.

The first step is creating an image. To support the newest high resolution iPhone and iPad you’ll want to create several different sized images (The device will take the nearest size larger than it’s default size if you don’t have them all). You can save your images as PNGs to any directory on your site.

Here is a table of the current iOS icon sizes from Apple:

iPhone	iPhone Hi-Res	iPad	iPad Hi-Res
57×57	114×114	72×72	144×144

Next you’ll just add a simple bit of code to the HEAD of your site so the devices can find your images (iOS will find these automatically if they are in your site’s root directory, but it’s recommended to include it):

If you’d like Apple devices to add rounded corners, a drop shadow, and reflection to your icon automatically you can remove the precomposed portion:

If you’re creating your iOS icon image you can find templates for use around the web; here’s a good template from Louie Mantia that covers all the sizes.

* Note on Android Devices: versions 1.5 & 1.6 work with the “-precomposed” images only and 2.1 & new will read the tag without “-precomposed”.

** Updated this old article from Sept 3, 2010 to reflect changes with the new iPad

Animated Search Box with HTML5 Placeholder

Kyle Larson — Mon, 16 Apr 2012 20:29:12 +0000

Search is one of the most important functions on large websites. Search engines like Google have made vast improvements in search and as a result many users quickly look toward search as a means of navigation. This tutorial shows how you can make an animated search box with the HTML5 placeholder element to show users all the different types of searches they can run on your site.

The HTML 5 Placeholder

HTML 5 introduced a number of new options we can use when building forms. The placeholder allows us to add ‘hint’ text to the background of an input or textarea that disappears when the user begins typing in the field. This is a great new addition, as the only way to do this previously was with javascript.

As with many new HTML features there are some browser support issues. This will work in all modern versions of Chrome, Safari, Opera, and Firefox. If you are using Internet Explorer this will only work starting in version 10, so we’ll need to add a fallback for those users.

Creating the HTML Placeholder

To start off we’ll create a form field and add a placeholder to it. I’ve also added some CSS to make it look nice (to fix alignment bugs in IE you may need to place the two inputs on the same line of code):

Animating the HTML Placeholder

Next step we’ll add in jQuery and write a script to make an animated search box by changing the content of the placeholder:

...

Fix for IE

Now we have a working animated placeholder in most browsers, but it still doesn’t show anything in IE 9 or below. For these older browsers we’ll just make a static placeholder. There are a number of jQuery scripts out there that solve this issue. I found Mathias Bynens’ solution to work perfect for this. Just download the script, link to it in your code, and add the function to run it in your script:

Great, now we’re just about done with the animated search box but we have an issue… when the changePlaceholder function runs it breaks the fix! To solve this we’ll put in a conditional comment to keep the loop from running on IE. Just add this after your /script tag:

Demo

You can view the working version above or download the demo and files in a zip.

Fixed Elements and Scrolling Divs in iOS 5

Kyle Larson — Fri, 11 Nov 2011 20:58:01 +0000

I’ve been playing around with creating a web app for iOS and testing some of the new features in mobile safari that were released with iOS 5. Fixed divs and the ability to scroll a div are common in iOS native apps but were difficult to implement in a web app. These have both been added in the new safari but they still require some work-arounds to make them function like you probably want.

Fixed Elements

The first versions of iOS didn’t support fixed elements. They would fix correctly to the screen, but then they would scroll along with the rest of your content. In iOS 5, fixed elements (e.g. position: fixed; bottom: 0;) work as expected.

Keep in mind you’ll want to use the iOS meta tags if you’re designing specifically for the device. The first line below prevents the default scaling for sites that aren’t built for to adapt to the screen size and the second allows you to save the site and run it without the browser bars.

The first issue with the fixed elements is that your site will still have the ‘bounce’ effect when scrolling past the top/bottom of your content that reveals the browser chrome (background beneath your page as it bounces). If your site doesn’t need to scroll this is a very simple fix, just add a line to prevent the default action when moving your finger:

If you want scrolling areas, but don’t want the browser chrome to show then continue on!

Scrolling Divs

Another new feature in iOS 5+ is divs can finally scroll. To make a div scroll you’ll just need to add the following (this example has a fixed header but adjust the positioning to fit your app):

.scrollable {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}

The trick here is adding the -webkit-overflow-scrolling to anywhere you’d normally set your overflow. The downside of Apple’s implementation is that the div doesn’t bounce as you’d hope when you are already at the absolute top or bottom. Instead of bouncing the div being scrolled, it bounces the whole page and reveals the browser chrome. This is where you’ll need a javascript fix.

Fixing the Scrolling Element

Thanks to the development community there are several great options out there that you can implement. These include Scrollability and iScroll. My issue with iScroll was that it doesn’t play well with form elements if you have them in your app. At the time of this article, Scrollability’s author says it isn’t ready for release usage, but it seems to be a great solution if you want to test it. If you want your app to work well with old implementations of iOS you’ll need something similar to this (plus you’ll also need to code around the fixed elements issue), but for now we’re only addressing iOS 5+ and we’ll will save fallbacks for a different article.

The solution I like the best for iOS5 is also the simplest. Joe Lambert’s ScrollFix increases the page slightly when at the top or bottom to make your div bounce instead of the whole browser. It’s very simple to add to an element that you already have scrolling:

If you have multiple scrolling divs just apply this again to those divs. For my app I’ve got several divs which either shown or hidden and each has this script applied. We’re almost there, but two possible issues still exist. When scrolling on our fixed elements and our scrolling elements that don’t have enough content to overflow the page, the browser chrome is still revealed.

Preventing Fixed Headers from Showing Browser Chrome

This is a pretty simple fix, similar to what was described above. In my fixed header I’ve got multiple elements, so I made sure that each element or it’s parent had the class “noBounce” and then applied the following script:

document.addEventListener('touchmove', function(event) {
   if(event.target.parentNode.className.indexOf('noBounce') != -1 
|| event.target.className.indexOf('noBounce') != -1 ) {
	event.preventDefault(); }
}, false);

This prevents the default bounce when dragging those classed elements, but doesn’t break the div that you want to scroll.

Adapting for Elements That Don’t Overflow

When creating my code some of the divs for my main content overflowed the browser window which triggers the scrollbar and bounce fix, but others didn’t. There are several ways to address this, but the easiest solution I came up with just extends all divs so they have at least a bit of scroll. To do that I added this jQuery script (you could do something similar in straight JS as well) to all my content divs:


     
          Your content

You’ll need to adjust the “- 55″ portion based on your application. I have it in there to prevent it from having too much scroll because of my fixed header.

Here’s a really basic demo if you want to test it out in your mobile browser: kylejlarson.com/files/iosdemo/

An Event Apart Minneapolis

Kyle Larson — Sat, 20 Aug 2011 05:18:05 +0000

Last week I had the opportunity to attend An Event Apart (AEA) when it stopped by Minneapolis. AEA is a conference “for people who make websites” taught by some of the best known names in web design. I had seen Jeffery Zeldman, Jason Santa Maria, Jeremy Keith, Jared Spool, Kristina Halvorson, and Luke Wroblewski speak at various trips to Austin for South by Southwest (SXSW), but all these talks were fresh content.

Every speaker did a great job and had tons of good information, but a few of the talks stood out and got me really excited about what I was learning. The talks that were the most inspirational for me were Eric Meyer’s talk about using flexible boxes, Nicole Sullivan on optimizing CSS, and Ethan Marcotte on responsive web design. The future of designing sites for multiple devices looks very promising with the combination of the flexible boxes and responsive design (media queries). The great part is that the boxes allow content to be reordered for different purposes where it has previously been difficult to do using floats (without absolute positioning). If you don’t know about media queries check out the original responsive design article.

If you’ve got a chance to attend An Event Apart I’d highly recommend it. While it didn’t have the variety, scale, or full immersion in a sea of web geeks like SXSW, it had many of its own benefits. At AEA there weren’t giant lines, missed panels that were at capacity, or most importantly – panels that didn’t have any valuable content. There wasn’t a session here that didn’t deliver! Overall it was a much more focused and professionally delivered effort (food was also great and I got to sit next to Zeldman at lunch!).

I put together a PDF of my AEA notes if you’d like to get an idea of what was covered.

How to Create Pie Charts with CSS3

Kyle Larson — Thu, 27 Jan 2011 15:44:03 +0000

Last week I decided to update my online resume to make it a little more graphical, because well… I’m a designer. The first step was coming up with some good ways to represent data, and pie charts seemed like a good fit to show skill development. Pie charts are pretty simple to create using a spreadsheet program or a drawing program, but I wanted something out of the ordinary that didn’t require creating new graphics every time I update them. It seemed like it should be possible with the new capabilities of CSS3 so I started working on a solution.

The two most promising things I found were Google’s Chart Wizard, (which uses javascript) and a CSS3 Pie Chart Article from Atomic Noggin. I wanted to do something purely with CSS & HTML so I took the ideas from that article and tweaked them a bit to get the result that I wanted.

There were a few things that I wanted to do differently from the original article:

In the article the pie pieces are pulled out from the sphere and I wanted a solid circle.
Once aligned as a solid sphere there were some rendering issues (in some browsers) aligning clipped shapes next to each other that left gaps between the shapes.
I wanted to be able to add styles to the full css pie chart such as a border or drop-shadow.

Creating a Drop-Shadowed Circle

My first step was creating a circle that will be the bottom layer of the chart. This bottom circle will also hold any border or drop-shadow style. Additionally, I’ve put a div with a set height around the circle so it stays inline with the content (as the circles will be absolutely positioned to stay on top of each other). To create a circle, simply add a border-radius that is half the pixel value of the width of a square div. You’ll notice below I’ve used browser specific css tags (e.g. -moz-border-radius) for the CSS3 elements. Currently CSS3 support is varied between browsers. Eventually, as full support is included in browsers, you won’t need them any more and this will be much simpler to manage.

Adding a Slice to the CSS Pie Chart

Next you’ll want to create a half circle by using clipping to hide the 2nd half. Unless you want exactly 50% you’ll need to change the size of that circle by dropping it inside of a div that controls the rotation and use the inner div to adjust the size. For the first slice we’ll start the outer div at 0 degrees, which is the default, so we’ll only need to edit that for additional slices. (* Note that I’m adding to the code above and only displaying the new CSS.)

Large & Multiple Slices

If you’d like to make a slice take up more than 50% of the pie chart you’ll just need to add another pie div of the same color with a hold div wrapped around it. To add a slice in a new color just change the background color. Below is an example of making a slice over 50% and a second slice of a new color.

IE Fallback

As expected, this doesn’t work in any Internet Explorer browsers below version 9. If you’re concerned about IE users, a simple way to fix this is adding a conditional comment for IE with a jpg of whatever charts you’re trying to display.

URL Structure Tips

Kyle Larson — Tue, 11 Jan 2011 20:26:21 +0000

When working through the architecture and coding of a website the URL structure is often overlooked. Carefully considering the location of your pages can greatly help users by making links semantic and easy to remember. It’s easiest to start this process when doing a redesign or a new site, but its worth investing the time and effort at any point.

When determining your URL structure, the first place to start is with your site’s architecture (site map / navigation). The structure of your URLs should reflect how your users navigate your site. Typically, you’ll want to find large buckets and group your content using directories (yourdomain.com/company – yourdomain.com/products – yourdomain.com/articles). You should have an index page in each of those directories that leads to any additional content within, which can be in their own subdirectories. Apple does a good job of this, creating consistant URLs where expected, like apple.com/iphone & apple.com/iphone/features.

Folders vs Subdomains

I recommend using subdomains (e.g. products.yourdomain.com), as alternative to folders, only when there is a clear division of content. For example if you ran a second site that is intended for another purpose entirely from your main site, such as a site for investors, a subdomain may be a good choice. In Apple’s case they keep their marketing product information at apple.com and their online store at store.apple.com. There are several reasons for this, but the biggest two in my mind are that search engines typically consider subdomains as a different site when indexing and that many users aren’t savvy enough to understand subdomains (if you create them make sure you can type www before the subdomain and it will still forward correctly).

Dynamic Pages

Semantic URLs can become difficult when creating dynamic product or article pages. There are many sites with pages like this domain.com/store/product.php?id=1234 instead of something more logical like domain.com/store/productName. If you’re using blog software like WordPress you can easily change this setting. In WordPress simple go to settings > permalinks and choose one of the available options or create your own structure. For users of CMS systems take a look and see if such an options is available; if not take a look on google for “URL Rewriting” to create custom paths to your content.

Design Process: The Rule of Three

Kyle Larson — Mon, 08 Nov 2010 17:31:55 +0000

Having a solid web design process is critical for efficiently creating quality work. On Happycog’s Cognition Blog, Chris Cashdollar posted about their process of creating three unique designs to present to a client. When I first started doing freelance work for clients I followed the rule of three without question, but over time I’ve changed my process based on the project that I’m working on.

The Benefit of Three

Overall, following the rule of creating three mockup designs for a project is useful for many of the reasons that Chris mentions in his article. Creating multiple designs forces you to solve the same problem in a variety of ways and each subsequent design is informed by your previous discoveries. It also shows your client that you’re focused on delivering options that best fit their goals and helps foster discussion over the solutions.

Third Wheel

While creating three designs has many benefits, I no longer follow it as a hard rule. There are two reasons I suspect that the rule of three is more effective in Chris’s case:

Happy Cog’s projects are likely larger in time and scope than mine
Chris mentions having a separate designer for each design

Nearly all of my projects are designed by myself with input only from the client (and sometimes friends if I want some other feedback). This, combined with most projects being quicker and on a smaller budget, means that often presenting three full designs isn’t always an effective option. I feel with the total hours allotted to the project, my time is often better spent focusing on one or two well thought-out designs. Also on smaller projects the third iteration can feel like a chore, and it isn’t as innovative as the first concepts where a lot of the discovery took place.

An Alternative Process for Freelancers

The number of concepts I present to a client depends on the project. For a small job, I typically focus on generating one or two concepts and then iterating based on feedback. I find that much of the creativity lost by not doing three designs can be generated in the initial sketching phase. By sketching out designs before getting onto the computer, I can quickly come up with many different ideas and then take several into a larger, more detailed sketches. Following this process, it’s easy to see what is going to work and what doesn’t work so well. Sketches can also be shown to the client for feedback before coming up with your final concept to present. Working this way also helps prevent clients requesting a “frankendesign” combining elements of each of the three designs you show them. I prefer to work this way, rather than trying to force three designs, as each client has a different budget, different expectations and a different level of involvement in the process.

How to Setup Your Site for the iPhone

Kyle Larson — Fri, 22 Oct 2010 20:29:48 +0000

I’ve been working on some mobile apps lately and realizing how simple it is to get started making your site more iPhone compatible. You can either create a separate site specifically for mobile or create a mobile stylesheet to be applied to specific devices. There are some great arguments out there for each option, but what I’m discussing here is just the introductory steps that work for either method. In writing this I’m also considering how I’d like to apply those ideas to my site here.

If you’re planning to create an additional stylesheet rather than a completely new codebase, you’ll want to start by specifying the stylesheet to use with a media query. Ethan Marcotte has a great article called Responsive Web Design that expands upon this idea on A List Apart. To target an iPhone/iPod specifically you can use this code right after your main stylesheet in your header:

Control the Page Size

Next you’ve got a handful of settings that will help make your site similar to a native iPhone app. If you want your page to resize to the device, you can use this line in your header:

or if you’re setting your page width in CSS and would prefer to use a specific scale (with or without the option to disallow users from zooming the page) you can use:

Add a Custom Icon & Startup Image

There are also meta tags for use when your site is added to the home screen of a user’s device (press the ‘+’ in mobile safari to add to the home screen). The first is adding a custom icon to your site that I wrote a previous post about. In addition, you can add a startup screen to give an app like feel. To add a startup image create a png that is 320 x 460 pixels and add this line of code to the header:

Make it Look Like an App

You can make your site look more like an app when people save it to their home screen by hiding the top bar that loads with safari and changing the color of the status bar. Before you do this you’ll want to make sure you’re site is setup so it can be easily navigated without needing the back button. To remove the Safari controls add this meta tag to your header:

And to change the status bar (network name, time, battery level) from the default grey to either “black” or “black-translucent”:

Note that if you change the status bar to translucent the site will sit underneath it. Make sure that there is no critical content hidden behind the bar.

These simple lines of code are a great way to get started setting up your site for Apple’s devices. If you’d like to go into some more detail, Apple’s Safari Reference Library is a great place to get started. Then to take this to the next level I’d recommend digging into jQTouch or Sencha. Both of these tools will create an even more app-like experience with animated transitions and app-like bars & buttons using javascript (which you’ll want to have a strong knowledge of to use to their full potential).