Fresh Resources for Designers and Developers – March 2013

It’s that time of the month again to share awesome tools and resources fit for designers and developers. This round we got plugins to help your site detect swipes and gestures as well as to enable mention input, a tool to creat your own stickman comics and a new tool to test your codes on Internet Explorer.

Check out all our fresh resources (according to month):

• October 2012


• November 2012


• December 2012


• January 2013


• February 2013

App Icon Template

In our previous post, we have covered how to create your app icons with a third party tool. Alternatively, if you are like me, who prefer customizability, you can try App Icon Template.

his PSD template comes with Photoshop Action scripts that lets you convert your design into iOS-compatible formats on the fly, both for Retina or non-Retina devices.

Touch Swipe

Today, as there are more devices that are equipped with Touch Screen, you might want to consider enabling the multi-touch ability for your website. To do this, try Touch Swipe, a jQuery plugin that can detect swipes and finger gestures on your website. This plugin supports several gestures, including finger swipe, pinch, and zoom.

Spectagram

In previous post, Jake has shown you how to build Instagram instant search using Instagram API from scratch. There is also a ready-to-use jQuery plugin, like Spectagram.

Spectagram fetches the Instagram API and displays the result on your website or application. It currently supports displaying Instagram user feed, popular photos, and user-tagged photos.

Mou

MarkDown is a plain text formatting language that can be converted into HTML markup. We can write in MarkDown format with any code editor, or use a designated editor like Mou. Mou comes with syntax highlighting, auto save, powerful actions, auto pair, HTML and CSS export, etc.

The interface is neat and simple consisting of two columns. You can write the MarkDown format at the left, and see the result immediately on the right. Unfortunately, Mou is only available for OSX at the moment.

jQuery Mention Input

If you are using Twitter or Facebook, you are certainly familiar with Mention; we can include a friend’s name into a post or tweet, typically with a @ sign. If you want to (or need to) create such a functionality in your website, you can use a plugin named jQuery Mention Input.

To run this plugin, we need at least jQuery version 1.6 and Underscores.js. For more technical details, head over to this page.

Blokkfont

Blokkfont is a font for mock-ups and wireframing that contains only block and rectangular characters as previewed in the following screenshot. If you are against using conventional Lorem Ipsum, this font is a really good alternative. It is available as a desktop font (in .ttf) and webfont.

Comix.io

You don’t have to good at drawing to create a comic. You can simply use Cmx (read Comix), a web based editor for creating xkcd style comic stripe. The comic graphical output will not be an image like in a traditional comic, instead it is built with HTML and SVG.

Roole

Roole is a JavaScript-based CSS Pre-processor. It has a list of features that are inspired by other CSS preprocessor (LESS, Sass and Stylus) such as Nesting Rules, Indentation, Variables, Mixins, Functions, Operation, and Extending style rules (like in Sass). Roole also provides built-in vendor prefixes, so we can write complex CSS3 rules in a simple way.

Hint

Hint is a CSS library containing a set of styles rules for creating a simple tooltip. The tooltip is built with CSS3 Transition, CSS3 property, pseudo-element, and data attribute. It is a good alternative to JavaScript-based tooltip. Head over to the following page to see it in action: Hint.css Demo

Modern.ie

Testing websites for Internet Explorer has always been unpleasant, as IE has several versions that have their own quirks and behaviour. Fortunately, Microsoft realizes this and has introduced a tool to make the web developer’s job less painful with Modern.ie.

Modern.ie is a set of tools for testing websites in Internet Explorer, in old and modern versions. It will scan the webpage to find compatibility issues and return suggestions to fix the issues.

Related posts:

1. Fresh Resources for Designers and Developers – February 2013


2. Fresh Resources For Designers And Developers – January 2013


3. Fresh Resources for Designers and Developers – November 2012


4. Fresh Resources for Designers and Developers – December 2012

Fresh Resources for Designers and Developers – March 2013

G+ Share buttons PSD

Free PSD Google Plus share buttons provided in different sizes. A really useful freebie Created by Michael Glasshoff.

The post G+ Share buttons PSD appeared first on Freebiesbug.

G+ Share buttons PSD

Lessons Learned from Launching an Online Store on Magento

For my day job, I manage a number of online properties, including a couple of online stores. We recently relaunched our main ecommerce store, Supercircuits.com, on Magento Enterprise Edition. Here are my thoughts about the experience.

The Supercircuits website was running on an custom-developed ASP.Net ecommerce platform, which I inherited when I joined the company. Over time it had become increasingly unwieldy, hard to update, and buggy, and I was desperate to move on to a more modern ecommerce platform.

I’d been interested in Magento for a while as it appeared to meet all of our functional needs as well as being very affordable, and so, after a short period of due diligence, we embarked on an implementation of the Enterprise Edition.

Little did I know then, that it would take over a year to launch the site. But that’s what happens when you combine a very small team, with a lot of operational responsibilities, with the requirement to integrate with an internal order management system that’s about 10 years old.

The new Supercircuits website

Lesson learned #1: If you are about to embark on a major Magento implementation, I highly recommend making use of their consulting services at the outset. An architectural advisory will set you back a few thousand dollars but will make sure you pick the right architecture plan so that your implementation goes more smoothly. We did a lot of learning as we went, which slowed progress as you might expect.

Another challenging area was the migration of product data from the old site. Although we have a little under 1,000 SKUs, because they represent video surveillance equipment, they each have a lot technical specs along with various other complexities.

We had originally intended to manage product data programmatically via a centralized master data management system, but in the end, this proved too much to try and implement along with everything simply developing and launching the site.

As a result, we did not make proper use of attribute sets for classifying different product types, the results of which we are living with today (one day we will have the product comparison tool set up correctly). On reflection, we would have been better off entering all the product data manually and using the extra time to clean up the organization of our technical specs.

One area where we did make the right decision was not to attempt a complete site redesign at the same time. The relaunch was intended to be a “copy exact” — use the base Magento Enterprise store template and overlay our design on top of it. This worked pretty well, as the base Magento template looked nicer than our old site anyway, and we were able to make some further visual improvements in addition to this.

The good news is that we are now in a place were we can start making some more aggressive site design enhancements, now that the back-end heavy lifting has been completed.

A significant reason to move to Magento is its extensibility and the wide range of extensions that have been developed for it. If you can think of a feature, chances are someone has developed an extension for it. The great thing about this is that it reduces implementation time and cost for new features dramatically. I’m like a kid in a candy store with all the additional ecommerce capabilities that are now available to me.

Lesson learned #2: Not all extensions are created equally. I recommend limiting the number of extension vendors you use so that you can be confident in their quality and reduce the potential for code conflicts. We have mostly used extensions from aheadWorks and Amasty. Not only do they create great products, but the support of both vendors so far has been excellent.

Another reason I like Magento is that, as with Google Analytics and WordPress, because the basic edition is open source it has a huge install base with lots of people developing for it, figuring things out, writing blogs and tutorials, and answering questions.

Consequently, if you have a question about or an issue with Magento, it’s likely that someone has run into it and someone else has come up with a solution. The value of this wealth of information cannot be overstated.

One final downside of the extended development time for this website launch is that Magento Enterprise has moved on to version 1.12 while we are still on version 1.10. I do not intend to underestimate the effort to upgrade to the latest version, but it is something that we will need to tackle in the near future. If you don’t, as you move further away from the current version, the cost and effort to upgrade just gets larger and more daunting.

A feature that we intend to take full advantage of over the months ahead is Magento’s multi-store capability. At some point in the future I intend to have all of our sites running on the Magento platform which will be a huge efficiency gain for my team in terms of managing multiple websites and stores with a common product set.

One area where we have learned a lot is in regards to SEO. While we did all that we could in terms of onsite SEO, we (by we, I mean I) only redirected about 1500 URLs in our htaccess file. However, we have thousands of old product documentation PDFs which I did not have the time or will to get to before the launch which were still receiving links and traffic.

As I started seeing 404 errors pop up in Google Analytics for those pages and files, I began a multi-week process of updating the htaccess file, so that we now have over 6000 redirected URLs.

I am now keeping our htaccess file updated on a monthly basis by running the URLs being redirected to through Xenu’s Link Sleuth, which lets you check an imported list of links (very handy). As redirected URLs break (for example, when products are discontinued and are removed from the site) I’m updating the redirect to keep it working. It’s very manual, but worth it in my opinion.

We’re now on a two-week release schedule for new features, which is aggressive but achievable. One module that we are replacing as soon as possible is our site search. Magento’s default search algorithm is garbage. Incredibly, instead of using AND for an operator it uses OR, which means that the more terms you use to refine your search, the more results you get. It’s completely backwards!

There is a truism when it comes to learning Drupal — once you’ve built your first site, throw it away and use what you’ve learned to build it again correctly. There were a few times along the way that I thought this about our Magento development process as there is certainly a learning curve and a ‘right way’ to architect it.

Now that we’ve launched, I’ve certainly got no regrets about choosing Magento as an ecommerce platform, and I’m looking forward to everything we can do to expand and enhance it.

Lessons Learned from Launching an Online Store on Magento

WordPress Tips: Getting More Attention With “Blog Stage”

Editor’s note: This is a article by Greg Narayan aka The Blogger, a 25-year-old guy from New York who answers about 150 blog questions before breakfast. Go ask him a question now, and find him on Twitter or via email.

As bloggers and content creators we have a lot to share. Your blog is a platform. But do you ever feel like no one is reading? Yet when you look at your Google Analytics account you see plenty of traffic. So, what’s going on?

Sadly, the traditional positions of blog post and sidebars aren’t as effective at delivering a message nowadays. Content consumers are quick to bounce and you must be a bit more creative to get their attention.

Good thing your blog/website contains a valuable spot called the “stage”. What/where is the blog stage? Why is it super-useful? Let’s take a look at how to edit, style, and effectively use one of your blog’s hidden hot spots.

Related:

• 
  Most Wanted WordPress tips/tricks (Part I)
  


• 
  Most Wanted WordPress tips/tricks (Part II)
  

The stage is versatile

Have you heard of a "blog stage”? Well, assuming you didn’t go ballistic on your web design Singapore and rewired it completely, you should have one.

The stage sits right below the page navigation but above the top post. It’s an ideal place for announcements and subscription forms mostly because it’s where your readers’ eyes naturally go when they visit your blog. The stage is where the majority of readers focus their gaze on your homepage. Think about it, it’s front and dead center.

The cool thing is that the items on your blog stage show up only on the homepage.

Ideas for a blog stage:

• 
  Product giveaways – Product giveaways need attention, you usually want to direct folks to social media pages.


• 
  Capturing subscribers – Lots of blogs place neat forms here that allow readers to opt into a list.


• 
  Soliciting feedback – My stage has an announcement asking for feedback on a recent eBook.

Some easy WordPress coding

Editting the stage is easy – this is definitely beginner-level coding. At the same time it’s a trick you won’t see used too often, so it’s pretty effective.

I should be clear, this won’t work if you use WordPress.org and can’t edit the code. If you use Blogger, you can edit the stage simply by putting an HTML/Text gadget above Blog Posts in the layout tab.

If you use WordPress.org and a reasonable premium theme, this will prove to be easy.

To start, navigate to the dashboard and go to Appearance > Editor. Then go to index.php, and find this code:

<div class="content-loop">

Your stage exists immediately below this code and we’ll put the announcement there.

valuable stage items

What are you eagerly awaiting to tell or show readers? Creating a simple message for your stage is crucial but here are three examples of features I’d put there:

I – The Facebook like box

Built a ‘Like’ Box yet? With Facebook’s developer API, it’s easy. Just choose your settings then hit Get Code, select the ‘iFrame’ option, and insert into your blog stage as indicated above.

‘Like’ boxes look pretty, and even more so when there are thousands of faces of fans who have ‘Liked’ your Facebook page, but if you’re just starting out, that box may not get many inline clicks.

Let’s check out other options you can try.

II – The simple announcement

My first announcement was all about a giveaway contest I ran for Adobe CS. By commenting and ‘Liking’ a blog post, they could win a copy of CS Master Collection at my blog. An awesome offer, but not if nobody knew about it.

As a general rule, this part of your blog is super effective for attracting more blog comments on a certain post.

III – Subscription forms

I talk a lot about Aweber in my writing. They let you web design Singapore beautiful subscription forms where users can enter their email, name and any other information to join your email list.

These forms are ideal if you want readers to subscribe by email and can be placed in your stage with one line of javascript Aweber generates for you. Alternatively, you can also try MailChimp.

Sure, you could put anything in your stage space. You could put your favorite song via mp3 download or one of those school bus photo displays of you for each year of schooling you did. It’s totally up to you, so be creative.

Watch The Video Tutorial

If it this is all too hard to swallow, here’s the video tutorial for this page.