Does your focus get thwarted by a whole hierarchy of distractions? If so, you’re definitely not alone!

We asked our Pixafy team how they stay focused on the tasks at hand in a world full of distractions. Here are their tips for staying on track:

Tom: Headphones. I enjoy everyone’s company but sometimes I just need to go into “code-mode” and zone out at the task at hand.

When not at work, I keep focused by keeping active. I don’t give myself down-time to think about what I can do but rather what I should do (running, walking my dog, side-projects, etc.)

Kurt: Red Bull. Enough said.

Matt: For extended periods of intense focus on a difficult task I will actually incorporate another simple (but tedious) task so that when I get sick of doing the tedious work I go back to the difficult work, and vice-versa.

Rachel: I second the music although there are times when a quiet environment will help over music. I’ve read somewhere that music with lyrics can sometimes be more of a distraction because we unconsciously want to follow along with the words versus listening to music that serves more as a backdrop to our thoughts.

Setting up a routine also helps – like having a cup of tea! I try to plan ahead or draw visuals, whatever helps. And if a task really feels like torture, then heck, sometimes bribing myself works: “Get through this one task and buy yourself some ice cream after work because you deserve it.” Totally works for me.

Max: Only music helps me to “abstract” from everything and dive in to my own object-oriented world.

Sean: To stay focused, I let my mind decide when to do work. Rather than force myself to work when my mind is wandering, I allow it to wander and be free. Once I feel my mind ready to concentrate again, I put headphones and work like a well-oiled machine.

Gee-Gee: Music? Check!
Beverage? Check!
Phone silenced? Check!
Fullscreen distraction-free mode? Yup!

ONWARD!

Manny: When I need to focus, I put on my headphones and some music. If I’m really into a task, I’ll tend to wait a little longer to reply to instant messages so long as they aren’t urgent as to not disrupt my flow.

Abe: I personally like to have everything set up before I “go in” when working.

It could be anything from queuing “go in” music (could vary from day to day), having snacks and drinks around arms length, having all details, tasks and deliverable times in check.

Tanveer: Active noise cancelling ear buds. I don’t know what I’d do without them!

Do you have any tips for staying focused? We’d love to hear how you stay on track! Leave us a comment or tweet us @Pixafy.

We share daily tips, articles, news, and more on Twitter @Pixafy — are you following us? We’d love to hear from you, so be sure to tweet and follow us!

Here are a few useful tweets from our account, for your viewing pleasure:

• The WordPress Query Generator helps you generate WordPress Query loops in simple English! (via @KISSmetrics)

Generate #WordPress Query loops in plain English! kiss.ly/13GeHKQ

— KISSmetrics.com (@KISSmetrics) May 20, 2013

• Unsuck Your Backbone, or at least your Backbone.js! Amy Palamountain @ammeep talks about Backbone.js, a popular JavaScript framework that helps you structure your code MVC style, and how to make it awesome. You can even watch a video on her talk: Codemania 2013: Amy Palamountain on Backbone and Marionette.

Unsuck your backbone: Amy Palamountain @ammeep helps you “betterify” Backbone.js! bit.ly/ZbDy9T #JavaScript #Backbone

— Pixafy (@pixafy) May 21, 2013

• Extending Magento’s topLinks to Include Nested/Dropdown Child Menu’s on StackExchange details a useful way to include nested menu items in Magento. (via @MageOverflow)

Extending Magento’s topLinks to Include Nested/Dropdown Child Menu’s bit.ly/10IIjG8

— MageOverflow (@MageOverflow) May 20, 2013

• How Mobile Is Transforming the Shopping Experience in Stores on Google’s Think Insights page discusses how smartphones are changing the retail landscape. (via @Nexcess)

How Mobile Is Transforming the Shopping Experience in Stores – nexc.es/14wYOFh – via @thinkwithgoogle

— Nexcess (@nexcess) May 17, 2013

• People Are More Likely to Survive a Plane Crash Than Click a Banner Ad [Infographic] on Unbounce.com  delves into the performance of banner ads versus native ads, which are typically more visually-engaging than the banner ads. (via @KISSmetrics)

People Are More Likely to Survive a Plane Crash Than Click a Banner Ad kiss.ly/12FTTke

— KISSmetrics.com (@KISSmetrics) May 21, 2013

• Marketers Push to Take Email Mobile examines how many marketers have not begun optimizing email for mobile yet. Only 42% of marketers currently design emails optimized for mobile devices. (via @Litmusapp)

Only 42% of marketers are designing emails to render differently on mobile devices: lit.ms/11UTuZ3 via @emarketer #emailmarketing

— Litmus (@litmusapp) May 2, 2013

• What is a WordPress Child Theme? Pros, Cons, and More discusses what is a WordPress child theme, advantages and disadvantages of using a child theme, and when you should use it, on @wpbeginner. 

What is a #WordPress Child Theme? Pros, Cons, and More – wpbeg.in/ZKZ5ol

— WordPress Beginner (@wpbeginner) May 6, 2013

• Sublime Text Resources for Front-end Developers has a great compilation of Sublime Text 2 links on the popular source code editing software. Thanks to @shanerjeffers for including Pixafy’s Five Handy Sublime Text 2 Tips on the list!
  

Sublime Text 2 resources featuring articles from @jeffrey_way @maccaw @drewbarontini @josh_earl @robdodson bit.ly/11Xm5hZ #sublime

— Shane Jeffers (@shanerjeffers) May 2, 2013

Do you have a good article, resource site or tip that you want to share with us and our followers? Post it in the comments below or tweet us @pixafy!

With shows like “Mad Men,” “White Collar” and “Downton Abbey” putting the suit back in the spotlight, Pixafy client Alton Lane is well-positioned for growth, and was featured in a recent Boston Globe article highlighting the trend.

The company, which opened a physical location in Boston last fall to join sites in New York and Washington, offers the ability to get custom suits made based on the precise measurements of an individual. An appointment can be made at their locations to have a private fitting completed using 3-D technology, and thanks to this and other technological improvements, it can drive down the cost of getting a fitted suit made.

Alton Lane encourages customers to bring in garments that they feel fit them particularly well, so they can learn from how that garment is cut. Their custom approach is appealing to a younger generation that is adopting the suit as a fashion statement, driven by icons such as Justin Timberlake.

Pixafy’s assisted Alton Lane for some time, at first combining a set of unintegrated systems and unifying them within their existing Magento framework, and then extending and building atop their platform to allow for more options and customizations to fit the unique needs of their business and clients. An iPad-friendly version of their toolkit, also integrated within Magento, allows for quicker showroom work.

For those seeking custom-fit suits, Alton Lane is an excellent choice. Check out their website, either to place an order if you’ve already been measured, or to schedule an appointment for a private consultation.

Abraham Kwak is the newest member of our Pixafy team, bringing with him an enthusiastic love of interactive design and development. His background makes him a great addition. We asked him our standard interview questions as he was settling in:

Q:  Where are you originally from?  Do you still have family there?  Do you have any siblings?  If so, what do they do?  Any significant/insignificant others?

A: I was born and raised in NJ. NYC has been my “2nd home” growing up. Most of my family is in South Korea. I am the only child.

Q:  How did you get into the world of web design/development?

A: I always had a love for design and technology from when I was young and began my professional career into interactive design & development in 2007. I focused my studies on user interface & experience development and picked up JQuery along the way.

Q:  Any mentors/other people who’ve been particularly instrumental in your direction to date?

A: I was very fortunate to have friends that were involved and professional working in the art & design scene, so I had access and influence to all sorts of different design cultures.

Q:  What is the part you look forward to most in the Creative Director role?

A: To create and deliver a lasting impression and overall great experience to all users.

Q:  What is the most difficult part of designing a website?

A: Knowing when to stop and deliver. I believe that goes the same for developers & engineers as well. One takes great joy and pride when creating & developing. It’s your ‘baby’ and subconsciously represents a part of who you are. You want it to be the best thing possible.

Q:  How did you discover Pixafy?

A: I learned about Pixafy in 2009 while looking for possible internships when I was half way through my studies in interactive media design. At the time I thought to myself, “I would like to work amongst some of the brightest developers & engineers…maybe I should look into this JQuery and Javascript”. I never thought in my wildest dreams that I would eventually become a Creative Director here!

Q:  What is your first impression of Pixafy?

A: I’m surrounded by genius developers & engineers, my dream came true! I am one of the biggest advocates for developers & engineers. To me they are the “unsung heroes” because most of the time the user will look at the visual aspect and never really understand the internal workings.

Q:  What do you hope to accomplish at Pixafy?

A: To be an asset and creative force for Pixafy, while designing, creating and delivering an amazing experience for all future projects.

Q:  What’s your favorite part about New York City?

A: What’s there not to love about NYC? The vibrant and many different scenes in both art and music. You can find inspiration at any corner and stop.

Q:  What kind of music do you listen to?

A: I am what you call a “music snob”. Ha! I wouldn’t even know where to start. I listen to anything and everything. I love music. I studied audio engineering as well so music is a big part of my life.

Q:  Any unusual hobbies that we should know about?

A: I enjoy recording and having sessions with friends at a home studio which one my friend owns. I am also an “unofficial” comics, video game and Star Wars fan. “Unofficial” meaning that I won’t necessarily collect or cosplay as any character but obsessed with knowing the history or lore of each character. I AM OBSESSED with Metal Gear. Fun fact: Before MGS4 came out I declared on message boards that Big Boss would be brought back to life. I got flamed badly and when the game came out…well let’s say I went around a lot saying “I told you so”.

Q:  If you won the proverbial lottery, what would you do with your windfall?

A: Go to outer space. Have ‘real’ lightsabers built. Start a kick starter and invest rest of the money into building the Death Star.

Q:  What’s something that no one at Pixafy knows about you (until now)?

A: I have a great sense of determination. Having used to weigh close to 280lbs in high school. Playing video games 8 hours straight during summer breaks did NOT help. I decided to turn things around and get healthy. It’s my determination and drive to keep pushing the envelope that has gotten me to where I am today.

Sublime Text 2 is one of the fastest code editors around. It’s also stable and extendable, with a number of plugins that allow you to heavily customize your editor. We received a lot of interest on our previous blog post on Sublime Text 2, so we decided to write a follow-up with Sublime Text 2 advanced techniques. This is part one, for your reading pleasure!

Sublime Text 2 Projects

The first thing to cover is Sublime Text 2 Projects. Projects allow for specific settings on a project level and with certain plugins installed, they allow for indexing which saves time when using intellisense plugins. (For more on intellisense, go to https://github.com/Kronuz/SublimeCodeIntel.)

There are a few ways of setting up projects, but we will keep it simple for now. With Sublime Text 2 open, press Ctrl + Shift + P. That command opens up a command palette with fuzzy searching capabilities. (Fuzzy searching means that by typing some of the letters of your search term, ST2 will display possible commands you want to execute. And from experience I can say that the first options displayed is normally the command you want.) Now start typing “add,” you should see “Project: Add Folder” as one of the options to choose. Make sure it is highlighted and press enter.

Once you press enter, you will be presented with a file picker window. Choose the top level folder for your project and press enter.

Now that we have our folder for our project, it is time to save the project so we can set any project specific settings we may want. Again press Ctrl + Shift + P and this time, start typing “save”. Navigate to “Project: Save As” and press enter.

Simply save the project as whatever you want and wherever you want and presto change-o! You now have a project!

Hmm…… so what do we do with it? One thing that I find is that I switch between projects a lot during the day and instead of bogging down my computer by having fifteen separate ST2 windows open, I use another awesome shortcut to easily switch between them, saving me time and RAM.

With ST2 open, press Ctrl + Alt + P. Whoa!

That’s right, this is the project palette. You can now switch between projects in seconds. Also if you have an emergency, your computer shuts off, or if you just forget to save a file, since it is now part of a project, ST2 will keep your file state even without a save. (Just don’t make that a habit, as it is never safe to close projects without saving your work.)

 Snippets

Nothing ST2 has to offer compares to the power of the snippet. I use them constantly, and I would say using snippets saves me no less than 30 minutes of programming time a day. Ask yourself one thing, how many times do you repeat the same code over and over? Now if you already use snippets then I welcome you to the fold of those who code smarter not harder! If you do not use snippets however; then you are in for a treat!

Let’s start with something simple. Crack open ST2 and either open or create a PHP file. Now sometimes even though you are in a PHP file, it may be a template file that contains a majority of HTML and you need to use PHP in it a lot for that awesome dynamic capability PHP offers to the front-end. It gets old real quick when you are constantly typing something like this:

<?php echo $somevar; ?>

Wouldn’t it be awesome if you could just type “echo” and press tab and all of that code would just be there and not only that, but that placeholder variable would be highlighted so you could keep typing and complete the whole mess without having to stop or type it all out? Well you can, but not only that you can take it one step further by ensuring it only happens in a PHP file. Let me show you how.

This time we will use the ST2 menu and not the command palette. Go to Tools > New Snippet:

After you select New Snippet, a file should open that looks like this:

Now comes the fun part! The first part to notice is the ${1:this} and ${2:snippet}. These are going to be placeholders. So when you invoke this snippet the cursor will go to “this” and that word will be highlighted so you can change out your variable, then if you were to press tab again “snippet” would be highlighted so you could replace that placeholder. Let’s create our own snippet so you can see it for yourself.

Replace the text between the content XML tags with this:

<?php echo ${1:\$var}; ?>

You should have this:

The first thing to notice is how I escaped the “$” for my PHP variable. ST2 used the “$” to mark placeholders in snippets, so you have to escape them to tell ST2 to write it out and not put a placeholder there. (NOTE: if you create a snippet and call it but the whole snippet doesn’t display, chances are that you didn’t escape a “$”. This is especially important with PHP and jQuery snippets.)

Okay, next we need to give this snippet a tab trigger, to do that, uncomment the XML that has the “tabTrigger” tags and replace the inner text with “echo” like so:

Cool! We are almost there! Now we just have to prevent this snippet from showing up unless we are in a PHP file, to do that we set a scope on it. Uncomment the XML that has the “scope” tag and replace “source.python” with “source.php” like so:

Now it’s time to save and test our new snippet! Press Ctrl + S to save the file. The file window should open to your User folder for ST2 — this is where I save my snippets but you can create a custom folder for them if you wish. I also generally name the snippet the same name I give to the tab trigger, so when I need/want to update the snippet, I can find it easily.

NOTE: It is very important that you save your snippet with the “sublime-snippet” file extension. ST2 does not do this for you on its own, you must enter it in yourself like so:

Now we can test it! Go back to the PHP file you opened/created earlier and type “echo” and press tab. You should have a PHP echo statement with a highlighted variable like this:

Pretty cool, right? I use snippets to start jQuery plugins, create PHP classes in seconds, and so much other stuff I could list them all day. If you find yourself writing it more than once a week, save it to a snippet and you will be happy you did!

Using Dropbox to Store Packages and Sublime Text 2 Settings

Sublime Text 2 is a very powerful text editor and it is extremely customizable, this is a great thing but if you are like me then you use it on your computer at home, on your laptop, and on your computer at work. It can be a big pain to keep three to four installations of ST2 up to date with one another in regard to plugins, theming, settings, and so on. Wouldn’t it be nice if you had one set of packages and settings that were shared across all installations? Prepare to have your mind officially blown!

First things first, you need a Dropbox account. If you don’t have one, go set one up and come on back! https://www.dropbox.com

Secondly, this section is for Windows users. It is possible to do the same thing on a Mac, I am personally unfamiliar with Mac terminal at this level of usage and therefore do not want to provide information that is either inaccurate or not the best way to do something. For the parts where there is a difference, I will let it be known and do my best to point Mac users in the right direction for answers they need to set this up.

Okay I will now assume that you have set up Dropbox and are ready to rock and roll! The first thing to do is create a sublime folder in your Dropbox folder like so:

Next move the “Packages”, “Installed Packages”, and “Pristine Packages” folders from “Users\yourUsernameHere\%APPDATA%\Sublime Text 2\” in to the Dropbox folder you created:

For Mac users, you have to find the folder with Sublime Text Packages and move them to Dropbox.

Next we create symbolic links for the directories pointing from the Sublime data directory towards your Dropbox folder. In order to do this, you need start cmd.exe as Administrator. Navigate to %APPDATA%\Sublime Text 2 before executing the following commands:

mklink /D "Installed Packages" "C:\Users\YOUR_USER\Dropbox\apps\sublime\Installed Packages"
mklink /D "Packages" "C:\Users\YOUR_USER\Dropbox\apps\sublime\Packages"
mklink /D "Pristine Packages" "C:\Users\YOUR_USER\Dropbox\apps\sublime\Pristine Packages"

For Mac users you have to find the file path for your SB2 folders and the command that matches mklink which creates a link to that directory, like a short cut.

Now just backup and remove the package files from your other installations and make links to Dropbox just like you did above and all of your installs will share settings and packages! Pretty awesome if you ask me!

(NOTE: if any package you use is dependent on something else, that must be installed manually and is not done with this trick. Example: plugins that require Node.js, you need to have it installed on every computer for the plugin to work properly.)

Also it is best to pick the package folders that have the most up to date plugins and so on since once they all link to the same one.

Alright, that wraps up the first part of this tutorial! Check back for part 2 soon!

—

Similar posts on Sublime Text 2: 

• Five handy Sublime Text 2 tips
• Sublime Text 2 advanced techniques [part 1] (current)
• Sublime Text 2 advanced techniques [part 2] (coming soon!)

Do you have any advanced techniques on Sublime Text 2 that you’d like to share? We’d love to read your questions and comments, so drop us a line! 

We recently asked our Pixafy team which apps they use on a regular basis and received a ton of responses! Last week, we brought you part 1 of “50 Essential Mobile Apps.” Here’s part 2, with 25 additional essential mobile apps that Pixafy folks use on a regular basis:

26. NYC Subway Maps by mxData: Using the iconic MTA map of NYC subway, the app is a useful mobile companion for mapping out and calculating your travel routes. When you have network coverage, you can get live info on the stations, too.
27. OpenTable: Make restaurant reservations while you’re on the go. Helps you find restaurants in your location and make reservations.
28. Pandora: Personalized internet radio that makes music discovery a cinch. Users can create streaming audio stations based on musical tastes.
29. Pulse: Consolidates your favorite magazines, social networks, and newspapers in one place. Sharing a story via social media and email is easy and streamlined.
30. Right Track: Metro North: (Android): Provides quick an easy access to Metro North train schedule information with real-time status updates. Gives you departure, arrival, and travel times along the East-of-Hudson lines with no Internet connection necessary.
31. ROM Toolbox Lite (rooted, Android): A mega app for rooted Android devices that shows all the unlocked features you need to customize your device.
32. Seamless - Easy way to order food for delivery or takeout. (At the Pixafy headquarters, we also use Seamless when we don’t want to pay with cash!)
33. Seconds Pro (paid, iOS): Great for gym-use, this app is useful as an interval training timer.
34. Songza: Acts like your “music concierge”! The app plays appropriate music for any situation or mood.
35. SpanishDict: Handy reference for Spanish language learners. Features a Spanish-English dictionary, talking phrasebook, “Word of the Day,” and interactive word game.
36. Splashtop 2 (paid):  Remote access software solution that allows users to connect to and control their computers from tablets and phones at fast speeds.
37. SwiftKey (paid): Awesome keyboard for mobile devices. It “learns” your typing style from across different programs and offers you better auto-corrections and next-word predictions.
38. Team Viewer: Access remote computers while on the go, with all of its documents and installed applications. Remotely administer unattended computers, servers, etc.
39. Titanium Backup (rooted Android): Powerful backup and restore tool for your apps, data, and Market links, including all protected and system apps, as well as external data on your SD card.
40. Tumblr: Share photos, gifs, video, music, quotes, chats, links, and text from your phone.
41. Twitter: Tweet, share, and keep abreast of breaking stories!
42. Uber: Uber acts like your on-demand private driver. You can request a ride using  the app or from m.uber.com. Simply set your pickup location on the map and a driver will pick you up there.
43. UberConference: UberConference adds a new visual dimension to audio conference calling. You can create conference calls on the go, and it’s integrated with all the major social networks. Simply click on a participant while on the call to bring up their info from their social media accounts.
44. UberSync For Facebook: Allows you to synchronize your Facebook contacts with Android. Also Syncs photos (high-res), events, birthdays, etc.
45. Venmo: Give or receive money from people quickly with Venmo. It makes splitting the check with friends at lunch less of a chore. Venmo will auto-alert your friends when you’ve transferred the money to them.
46. Youmail: Youmail is a visual voicemail tool that allows you to handle all your voicemail messages just like e-mail. It attempts to identify unknown incoming callers by name, with the option to block callers. You can even set up personalized greetings for callers.
47. WebMD: Whether you’re a hypochondriac or looking for quick medical info, WebMD comes in handy as a medical reference database.
48. WiFi Tether (rooted): Enables tethering via wifi for rooted handsets running android.  Clients/devices can connect via wifi in ad-hoc mode and gain internet access using mobile connection.
49. Weather Underground/Wunderground: Great no-nonsense weather app.
50. Into the Dead: And sometimes, after a long day of getting stuff done, you just need to shake off all that productivity with a good game of post-apocalyptic zombie-fighting. With great visuals and intense gameplay, Into the Dead throws you into the gruesome world of the zombie apocalypse where there are no second chances.

—
This post is part of a series on essential mobile apps. To view the other posts:

• Part 1: 50 essential mobile apps [part 1]
• Part 2: 50 essential mobile apps [part 2] (current post)

What are your favorite, must-have apps? Do you use your apps in creative ways? Drop us a line in the comments — we’d love to hear them!

Pixafy always looks at various benefits that we can offer our employees.  We launched a new one we can’t wait to “dish” about: Catered lunches.

We have partnered with a company that brings food from restaurants across the city directly to our office twice a week, with food ranging across all sorts of countries and styles. The diverse nature of the menu dovetails nicely with the eclectic team we have at Pixafy.

Having catered lunches encourages the team to eat in and just relax for a half hour, allowing the team to interact outside of actual work requirements, and which contributes positively to the company culture.  Our conference rooms become lunch areas for a time, where people can eat, chat and enjoy a relaxing mid-day break.

We believe that offering a variety of options that benefit our employees helps contribute to a happy work environment.  What does your company do?  Tell us in the comments!

Time Magazine featured SusieCakes in a recent write-up about how their business is bucking the trend of many bakeries that put too much focus on cupcakes, instead of quality baked goods as a whole.

SusieCakes’ assortment of goods, focused on family recipes that Susan Sarich brought to the business, eliminates unnecessary ingredients and focuses on quality products the whole family can enjoy. They focus on the basics, and do them incredibly well, which those who have ever sampled their treats can attest.

Their broader range of cakes, pies, sugar cookies and, yes, cupcakes, also offer a wider assortment of choices, keeping things fresh. The constant of quality baked goods at celebrations – weddings, birthdays, etc. – also provides a steady and growing business for the company.

Pixafy has been the technology partner of SusieCakes since the relaunch of their website, continuing to support the business as it grows.  Their online store runs on the Community Edition of Magento.

SusieCakes’ philosophy (which includes a refreshing take on workers putting in normal hours instead of crazy ones) portends well for the success of the company, and Pixafy looks forward to being there and supporting their needs as the business grows. Be sure to check out the Time article for more insight as to Susan’s unique philosophy and how they see themselves growing in the future.

 

Pixafy is thrilled to introduce guest blogs to our site. If you love our posts and think you have a must-read topic to contribute, please drop us a line!

The following post is by Justin Butlion, Content and Social Marketing Manager at Yotpo. 

Why social commerce will become the eCommerce standard

The eCommerce industry, like every other industry online, has been shaken up by the socialization of the web and the explosion in smart phone adoption across the world. The industry as a whole has benefited from the billion or so people that have connected online in the last 5 years but overall has been slow to integrate and leverage the numerous social tools and networks available. In this post I will focus on this hesitation and make an argument for why those that decide to adopt social commerce principles will be around to tell the story, and welcome in a new era, where social commerce becomes the eCommerce standard.

We have changed with the times

The average internet surfer’s behavior online today is very different to how it was 5 years ago. Not only has the time we are spending online gone up but how we are using our time has fundamentally changed. A large percentage of our time is spent engaging with our peers on Twitter, Facebook, Reddit, Path, Pinterest and many other social networks and it is this shift which has changed everything.

The average American spends over 6 hours on Facebook every month. During that time he or she is exposed to literally thousands of posts by friends, family and acquaintances. In order to cope with the constant flow of information we have developed strong filters and essentially we have become blind to most forms of advertising and branding that we are exposed to online.

This information overload has changed how we filter information and made it tougher for brands to stand out but when they do it is usually through a recommendation by a friend.

Why recommendations will continue to be a driving force

It is in our nature to listen to our peers because when we were still working out how fire worked, if we didn’t, we would die. A true and tested way to filter out bad information has always been to ask our closest friends and family and it is this innate behavior that helps drive the recommendation economy.

The real power of recommendations, and in particular social recommendations has been well documented. Social networks like Facebook and Pinterest are bringing large numbers of visitors to online stores and generally have a better conversion rate than search or direct traffic.

Many startups are popping up in this area as social commerce continues to grow from strength to strength. The combination of social and ecommerce and tying them together with big data and smart analytics is a very interesting prospect that has many entrepreneurs interested. The startup that can map the social commerce graph of the Internet and build powerful marketing tools that leverages these insights will have massive power and influence in the industry.

The power of the community

Social media has made the world much more transparent to what both companies and the general public were used to. The fact is that individuals adapt much quicker than organizations and this creates an interesting dynamic in the business world. Because people adapted to social media and some companies saw the shifting winds and started to embrace the numerous tools rather than dismiss them as fads, we became used to seeing some of our favorite brands speaking on a one-on-one basis to their fans. This shift from companies simply pushing advertising down our throats to a more equal relationship where there was much more listening going on resulted in a shift in our expectations towards brands.

Companies which have embraced social media and focused on building strong communities not only have a strong competitive advantage because of the “social market share” they control, but also have a community of loyal fans marketing their brands on a regular basis. Companies like Starbucks, Whole Foods and Oreo are some of the companies which have had the most success with social media but any brand as obscure as you can imagine can still benefit from social media.

You can’t survive as a business without changing with the times

The shifts in our behaviors and perceptions online have created a world dominated by our desire for interconnectedness and expression. The Internet has become a social Internet and will continue to stay social as we try and humanize everything around us. The companies that make the decision to integrate social within their business activities will be more likely to be around for the next major shift online.

Survival in business has always been about being able to change with the times, and this is even more important online because things move at a much faster pace. Embrace the social web, invest in it, and leverage it to build a better, stronger and faster growing business.

Working on a responsive site a little while ago, I was running into a very strange problem where elements were refusing to line up.

I had a list of menu links (<a> tags wrapped in <li>’s) and above them I had <h3> tags labeling each section. All the widths I was using are % based. The <h3> tags were 100% of the wrapper, the <li>’s the same (and their wrapping <ul>’s), and the <a> tags were 90% width with 5% padding on the sides (90%+5%+5% = 100%) width <span>’s wrapping the inner text.

And yet somehow the <h3>’s were appearing a tiny bit longer than the <a> tags when testing on mobile! In fact they were exactly 0.5px off. That is really odd and I knew it had to do something with subpixel rendering:

If you don’t know what subpixel rendering is, do a quick Google search and you will likely come up with most of the same results I did when trying to combat this latest responsive design pitfall. There are a lot of articles and blog posts that describe how great subpixel rendering is, and even older ones that were waiting in anticipation for every browser to support the feature. CSS subpixel rendering occurs when you have CSS values that result in decimal or partial pixel values. This is usually the result of using percentage based layouts.

An example would be having a containing <div> with a width of 555px and four child elements with a width of 25%. That means each child element is 138.75px when rendered. So how do browsers (and your monitor) interpret the extra 0.75 pixels? In older browsers everyone had their own way of doing it. IE would round everything up, Safari would round down, and Firefox would try to do a “best guess” width, with some rounding up and others rounding down.

But wait! The top search results are mostly out-of-date because this feature has been out for quite a while! Modern browsers like Chrome and iOS Safari (the browsers I was testing on) are supposed to have resolved this issue. Most of the time.

There were still a few edge cases in which it seemed my problem fell. Through my searches, I read many explanations, but there weren’t any explanations for the exact problem and how to fix it. This post is in response to that lack of information so that hopefully, anyone with the same problem as I can see my fix. I did come across the background color issue with percentages, but if my issue was only that, the <a> and <h3> would both be half a pixel off, allowing them to line up.

Back to the problem at hand.

So how could items that should be the same length be half a pixel off? Well first, I should show you a basic version of the HTML and CSS that I had:

This HTML was coming from Joomla (version 1.5) so changing it was not an option. That narrows down the approaches I could use to fix it. My first approach was to increase the wrapper width from 96% to 98% in the hopes that it would be that quick of a fix. My hope was dashed quickly, but what I did notice is that the issue sometimes went away depending on the page width.

For example, on our iPhone 4, the half pixel difference was clear as day in portrait mode, but it was gone in landscape. So the issue did depend upon the wrapper width. It seemed the calculations on the <a> tag and the <h3> were “usually” the same.

It was at this point that my issues reminded me of an old IE7 padding bug. To test my new theory, I removed the padding from the <a> tag and made it 100%. Suddenly in portrait mode, everything lined up! Awesome, except for the fact that I needed the padding, otherwise the text would be right at the edge. So I moved the padding to the <span>’s inside my <a> tags. I also made the <span>’s display: block and I did not put any width on them at all.

And eureka! The edges line up no matter how wide or narrow the page width!

So if you happen across an issue like this, give these solutions a try:

1)      Change/clean up your HTML. 95% of the time, this will solve the issue.

2)      Make sure you are using an up-to-date normalize.css or CSS reset file. Also make sure there are no issues with inherited styles.

3)      If it’s still not fixed, make your layout styling match on your elements.

4)      When everything lines up, add your padding back in for the elements that were off. Best bet to add it to a child element.

Thanks, and I hope this helps someone else out!

—

Did you find this “CSS subpixel rendering” article useful? Share our post!

Follow us on Facebook: Pixafy
Follow us on Twitter: @Pixafy

Leave us a comment with your thoughts and questions!