Kyle Larson Web Design Articles

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

Kyle J 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 J 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.

Creating Retina Images for Your Website

Kyle J Larson — Fri, 06 Apr 2012 18:29: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:

Fixed Elements and Scrolling Divs in iOS 5

Kyle J 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 J 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 J 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 sphere 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 of the Pie

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 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 J 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 J 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 J 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).

How to Make Your Web Statistics Actionable: Search

Kyle J Larson — Tue, 05 Oct 2010 14:55:48 +0000

If you were ill and your doctor handed you a chart including your weight, heart rate, and blood pressure and promptly sent you on your way with no analysis or feedback, he wouldn’t be your doctor for long. Without actionable analysis of the data it has very little usefulness. Website statistics are often discussed in a similarly meaningless way. I’ve suffered through many meetings where people throw around numbers with nothing more to say about them than this number has increased and that one has decreased. Most sites have some statistics available and maybe they are even reviewed occasionally, but to get real value from your statistics they must be a catalyst for action. Analyzing your on-site search and search engine keywords is a great place to get started.

On-Site Search Analysis

If you have a search box on your website it provides one of the greatest sources of immediately actionable data. You should be able to find this data in your statistics either through a specific listing of the search terms entered or by searching page view stats for the query string you’re using to run the search (e.g. yoursite.com/search?q=keyword – just leave out the keyword to see all the keywords entered). From these results you can not only gather information about what people are most interested in, but also a wealth of data to start testing with and improving your site.

The first thing you’ll want to do with the on-site keyword list is plug them into the search box on your site beginning with the most entered keywords. Are you getting the results you would expect? If so thats great. If not you should note any lack of relevant results and add those keywords to the pages that should be showing up. By starting with the most entered phrases and working down you’re going to be rapidly improving search and your user’s experience. Also, check your search results page to see if it has a high bounce-rate (users exiting the site from this page). If this is the case carefully check for quality search results and consider all the possible results the searcher may be after.

In addition to improving search, these search phrases can help inform you about the usability of your site and the best language to communicate with your users. For your most popular searches make sure that not only the results are relevant, but that the content is also discoverable to users browsing your site. Many users will search as a quick means to finding what they are looking for, while others search as a last resort after unsuccessfully looking through your navigation. These popular search keywords also can help guide the language you use in your content. Many companies use insider language to describe services and products while the average user’s language may be completely different (think notebook vs laptop or Form 1040 vs income tax form). Take this search data and use it to communicate more effectively with your user-base.

Finally, compare this data over time. Are popular searches based on the content you are creating at those specific times or is there a trend that you can detect to better schedule your updates and marketing? If you can make a correlation between time and interest (e.g. Item A does well in the winter or Topic B is most searched near school enrollment) you’ll go a long way to improving the results of your efforts.

Incoming Search Engine Keywords

Statistics tracking will also provide you with keywords that users are entering into search engines to find your site, such as Google, Yahoo, or Bing. This data isn’t as immediately impactful as your on-site search, but there is still some actionable information to be found. The primary use is search engine optimization (SEO) in relation to search-user interest.

By reviewing the incoming search terms for your site, you will see where you are ranking well and reaching visitors in search engines. This is data is invaluable, but what we’re looking for here is actionable data. Take a look at the keywords; are users finding good content for what they are searching? Look for those popular keywords and make sure you’ve got great content for your users. If you’re ranking highly for a particular phrase that is not a focus on your site there may be potential for emerging or expanding market (e.g. you sell office widgets and people are searching for health care widgets). Finally, compare this data over time as discussed for on-site keywords. Take any data gathered from search engine keywords with a grain of salt, as your ranking for these terms will change constantly and can be the cause for fluctuation in traffic.

While this article is focused on only the search aspect of statistics but with such a large topic I plan to follow up on this article in the future with other ways to improve the use of web stats. Hopefully some of these ideas will take your use of web statistics being just an observer and toward something actionable.