Category Archives: Development

Guide to Cross Browser Testing

Development, ,

browsersFor developers, cross browser testing can be the bane of existence. Every browser has slightly different rules and standards, and making one website work on all of them can be tedious and time consuming.

It used to be even worse before the World Wide Web Consortium started standardizing the web. Back then browsers like Netscape and Internet Explorer (IE) just rendered websites however they saw fit.

Thankfully, there’s a lot more streamlining in browser development now, and for the most part, your website will probably work just fine on all the standard browsers. However, it may not look great on all of them.

Yes, I’m looking at you, Internet Explorer 6, 7, and occasionally 8!

Web developers anywhere can tell you that the worst offender of browser standards non-compliance is Microsoft, but their browser also happens to be the most popular browser on the planet since it comes bundled with Windows. So, it’s worth your while to be sure your website looks good in IE.

So while you’re at it you’ll want to test your website in the latest versions of Firefox (currently 19, but they seem to update every 20 minutes these days), Chrome, and Internet Explorer for sure, and then work your way backwards. Firefox and Chrome tend to render websites the same way, regardless of the version, plus they more aggressively push their updates, so your viewers are likely to have the latest version anyway.

Internet Explorer is a whole different story (surprise, surprise). Not only do people go years and years without updating to a new version, but each one renders websites based on different rules. So, you’ll need to test your website in IE 10, 9, 8… and as far back as you want to go. Few people (if any) are running anything lower than IE 6, but lots of web developers stop worrying about compatibility around 7 or 8. You can’t win ‘em all, and maybe that person will consider updating their browser.

But HOW do you go about browser testing? Well, the easiest thing would be to have a Mac and  a PC running Firefox, Chrome, Safari, and Internet Explorer so you can just hop on and check them out. Most people, however, only have one computer, so what you need is a good cross browser tester, and there are tons. Each have their merits but we like these three, particularly because they are free:

SauceLabs - Shows all browsers on all platforms, but with a free account, you only get 30 tests a month. However, this is actually an interactive test, so you can browse through the sites. A big win.

Browsershots - With over 60 browsers, and some you’ve probably never even heard of, this is definitely the most comprehensive browser tester, but it only does screenshots as opposed to the interactive test. It’s great for getting a quick idea of whether your formatting looks okay across many platforms! We’d definitely recommend unchecking most of the browsers, though, because the most browsers, the longer your shots will take to load.

IE NetRender - Only shows you your site in Internet Explorer 5.5 through 10, but it’s quick and easy. This one only does snapshots too, so you can’t test the user interface of the site.

Other good options include CrossBrowserTesting (premium) and Spoon (free but Windows only). Now you’ve got no excuse for your website to look weird in any browser!

Free Photo Editing Software and How to Use It

Development, ,

One of the most frustrating things for people who are running their own websites is image formatting. The most common needs are simple cropping and color adjustment – changes that could certainly be handled by a program like Adobe Photoshop, but it will cost you hundreds of dollars.

What most people don’t realize is that simple edits can also be done in simpler programs. Mac users often turn to iPhoto, while PC users might even look to Microsoft Paint, but figuring out how to do basic edits can be anything but, well, basic.

Enter Pixlr, an awesome little web-based photo editor. That means it will work on your computer whether you’re a Mac or PC user, and it won’t take up valuable hard drive space. Win win, if you ask us!

So when you land on Pixlr, you’re going to see the following options…

pixlr

Let’s start with the Pixlr-o-matic or “Playful” editor. Once you select this editor, you’ll be prompted to either upload a photo or to use your webcam to take a new one. Then, when you’ve got your photo, you’ll find this editor works a lot like Instagram – you can choose from a large array of photo effects, borders, and overlays. It’s much fun, and can take any photo from okay to awesome in no time.

basic-editor

But you’ve got more serious work to do, perhaps. Head on into the Pixlr express or “Efficient” editor instead. Again, you can use a webcam or upload a photo, but you also now have the option to pull a photo directly from a URL. This editor also offers a lot of effects, borders, and even stickers you can add to your image. Unlike the previous editor, though, it also has some more advanced photo editing features.

express editor

As you can see, you can crop, blur, sharpen, get rid of red eye, rotate, color adjust, and much much more. From the crop screen, you can alter by aspect ratio, or exact pixels.

express-cropping

In short, the Pixlr express editor is probably exactly what you need. Once you’re all done with your image, just press Save, and you can download the image right to your computer.

Basically, Pixlr is the best, but I know you’re wondering about the Advanced editor. If you already know Photoshop, this might be where you’re most comfortable.

advanced editor

There are no more cool photo effects, but more powerful editing tools. Similarly to Photoshop, you have layers and many of the same tools. If you’re looking to create an image from scratch, this is the best option!

We hope you’ll go play with this amazing little tool. We’re so glad it’s free and available to everyone!

6 Tools for Choosing Your Website’s Color Scheme

Development, , ,

color-paletteThe right colors can make all the difference between a web design that shines and one that falls flat. Regardless of whether you’re setting up your first site or you’re a seasoned front-end web developer, chances are slim that a full color scheme complete with hexagonal codes (that’s the six-digit color code, i.e. #000000 for black) just comes to you in your sleep. It takes some research.

The good news is that there are lots of tools to help you on your chromatic journey, and the very first one you’ll want to grab is…

A Good Color-picking Browser Add-on
As simple as it is practical, this little tool makes any color you see on the web (including those in photos) available to you. The idea is that, when you’re on a web page and want to see what the hexagonal or RGB code for a color is, you just click the add on. Then, just hover your mouse over the color, and voila! You get the code. There are dozens of these add-ons available for Chrome and Firefox, so choose one, then start color-shopping!

Kuler Palette Creator from Adobe
There are lots of palette generators out there, but this one is our favorite because it’s straightforward and flexible. Plus it delivers great results! It also features a fantastic library of pre-made color schemes if you want to go with something tried and true.

ColourLovers
Beautiful eye candy abounds at ColourLovers, and we especially love their trends page for inspiration. Seriously, we could browse it for hours. How did it get to be 7 already?!

TinEye Labs Multicolor Photo Search and Color Extractor
TinEye brings us not one, but TWO awesome color tools. The color extractor is more useful for choosing colors in the first place: just upload a photo and the tool will make a whole color scheme based on the photo’s chromatic composition. The multicolor photo search is awesome when you already have your colors and want a complementing photo: just plug in your hex code and the search digs through all of Flickr’s Creative Commons database to bring you photos that match that color. It’s very cool, so go play!

Psychology of Color Chart
Sometimes it’s not enough for your colors to look pretty, you also want them to invoke the right emotions. This chart found on LifeHacker can give you a better idea of the subconscious implications of your color choices, and perhaps set you off in the right direction if you’re not sure where to start with your color scheme.

Happy coloring!

Guide to Image Formats for Web

Development

flower-image-formatsImages for your site can be in several formats, all readable by your browser. The differences are pretty subtle, so let’s go over the specifics of a few of the most common image formats:

JPG/JPEG - Joint Photographic Experts Group.
When you save a file as a JPG, your image undergoes a “lossy compression,” which simply means it loses some of its data, resulting in a smaller file size. Most of the time, the human eye can’t detect the slight image deterioration, so this is a great file format to use for light-weight, quick-loading images. Sometimes though, JPG quality has a fuzzy quality when displaying large swatches of one color or gradients, but photos with lots of color detail can be rendered beautifully in this format. JPG images can display up to 16 million colors, but cannot have a transparent background. For that, you could turn to one of the next two formats.

GIF - Graphics Interchange Format.
A favorite format for animated Internet memes, GIF images end up with a small image size because they also undergo compression. However, the compression is different than JPG, because instead of reducing the information in each pixel, GIF reduces the number of colors in the photo to only 256. Where color is important, GIF is not your format, but for rendering small files with only a few colors, GIF is a great alternative to JPG. It also supports transparent backgrounds and animations!

PNG - Portable Networks Graphic. A successor of the GIF format, PNG also supports transparency. Unlike GIF’s limited 8-bit palette (256 colors), PNG supports 8-bit and 24-bit (16 million colors). PNG uses lossless compression, so your file retains all the information in each pixel. Sadly, there’s no animation with PNG though.

BMP – Windows Bitmap. Not the web friendliest of file formats, BMP was originally used for the images in the Microsoft Windows operating system. BMP files store a lot of information, and are, therefore, very large files relative to the image size. In addition, BMP images don’t scale very well, so they’re not a good option for web.

TIFF – Tagged Image File Format. Another large file format, TIFF is better for print and photography than the web. It can use lossy or lossless compression, and even supports half-tones and image layers. It isn’t always supported in browsers, though, so it’s best to convert these files to JPG, GIF, or PNG before uploading.

Speaking of converting, here’s an incredibly useful web-based application for editing photos and/or converting them into a different format: Pixlr.

Hope this helps you decode a little more webby jargon and use the best file formats for your web images!

Web Design Guide: Choosing Your Fonts

Development, , , , ,

“Typography is the craft of endowing human language with a durable visual form.” -Robert Bringhurst, The Elements of Typographic Style

In web design, one of the most important (and often overlooked) elements of a website’s aesthetic is the font choice and usage. As the building blocks of words, the font’s characters become the medium for conveying the site’s message. A good typographer will put serious thought into the personality of the fonts that will relay that message.

Until recently, though, graphic designers only had a handful of web-safe fonts to choose from. Luckily for the enthusiastic typographers amongst us, the ever-more-beautiful web has brought about new resources like Google Webfonts and Typekit that greatly expand the options. But with the new options have come two major pitfalls concerning fonts:

  1. Opting for the obvious. Don’t get us wrong, Arial, Helvetica, and Times New Roman are very fine fonts with pleasing details. Though stigmatized as “plain” or “default,” they make for excellent font choices when selected for the right reasons. However, when simply chosen because they are the default, they can leave something lacking in the overall design.
  2. Too deliberately avoiding the obvious. Yes, font selection is a Catch 22. The most important part of a font is reader comprehension, but even a legible font may overwhelm the eye if too small or too dense.

Luckily, it’s not as hard as it may seem to avoid typographical ruin and land on the perfect fonts. We’ve got some great tips to help you along the way, but first of all, it’s worth defining a few key terms.

Font and Typeface – Though some strict typographers will scoff, these terms are essentially interchangeable these days. If we’re going to be exact (and we may as well), a font is what you use, while a typeface is what you see. An apt metaphor is the difference between an MP3 and a song – the MP3 is the mechanism (the font in this case), while the song is the creative work (the typeface).

Readability and Legibility – The distinction here is even more subtle than between font and typeface, but it is a core concept of typography. Legibility is about the characters and spacing. Can the eye can read the words easily? If the reader needs to reread or squint, the typeface isn’t legible. Readability is about the composition of the text – does it please the eye? In paragraph form, does the typeface look approachable? If not, the font lacks readability.

Header Font and Body Font – This one is easy. The body font is used for the core content (the paragraphs), and the header font is used in shorter segments like headlines and other titles. When choosing a body font, it’s obviously important be sure the font is legible, but more often overlooked is that it is readable in paragraph form. In terms of readability, header fonts are more flexible because they are used in shorter lines of text, but it’s even more important for them to be eye-catching.

Font Combinations – While some websites have beautiful designs that employ a single font for both the body and headers, designers more often employ two or more fonts. A classic choice is to go with a sans serif font for headers and a serif font for the body, or vice versa. There are no hard-fast rules, but generally speaking, here are some guidelines:

  • Consider heirarchy. Your headers should be obvious to the reader as headers and distinct from the body copy. If one font is loud or bold, it should be the header font, and the body font should be appropriately austere so the overall composition is easy on the eye.
  • Don’t mix mood. A fun font will look strange next to a serious font.
  • Match fonts with subtle similarities. A header font and a body font that seem very different but share a key characteristic or two can really hit it off. Look for the overall shape of letters (round, oval, or square) and height (tall or squat) to get started.
  • But avoid fonts with strong similarities. Two bold fonts or two slab serif fonts might just look too much alike, making your typography just look messy.
  • Keep sizing in mind. An appropriate size disparity between a header and body font can make all the difference in whether they clash or harmonize.

In our first panel, we’ve paired a fantastic Google serif font called Abril Fatface (great name right?) with one of our favorite classic fonts, Century Gothic. The body font here is highly readable, but it’s so round that it conflicts with the more decorated oval shapes of the header font. Century Gothic is also too light for the heavier Abril Fatface.

In the second panel, we’ve paired it with another Google font, Andana, which features more oblong letters and complementary details. As you can see in the e’s and a’s – the overall  letter shapes are similar, but the heavy vertical strokes in the header font make them different enough that they don’t clash.

Serif or Sans Serif? Easy – it doesn’t matter as long as your fonts are legible, readable, and look great together.

Stylized Fonts. The key with using a more elaborate font, like a cursive or decorated font, is scarcity. These fonts tend to have low readability, so take time to consider the personality of the font and exactly where you want to use it to make the biggest impact without detracting from the composition.

This only scratches the surface of typography as an art, but we hope it will help you choose the right fonts for your website!

 

6 CES Tech Innovations to Watch in 2013

Development, , , , ,

It’s day 2 of the Consumer Electronics Association (CES) event, and even if you can’t be there in person, there’s a lot to be excited about. New gadgets abound, and we thought we’d share our takes on some of them.

Here’s our list of the most promising innovations at CES, as well as what we think are the biggest busts:

BEST: Self-driving smartcars

Ok, truly autonomous cars that will let the “driver” sit back and relax are still a few years off, but we’re already so pumped for this technology that will reinvent the way we get from here to there. Not only will self-driving cars increase the amount of time we have for other activities, but it will reduce traffic accidents and, ultimately, the speed of travel. Cars will be able to go faster, with less room between bumpers.

This year at CES, Audi announced that the company is ready to begin testing its autonomous vehicle on public roads in Nevada. So far, their technology still requires an alert human behind the wheel for special scenarios, but the car takes care of the overall driving, even capably navigating stop-and-go traffic and parking. Toyota is also developing autonomous functionality in their Lexus brand, but officials insist they are not looking to replace the driver. Google is already way ahead of them, having run self-driving car tests last year, but we’re glad to see competition in the space!

BUST: The Pebble smartwatch.

We’d love to love this gadget, but smartwatches have a ways to go before we’re interested. So far, the Pebble has been frequently compared to the previous generation iPod Nano on a watchband, but the Pebble has a few key differences. First and foremost, it doesn’t have a touchscreen – a huge downfall. But the gadget does offer a few cool features including a sharp monochrome e-paper screen, several pretty options for the watch face, and Bluetooth pairing with iPhone and Android for reading emails and texts. It’s also water-resistant and has a seven day battery-life. (Photo: GetPebble.com)

But the screen is small, and there’s no keyboard for responding to texts or emails. Since phones are already totally portable, and way more functional, we’re not seeing the niche for the watch. The developers promise that more apps built just for the Pebble are coming soon, but for the time being, the features just aren’t enough to merit the $150 price tag.

BEST: Smartphone with LCD and eInk

The new Android YotaPhone (by Yota, the company that developed the LTE network) packs the LCD touchscreen we’ve all come to expect on a smartphone, but flip it around, and there’s an eInk screen! Simply swipe two fingers down on the LCD screen to send a map, article, boarding pass, grocery list, or anything else to the eInk side. Then, keep the eInk side on for hours without draining the battery. Both screens are protected by Gorilla Glass 3, which was also just unveiled at CES.

The phone still needs some work, though. Reviews complain that there’s no auto-locking mechanism to disable the LCD screen when viewing the eInk side, resulting in accidental clicks from the hand holding the phone. We’re still interested in this inventive concept, though, and hope to see it hit the mainstream market soon. (Photo: Yotaphone.com)

BUST: Smart refrigerators

Technology companies are now looking to make your home smarter with super-advanced appliances, but we fear they may have missed the mark this year. Both Samsung and LG presented new refrigerators that are really little more than expensive iceboxes with LCD screens. The $4000 Samsung fridge’s claim to fame is integration with Evernote for keeping your grocery list accessible in the cloud. LG’s smart fridge (price unknown) boasts “Smart Manager” software, with a freshness tracker, recipes, healthy eating plans, and grocery list, plus a smartphone app so you can access the software on the go. Both fridges also have some other fancy, but completely extraneous features, like weather apps, news apps, and even photo albums, yet neither can independently track what goes in and out of the fridge. That means all those fancy list-keeping apps are about as useful as a magnet and a piece of paper, but hey, at least they cost thousands of dollars more.

BEST: Voice-controlled TV

Samsung may have struck out with us in the home appliance category, but their new TV has us intrigued. The F8000 television comes in sizes from 46” to 65” and features Samsung’s redesigned “Smart Hub” technology, which, amongst other things, has Siri-like voice recognition software to help you find what you want to watch. Speak into the remote to ask when your favorite television show comes on or a list of available romantic comedies. You can even simply say “Play Arrested Development,” and the TV will scan live channels, recorded content, as well as connected apps like Netflix or Amazon to find all the relevant search results.

Since TV content comes from so many sources these days, we’re glad to see a television that embraces and simplifies them into one fluid experience.

BUST: Vibrating Fork

With so many people looking to live healthier, we don’t doubt this device will be as successful as any fad-diet. However, we also expect it to have similarly ineffective results over the long run. The HapiFork (pronounces “Happy Fork”) promises to train you to slow down while eating by vibrating if you’re eating too quickly. It’s like a shock-collar to keep a dog from barking, except it’s a fork to keep you from eating. There’s a spoon too, and they cost $99 each.

The fork also connects via USB or Bluetooth to your iPhone or computer to provide data on how long your meals are and how many bites you take. Consistently tracking this data would involve eating with the same fork for every meal and carrying it with you on the go. Not only does that sound like a health hazard and a good way to get food bits in your purse, but the fork looks huge, bulky, and off-balance. And what about finger foods?!

 

Whether bests or busts, all the new technology being showcased at CES has our geeky interests piqued, and we can’t wait to see where it leads us for 2014.

iPhone Apps for Spring Cleaning

Development

It’s that time, people. Quit your groaning and get motivated with these apps to digitally improve your Spring Cleaning efforts!

Chore Pad
Keep your ongoing chores organized with this super-handy app, which will not only let you make a list of chores, but will also reset them every day, week, or after any number of days you specify. Plus, you can add all the members of your family as users and divide up the chores among them! Then, assign points to each task, and let your family collect them for prizes. Promise the kids ice cream when they get to 10 points, and they’ll rush to get their chores done! ($2.99 /
Feng Shui Bagua Map
Discover your inner peace by rearranging your furniture! We’re sure it’s a little more complicated than that, but a little change of decor might be just the ticket to getting your zen on. ($1.99)
ColorSnap by Sherman Williams
Get ambitious and repaint! This app will let you browse the whole catalogue of Sherman Williams paint colors, and, even better, you can snap a photo of any color that catches you eye and match it to a paint color. Then use the app to create a whole custom palette for your room and head to Home Depot! (Free)
LockBox
Don’t limit your Spring organization efforts to your home, though! If you haven’t already invested the time and effort into setting yourself up a password keeper, we highly recommend it. This app will reduce the number of passwords you have to remember from dozens (maybe hundreds!) down to one. With strong encryption and an easy interface, this app will keep all your passcodes, account numbers, and sensitive data under lock and key, but right in your pocket. (Free)
Tracknburn
While you’re hard at work, don’t forget about getting your health in ship-shape, too! Put your diet and exercise routine in order with this all-in-one fitness app. Track your weight, calories, and work-outs with a tap. The app even includes a database of restaurant menu calories, for when you’re eating on the go. You’ll be ready for summer in no time!
Screen Cleaner
And, finally, a “screen cleaning” app for your iPhone that will set a puppy of your choice licking away at the grime that collects on your screen. How cute is that? (Free)

Good luck with your Spring Cleaning!

Android Apps for Springtime

Development

It’s gonna be Spring out there soon – time to get outdoors! Since we’re firm believers that technology doesn’t have to keep people all cooped up inside, we’re put together a list of 7 free and almost-free apps sure to get you excited about warmer weather activities.

WindAlert
Flying a kite is a favorite activity for a windy Spring day. Be the wind aficionado for your kiting party with this app. It’s way more sophisticated than licking your finger and sticking it in the air. (Free)
MLB.com At Bat Lite
If the smell of peanuts and Crackerjacks heralds your favorite time of year, this app is for you. Customize the home screen to show the stats and colors for your team, then explore the latest breaking news, stats, schedules, line-ups, and even player data from Spring Training! For a whopping $15 you can upgrade to At Bat 11, which includes video archives, radio broadcast from Spring Training, and even live streaming of the games starting on Opening Day! (Free)
Rain Alarm
Sure, you checked the weather before you left, but – as we all know – those weather guys are not exactly infallible. With this app, you’ll get a little notice that the heavens are about to open up and a chance to retreat indoors. (Free)
Garden Snob
Get growing with this app full of tips, tricks, and ideas for starting and maintaining your own garden. The very thought of freshly picked tomatoes will make your mouth water, and just think of the satisfaction you’ll get from growing them yourself! (Free)
Grill-It
Because everyone knows, breaking out the grill is the best part of Spring. Break out your “Kiss the Chef” apron and use this quick and simple guide to perfect your cook times, learn new recipes, and wow your hungry guests. ($0.99)
U.S. Army Survival Guide
We sincerely hope you won’t have to use it, but if you do get lost out on a camping or hiking expedition, you’ll be glad you downloaded this. Building a fire, treating injuries and bites, constructing a shelter, finding edible forage – it’s all in here. Once you’ve installed the entire guide on your SD card, you can access it even if you’re not getting any reception. You can survive – at least as long as your battery does, too. (Free / $1.99 No Ads)
Spring Sunflowers Live Wallpaper
Cause who doesn’t like happy flowers? (Free)

Happy (almost) Spring everyone!

A mobile page for Memphis Storms

Development

Today we launched MemStorm.com (mobile browser only) as a community service page for smartphone users to keep up with Memphis Storms who don’t use Twitter. Twitter users had an unfair advantage of keeping up in real-time with the recent storm as it rolled through the area.

It turns-out (only being slightly snarky here) that if the tornado sirens are blaring, and you have your family taking shelter somewhere in your house, it’s probably without the television or some other normally valid source of information about the storm rolling overhead.

For savvy Twitter users, they could keep up with the storm updates from weather authorities AND regular everyday people.  The reporting from “people on the ground” is invaluable and a huge sense of comfort.  You can get a good sense of the significance from Amy Howell’s post here. Within that you’ll see the origins of the Twitter hashtag “#memstorm” by Aaron Prather, CEO of @stiQRd, at IgniteMemphis and some cool quotes from our very own, Rachel Smith (who, yes, also happens to be the stiQRd COO).

Three days later, with the threat of another monster storm, Dave latched-on to a tweet by Aaron about taking a smartphone when seeking shelter. At that moment it was a very valid point, if you were using Twitter. But what if you weren’t on Twitter…  and thus idea for the mobile page MemStorm.com (for the Twitter-nots).

What’s the Point?
The point is that through a great deal of community participation and inspiration, we’ve created a tool that will not only serve some utility for a period of time, but also inspire other, even better things. Inspiration is what it’s about.
This is the “social” mindset in action that we often allude to at the Social Expedition, and it’s very exciting.

Memphis, Y U Not Use Hashtags by: Aaron Prather

Who to thank? Lots:
Jonathan Chan, Phillip Black, Rachel Smith, Aaron Prather, LaunchMemphis,  Beth Sanders, Jason Miles, Justin Willingham, Seth Agranov, MemphisWeather.net, Amy Howell, Andy Glover, Alys Drake, Wings of Wolfchase, Memphis Light Gas & Water, and the Girl Scout cookies that fueled Dave Barger through most of this.

Remembering the Struggle for Civil Rights

Development, , , , , ,

The end of this workday doesn’t herald just any three-day weekend. Monday is Martin Luther King Day, and we hope you’ll take a moment to remember the pioneers of the civil rights moment. Their struggles are sometimes painful to remember, but only through learning from the past are we able to avoid repeating it.

To help the community in this endeavor, we have created a SCVNGR trek with 12 locations within two hours of Memphis that shaped the fight for civil rights. To access the trek, you must download the SCVNGR app (available for iPhone and Android), then on the app dashboard, simply select “Treks.” If you are in the Memphis area, the Mid-South Civil Rights trek will be one of your options.

We hope to expand this trek into a complete mobile website. For now, though, download this mini-guide for a little more information on each location. We hope others may be inspired to create treks to be interactive guides through our history. We’d be happy to help if you’re interested in using a location-based service, just call (901) 888-5862 or email us.