The HTML

The HTML is pretty straightforward, the only thing out of the norm is the Feedburner e-mail widget, which is taken directly from their site. You can use any service there instead of Feedburner, or use a separate WordPress plugin to handle your subscriptions if you choose.

The CSS

Please be aware that you need to download the icons.gif file if you want to use the social media links. I’ve made it into a sprite for faster loading and convenience and if your subscribe box is wider, you can easily fit a lot of other services there as well.

Thoughts? Feedback?

I know this is absurdly simple for a lot of you out there but I’ve had multiple requests to make the Subscribe box into a separate plugin. Let me know if the above code is good enough or if you guys really do want me to make it into a plugin, and perhaps to make things uber convenient, I may just do so.

Live Example

Everything in this paragraph is editable in any modern browser that supports HTML5. You should see a grey outline when you mouseover it, indicating that it is editable. One very cool aspect of this is that it retains the CSS styling from the parent document, so the edited elements will still look correct.

• Feel free to edit this list element.
• Or add more by simply pressing enter after the last list item – no HTML needed!

Chris Coyier of CSS-Tricks.com pointed out that you can also let users edit CSS styles and have them update in real-time using the ContentEditable attribute. Try it out by editing the background color of the above list:

Adding the MouseOver Outline

To create the outline effect on mouseover, I had to add the following line to my CSS stylesheet:

Obviously this can be styled to your liking and since it’s just using standard CSS, it’s possible to do some really creative things with this (I’ll leave that to your imagination). As for using the ContentEditable attribute itself, it really is as simple as appending it to any tag like so:

Final Thoughts

This attribute really opens a lot of doors when paired with HTML5′s LocalStorage capabilities. There’s also the Aloha Editor, a pure HTML5 WYSIWYG editor that utilizes the ContentEditable attribute and generates a nifty real-time editor.

I’m really looking forward to the day that the majority of internet users have HTML5 capable browsers so that I can more freely use these cool new features! (hopefully soon, fingers crossed)

Step 1. Create An Outline

This step is rather simple: just write down everything you plan on doing for the project along with how many hours each task will take. It takes some experience to know how long certain tasks can take to complete, however use your best guess when starting out and refine the estimate as you get more clients. Here’s an example of a recent estimate I gave a client for the frontend design of an e-commerce website:

• Research and Planning – 8 hours
  • Competitive analysis – 6 hours
    • What are immediate online competitors and why would customers go there instead of your site?
    • What is needed to maximize conversions (visitors to customers) and what user interface elements can help with this?
    • Which market/audience are catering to and does the current design reflect that?
    • How can we make the site’s usability and interface stand out from it’s competitors?
  • SEO analysis – 2 hours
    • Review issues in current ranking
    • Outline steps needed to bring the site to front page of Google
• Wireframe mockups of new design – 10 hours
  • 4-6 wireframe mockups of design ideas/concepts based on research
  • Pick a few, reiterate repeatedly until we reach the perfect layout and design
  • Create mockups for landing page, category page, item page and user pages
• Full scale, complete/full-detail Photoshop mockups – 22 hours
  • Based on wireframe mockups, the full-scale mockups feature complete design details (nearly a screenshot) so you know exactly what your site will look like
  • Reiterate 2-3 best Photoshop mockups until we reach perfect design
• Conversion of full-scale mockups to XHTML/CSS/JS (frontend code) – 8 hours
  • Add necessary JavaScript effects and elements, including dynamic content sliders
  • Verify browser compatibility with IE6-8, Firefox, Chrome, Safari and Opera

From this estimate, my client knows that I will be spending 8 hours for doing research on his project, which includes finding out information about his competitors in order to make a strong and competitive interface.  Since he’s asked for help with SEO, I show him that I will spend 2 hours on it – note that it’s not an extraordinary amount of time and that I’m not doing much out of the ordinary, only helping him understand why his rankings are so low.

In terms of mockups, I make sure to clarify to the client that the time estimates I have given will include multiple reiterations of the mockups – meaning I go back and forth with the client until we reach a design that is truly what they want.  Outlining exactly what I’m spending my time on adds a level of trust and comfort that improves the overall experience for both myself and my client.

2. Get Them To Agree On The Outline

Without getting into any talk of money, show your client the outline you’ve made and make sure they agree on it.  Once they acknowledge that it will indeed take you 8 hours to convert the many pages of their site, it’s hard for them to downplay the overall estimate that you provide.  They know how much work you’re putting in and they know that it’s unfair to under-compensate you for time and work.

3. Negotiate Your Hourly Rate + Deadlines

Ideally, you tell your client what you charge per hour and they are happy with it.  Unfortunately, ideal clients are a rarity that you shouldn’t expect.  In most cases, you will have to negotiate your rate, where changing just a few dollars can have a big impact on your overall estimate.  Like making estimations on the amount of time it takes you to do certain tasks, setting a high hourly rate is something that comes with experience and a strong portfolio.  Consider your experiences and the work you’re doing, then try to set a fair rate for both you and your client.

Since you already have a good idea of what you’re spending your time on, use that knowledge to set realistic deadlines of when you can give your client deliverables.  For less intensive projects, I prefer sending at least 2 updates per week outside of normal communication.  For more urgent projects, I will typically set smaller deadlines every other day or so.  Strong communication and keeping your client in the loop will only increase their sense of satisfaction from your work and show dedication on your part, which is something they’ll remember for future work or referrals.

Why This Works For Me

I love this overall process because I know exactly what I’m getting into before my first day of work (surprises are bad when freelancing).  I am able to prepare mentally for each day and for each task I’ll be working on, which helps keep me organized and on top of work.  Using this technique, I’ve noticed that I meet nearly all of my deadlines and end up getting paid more than when I used to quote somewhat blindly.  It’s basically a win-win for both parties involved.

Are you guys doing something similar to this?  How do you come up with your estimates for freelance work?

In order to better understand these suggestions, you should try to see your blog from the perspective of a completely average visitor. Try to imagine what your readers see and answer these basic questions:

• Why do your visitors go to your blog in the first place?
• Can you view the actual content of your blog without feeling distracted?
• Take a step back from your screen. Does your blog look/feel overwhelming in terms of information being presented?
• Is reading a post on your blog an enjoyable experience that you’d be willing to repeat?

The great thing about usability is that often times, simple changes can have a relatively big impact on user experience. The following ideas are what drove the current redesign of DevGrow.com, one that has helped improved reader engagement and participation.

1. If it’s not critical, get rid of it

We live in a world of information and sensory overload. Everywhere you go you are being fed tons of data, some of it important to the task/topic at hand and a lot of it fairly extraneous. Websites are no exception – many feature a wealth of information that can often overwhelm readers, which can increase bounce rates and reduce conversions.

Because we are used to seeing so much information on most websites, it can be pretty difficult to remove things from your own blog. Remember to think of it in terms of your reader – what do they want to see? Take a look at the following screenshot, which shows the DevGrow header before and after the current redesign:

If the image is hard to follow, currently the discussion forums part of the site is still using the old header – compare that to the header on this post to get an idea of what has changed.

The old design had navigational links in the header, footer and sometimes even in the sidebar – this was overkill for the majority of readers. It also had links to sign up or login, which most users typically don’t have to do unless they’re in the forum. They were just adding to the clutter and causing unnecessary distraction away from the content which, for most blogs, is really the only part of the site readers really care about. This is not to say that you should remove all navigation elements or other portions of your site, rather take a look at objects that are repeated throughout your design and reevaluate their necessity.

2. Focus on typography

Blogs are all about the content, so it only makes sense to make sure your typography is reader-friendly. You don’t have to necessarily use a larger font size or particular font family to improve typography, instead focus on making sure your content is clear and legible to the majority of your users. Content is key but also worthless if your visitors have a difficult time reading it.

The following are a list of resources that discuss typography and it’s usage on the web:

• A List Apart: Articles on Web Typography
• An Introduction to Web Typography
• Web Typography Guide
• Web Typography Tutorial – Lesson 1
• Google Font Previewer and Google Font Directory

3. Utilize white space

Effective use of white space can also help improve usability, as it can increase focus to your content type. There are several things you can do to better utilize white space on your blog, including:

• Increase the content margins/paddings to give your post a greater degree of separation from your sidebar and/or navigation
• Increase your paragraph line-height property, which both increases legibility and gives the feeling of added white space
• Increase the spacings between your posts, comments, lists and other elements

Obviously, all adjustments to your margins and padding should be done with moderation and careful consideration. Keep in mind that while your goal is to improve the overall experience and readability of your blog, you do not want to hinder other sections and important bits of your site either (like navigation).

The following sites make great use of white space in their designs that forces the reader to focus in on content:

A Way Back

Web Design Ledger

Usability Post

Bearded Studio Blog

Conclusion

In all honesty, the above is really a minimalistic approach to improving usability. I’ve found these methods to be the simplest and quickest to apply to an existing website, since it basically involves reducing and refining existing elements. If you have suggestions for improving your blog’s usability and overall user experience, let me know in the comments!

Lastly, please consider subscribing to the RSS feed (or use the handy form in the sidebar) and follow us on Twitter.

The Code

In order to load the share buttons after everything else, we need to do two things. First, we need to edit our post template (single.php) to call a jQuery function after everything has loaded. We call this function in single.php instead of an external JavaScript file since some buttons benefit from the post permalink or title, so we need to make sure our buttons have access to that information as well.

single.php

In the code above, we’re calling the function get_social using jQuery’s window load function instead of the typical document ready – this makes means our function is called after everything has loaded, whereas document ready loads all code immediately after the DOM is ready. Inside the window load event, we call our function and pass the title and permalink so our buttons have access to it.

In the get_social function itself, we can use jQuery’s load function to pass our variables, get the response and populate or div (with the id of “sharing-buttons”). Please be sure to point to the correct URL of your share.php file (which we’ll create next) – you may even want to use the absolute URL to minimize errors (ie http://…).

share.php

The share.php simply contains all of your dynamic button code. Here’s what mine looks like:

In the beginning, I grab the permalink and title variables from either $_GET or $_POST (a bit more future-proof in case our function changes) and use the default button codes provided by these services. Note that I don’t use the permalink or title in any of the above buttons, as these services automatically detect that information from whatever page they’re posted on, however it’s there if you need it!

That should be it though – if you edited your single.php and correctly point to your share.php file in the get_social function, you should be loading your buttons after the rest of the page is completely loaded!

See It In Action

The current DevGrow theme (v3) is using this code in every post. To see it, go to any article posted on this site and immediately scroll to the ‘Share this Article’ section. You should just see the small icons (RSS, email, reddit, etc.) until the entire page has finished loading, after which 3 additional buttons (Digg, Facebook and Twitter) should pop up above it. If you take too long to scroll there you may end up missing it but keep an eye on your status bar – you should see the buttons loaded only after the rest of the page has finished loading.

Caveats and Conclusion

While working on this, I found that some buttons did not function correctly when loaded this way, such as the one for DZone. I didn’t spend too much time trying to figure out why but I assume it has to do with the way their button code extracts the host URL, which it may have had difficulty with since it was being loaded from an external file. While it would’ve been nice to include that button, I found that having a faster loading site is much more important to me than any single service.

Also, please keep in mind that this won’t really change your overall page loading times – it will only make it so that the rest of the site is loaded before the social media buttons. It’s useful if you find these buttons to be slow at times and parts of your page render white/blank until they’re finished loading, which is the issue I was having.

Are any of you doing something similar to this in order to load your content a little faster? Anyone know why the DZone button isn’t working or know how to fix it?

1. Understand the Project

The first step is to know what you’re making inside and out. For every freelance project I work on, I try to understand what it is the client wants, who they are targeting and what role this website will play in their business. It’s important to get a clear understanding of these concepts in order to create a product that satisfies the client, the target market and you, the designer/developer, as you should always want to create something you can be proud of.

Nearly every project requires doing some research prior to beginning the design process. I usually ask the client for a short list of competitors from which to start with, from which I identify the strong and weak points (used later to refine the design). I also ask for a list of websites the client admires and likes – this helps to get an idea of the design style that will reflect their personality and in the end result in a overall happy client. A bit of psychology 101 but if you use some of the underlying influences of the sites they like in your design work, they will hopefully make a link subconsciously and like your work too (familiarity-induced liking).

2. Brainstorm

After I have a thorough understanding of the project, the target market and what the client wants, I start to brainstorm features and elements that will be used. This usually means quick lists of features per page, like so:

• Homepage
  • Login Box
  • Top 5 News (blog posts)
  • Top 5 Discussions (from Newsboard)
  • Newsboard (latest posts)
• Profile Page
  • User Info [name, bio, DOB, gender, joined date, #posts]
  • Profile pic
  • Commenting/Wall
  • Friends
• Every Page
  • Header + Footer + Nav
  • Left Nav with icon links
  • Top leaderboard ad
• Etc..

This kind of list doesn’t have to be that in-depth, it’s used just to help you formulate ideas for the next step.

3. Sketch it Out

Using the list of features and elements I need, I take out a sheet of paper and create a rough sketch of the each of the main sections of the website. The sketches don’t have to be polished or too accurate, they are just meant to provide direction for element positioning. If at all possible, I will sit with my client and do it together with them, as this helps eliminate many future iterations in the actual mockup phase of the design. Here’s a sketch a client and I created for a project a few months ago:

In fact, this sketch was mainly done by the client himself, laying out where he wanted certain elements to be in relation to each other. Most clients will not have this much foresight on content placement and you will likely end up having to do the bulk of it yourself. If you come to an understanding on this sketch with your client you can focus on polishing the real mockup rather than worrying about placement.

4. Photoshop Mockups

Once the paper sketch is done, I open up Photoshop and create a complete mockup. When I say complete mockup, I mean I reproduce the main pages of the website (homepage, generic page, forum page, etc.) in it’s entirety, with correct fonts, stylings, features, content placement, etc. It not only helps me visualize what I will be coding but also keeps the design process somewhat relaxed and enjoyable, at least for me. I use tons of guides to help get the dimensions of elements correct and also try to keep everything organized into multiple folders. Sometimes I will have multiple pages in one PSD (under multiple hidden folders), sometimes I split them up into separate PSDs – it all depends on how many elements are being reused throughout the site.

After creating the initial mockup, I send it to the client for review and then implement his suggested changes. This process repeats several times until we’re both satisfied with the end result. Here are a few of the mockups for the project from the sketch above:

I skipped a few in the image above but there were more than 10 different variations and iterations of the mockup, with the final product looking more like this:

5. HTML/CSS/JS

From the mockups, I open up Notepad++ if I’m on my Windows 7 desktop or Textmate if I’m on a Mac and begin the coding process. I usually start with a standard group of files, which include:

• css
  • reset.css
  • main.css
• images
• js
  • functions.js
• index.html

In the reset.css file, I usually stick in either Eric Meyer’s CSS Reset or this simpler one I found a while back (can’t remember where now):

In terms of converting the Photoshop mockup to HTML, I usually work in this order:

1. Main background
2. Body wraps to center main content if needed
3. Header and/or top navigation, then logo and main navigation bar
4. Sidebar block (in HTML before content block, has float property assigned)
5. Content block (after sidebar, no float and with padding equal to sidebar width + margin)
6. Footer

I try to finalize each element as I progress down the page, adding the necessary images and styles as I go along. The images are sliced directly from Photoshop (this is where layering and putting things in folders comes in handy) and are called from the CSS file unless I absolutely need it in the HTML (or unless it’s dynamic). Recently, I’ve been trying to keep images down to an absolute minimum as they can slow your pages, so I’ll try to use CSS for whatever I can, including rounding corners and glow/shadow effects (taking a slight compatibility hit). I’ll also be continuously checking the HTML file in Firefox, Internet Explorer and Chrome during this entire process to make sure everything looks okay (and occasionally Safari and Opera as well).

Here are the files I delivered to the client for the project we’ve been following:

• css
  • framework.css
  • tipsy.css
• images
  • Multiple images…
• js
  • functions.js
  • jquery.js
  • jquery.tipsy.js
• elements.html
• index.html
• just-top.html
• page.html
• page2.html
• page3.html

6. Backend Development

After the main HTML/CSS/JS framework is complete for the main sections of the website, I’ll begin any backend development necessary. Since this relies so much on what the client wants, I’m not going to get into it much here. Just make sure to use the absolute minimal code possible in order to keep things fast and CPU-friendly.

Conclusion

All web designers and developers have a unique process in which they complete projects, the above outlines the one I most commonly use. I may have left out a couple of things here and there but it covers the overall big picture of how I get things done. The project covered in this post was for the redesign of eWrestlingNews.com – I was responsible only for the HTML/CSS portion of the site while a developer handled the backend. As you can see, even the final design I submitted ended up changing a bit to the client’s liking.

What is your creative process like? Do you work in the same way I do? Leave your feedback in the comments below.

And as always, follow me on Twitter and subscribe to the RSS feed for more articles like this!

This past weekend, John Resig (creator of jQuery) announced the release of the alpha version of jQuery Mobile, a simple and lightweight JavaScript framework for mobile web development. In this article, we’ll take a look at how easy it is to create a simple mobile website using framework, complete with dynamic (AJAX) page loading, iOS-style design and slick page transitions.

Download

How to Use jQuery Mobile

jQuery Mobile is incredibly easy to use, just include the jQuery Mobile files in your header and add a few data attributes to your markup and you’re set. All of the styling is handled by jQuery and the included CSS file, so you can literally create a complete mobile webpage in minutes. In the example below, we’ll create a simple page that loads internal links using a variety of transition effects. The first few steps will outline the generic usage of jQuery Mobile while the rest will take a look at the specific elements used in the demo.

Step 1. Include the jQuery Mobile Files in Header

This step is pretty self-explanatory: just include the framework files. You can download them from the jQuery Mobile site or load the files directly from their site/CDN, which will reduce bandwidth costs and keep your website speedy.

Step 2. Use data attribute in HTML markup

Apply data attribute tags to your HTML, where n is the available feature you want to set, for example:

The data-role element specifies which DIV/block should be used for the header, footer and content, all of which are inside the main page wrapper. Here are the data attributes used in this example:

• data-role – specifies the nature of the wrapper element, can be set to: page, header, content, footer. Two other settings were used in the example to indicate list elements and list dividers, for which the attribute was set to: listview for the main list element and list-divider for the list divider. There are a few other available settings, including collapsible, which creates a collapsible/show-hide block (more info).
• data-position – specifies whether the element should be fixed, in which case it will render at the top (for header) or bottom (for footer)
• data-inset – specifies whether element should be within content margins or outside of it (flush or with margin) – set to true or false
• data-transition – specifies which transition to use when loading new pages, can be set to: slide, slideup, slidedown, pop, flip or fade
• data-theme – specifies which design theme to use for elements within container, can be set to: a, b, c, d, e
• data-dividertheme – specifies the theme for the list dividers using same options as data-theme

Step 3. Add content and publish online!

Using the above example, the template found on jQueryMobile.com or creating your own layout, populate the blocks with your own content and upload the files. Currently, jQuery Mobile renders the pages the same on mobile and desktop browsers, so you don’t necessarily need a smartphone to test it out (though having one can help ironing out bugs).

Accessibility and Precautions

Right now, the alpha version of jQuery Mobile (the only one currently available) is compatible with all versions of Safari for iOS and for most browsers on Android. BlackBerry is partially supported and Windows Mobile is sketchy at best, but rest assured that compatibility will only get better with time, as that is the main goal of jQuery Mobile – creating a widely compatible mobile JavaScript framework. You can view the compatibility chart on the official site but should also follow their blog to get the latest updates too.

That said, is it worth investing the time and energy to use jQuery Mobile over the other available mobile frameworks, even though it’s in the alpha development phase right now? I would say yes, absolutely – this is a framework that has huge momentum behind it right now and will only get better with time. As long as you’re staying on top of updates and changes, you should definitely start getting familiar with this framework if you’re planning on doing some mobile-friendly web development.

An additional benefit of jQuery Mobile is that it makes loading pages using AJAX automatic. Add an iPhone home screen icon to your application and iOS will cleverly hide Safari controls, mimicking native applications.

About the Example

The downloadable example above includes is split into a header and footer file for the sake of convenience, feel free to use whatever coding method you prefer. I may end up creating a simple MVC framework using jQuery Mobile that makes it easier to develop a dynamic mobile app, in which case I’ll be sure to post it on this blog. If you’d be interested in something like that, leave a comment below and I’ll try to bump up it’s priority on my huge list of to-dos.

Conclusion

That wraps it up for part 2 of the Mobile Web Development series. Be sure to check out part 1, an Introduction to Mobile Web Development, if you missed it earlier. In the next part, we’ll take a look at the various other mobile web frameworks out there, so stay tuned!

Also a reminder: the AppSumo giveaway contest ends tomorrow – be sure to check out the details and enter (it takes 30 seconds and is free), you could win nearly $400 worth of support products.

And as always, subscribe to our RSS feed and follow us on Twitter if you haven’t already!

I spent a good bit of time attempting to explain to him that while people couldn’t right-click, they could still easily rip the photos using the Print Screen button or using any screen capture tool. My suggestion was to simply watermark the images, however he was insistent on having no context-menus show up on right-click. Ultimately, I ended up using a bit of jQuery to disable all context-menus in any images on the site, which allowed him to use the more compatible JS slideshows:

That should do the trick! While I still don’t think it’s the best solution, if you run into the need to disable context menus for any element, feel free to use the snippet above (replace the img with anything else).

Edit: Compatibility and Demo

Someone mentioned it doesn’t work in Firefox in the comments – I’ve tested the code in the latest beta build of Chrome, IE8, Firefox 3.6.8, Safari and Opera – it does work in all of these browsers, at least in my Windows 7 x64 build.

Feel free to view the source of the demo to see how the exact implementation. Also, keep in mind that this is certainly not a fool-proof solution (not even a great one) at preventing image theft. It’s useful in deterring the subset of people who are less tech-savvy and are likely to give up after being unable to right-click.

Edit 2: I am not suggesting this!

A number of comments make the assumption that I am recommending this technique for preventing image theft. Let me be clear: I am not endorsing this technique for that purpose. There are many ways around it and I made that clear to my client.

Since my client, however, was insistent on specifically disabling right-click for images, the above is the method I used. It was somewhat difficult finding this information online so I decided to share it with others here on my blog. It is certainly not the best solution (not even a good one) for preventing image theft, in my opinion a watermark works much better for that. It may be useful for you in some circumstances, so use the knowledge however you’d like.