fiddlefly-mobile-vs-responsive

Which Mobile Solution is Best for Your Business?

December 19, 2013 | Jason Brover, Digital Solutions Consultant | 0 comments
Share this post:  
 

What type of mobile solution is best for my business and what does Google have to say about it?

I recently attended a webinar with Google that discussed mobile and the impact it is having on businesses around the country.  A question that continued to come up throughout the webinar and during the post-webinar Q+A was the question about mobile’s impact on SEO.

In general, Google supports two different types of mobile optimized websites, which can be configured in one of three ways.

The first approach is called Straight to Mobile (STM).  STM is the creation of a separate mobile website for anyone accessing your website from a mobile device.  This digital property is designed and developed to speak directly to the mobile audience.  It takes into consideration the psychology and behavior of a mobile user.  This approach can be configured in one of two ways; by creating a separate mobile URL or by serving different (mobile) HTML on the same URL.  In both of these applications the development team would create a specific mobile website and utilize a redirect to serve the appropriate website by determining what type of device is being used.  According to Google, as long as the website is optimized for mobile and utilizes pass through redirects (i.e. you don’t just redirect to the home page) then there is significant SEO value for mobile search.

The second is Responsive Web Design (RWD).  RWD is a method that makes management of the site easier (due to a single code base) but often leaves a lot to be desired in terms of the user experience. When using RWD, the website adjusts to various screen sizes to deliver desktop content reformatted on mobile devices.  Developers utilize proportion based grids and flexible images (amongst other things) to pack everything into a smaller screen.  Since all desktop content is squished into a mobile view and there is no need for redirects, a responsive website should have about the same SEO impact as desktop.

So which one is best for my business?

If you built a straight to mobile website and a responsive site and put them head to head, you would learn the following:

  • your  straight to mobile site would outperform your responsive site and deliver better results because it was designed with the mobile visitor in mind
  • your responsive site would be easier for you to administer, as you have only one set of code to work with (however, if you have a custom CMS then all things would be equal in this case)
  • either work well with Google and rate well with SEO when done properly

The reality is that unless the burden of changing pictures in two locations, or changing text in two areas out-weighs the positive results you get from straight to mobile sites, then responsive is not the way to go.  When you create a responsive website, you have to make compromises that jeopardize the results of both sites.  As our CEO, James Ramsey says, “When you go responsive you get a car-boat, which is neither a dependable car nor a sea-worthy boat.”  When you create a website specifically for mobile, you create the best possible mobile experience without having to make concessions.

Having your team create the best possible experience for each type of device, concentrating on a specific outcome when building a website, and creating a device specific environment that is conducive to your visitors taking action is the best choice.

Resources:

https://developers.google.com/webmasters/smartphone-sites/

http://marketingland.com/heres-the-slide-that-could-kill-responsive-design-

https://managewp.com/5-reasons-why-responsive-design-is-not-worth-it

CHECKIT OUT!

Web Developer Secrets: How to Improve Your Site-Loading Time

December 10, 2013 | Leo Petry | 0 comments
Share this post:  
 

Because of mobile, site-loading times are again a major concern for a web developer. In order to deliver fast loading fully optimized sites there are a series of steps which must be taken.  Before we get started, it is important to make sure your images and graphics are correctly compressed and optimized.

Usually images are the biggest files – excluding other types of media like videos – in a website. And, they often outnumber other kinds of files. This means that most of the loading time is actually spent requesting and downloading images.

Lets get to it:

To save an image for the web you can use the finger-twisting shortcut: cmd + alt + shift + s (Photoshop and Illustrator). There are 3 main types of image extensions:

jpg or jpeg

Jpegs are the most common format and offer the best compression for photographs. However, they do not support transparency and won’t render a graphic perfectly.

png

Pngs are the most versatile format and should be used to save most graphics. Photoshop lets you choose between png-24 and png-8. Use the 8-bit format with caution. Pngs-8 are usually smaller files than pngs-24 but they don’t have the same support for transparency. When using pngs-8 with transparency matte the graphic to the background color.

gif

Gifs are used in loading icons and other graphics that are animated. They should only be used when animation is required.  Gifs have a limited number of colors.

Sprites

The easiest way to describe a sprite is to say that it is a big image of many small graphics. Sprites are useful because instead of loading a bunch of small files, we can download just one big image that contains all (or most of) the necessary graphics and icons. It is faster to load one image of 500kb than 5 images of 100kb. Sprites generate fewer requests therefore they make your website faster.

*Don’t group photos in a sprite.

A simple sprite resembles a table. Each row contains an icon, each column a state representation of this icon.

Ex.: In your design there are links to Facebook, Twitter and Youtube. These icons should ‘light-up’ on mouse over. Your sprite table would look like this:

+—+—+

|  f  |  F |

+—+—+

|  t  |  T |

+—+—+

|  y  | Y |

+—+—+

File size

The size of the files used in your site depends on the dimensions and quality you want. A good rule of thumb is:

- Only banners and headers should be more than 100kb.

- Photo thumbnails should be between 30kb and 50kb.

Live text or image?

Live text is generally preferable, but sometimes it is wiser to use images instead. Images are a better replacement for text when:

- The text is overstylized.

- The text is in a particular font that is used only for a few words that are unlikely to change over time. Ex: Submit, Save, Call, etc.

Combine sprites with highly optimized images and you are going to notice a considerable impact in the loading time of your site, especially when it is loaded in a 3g network. Happy saving!

PARALLAX

Parallax: The Hannah Montana or Wrecking Ball of Design?

November 19, 2013 | Lauren Palumbo, Jr. Designer | 2 comments
Share this post:  
 

What exactly is Parallax and why is it so damn trendy in the web world?

It is best explained by comparison to our current favorite celebrity, Miley Cyrus. It looks amazing, sounds remarkable, but then comes in swinging on the wrecking ball of bad SEO.

Parallax is a type of site design in which the background of the website moves at a different speed as the rest of the page. This gives off an impressive visual effect that allows for countless creative applications and an amazing online story.

To give you a better idea of what Parallax looks like, here are a few examples:
http://www.spotify.com/us/
http://www.expresssolicitors.com/assets/nhs-payout-timeline.html

FiddleFly recently created a Parallax mobile site for Instant Systems as well: http://m.instantsystems.com/.

Now, let’s get into detail about what makes this design so sexy.

Pros:

Parallax can look amazing
When done well, the unusual look captivates visitors, making them spend more time on your site, scrolling up and down, watching the movement and changes to their heart’s content.

Story-telling capabilities
Just as Miley provides infinite material for Saturday Night Live writers to have fun with in their sketches, Parallax offers endless possibilities for story-telling. Parallax allows a website to walk visitors through a narrative just by scrolling down the page. Elements move in and out, allowing it to morph over and over again as the user moves through the story.

Fluid user experience
This makes it appeal to a younger crowd. The more fluid yet oddly linear style of communication keeps viewers on track, allowing them to absorb more of the company’s brand messaging. This approach works especially well with visitors who don’t like to click on a lot of links or browse through numerous pages to get the content they seek.

Layered appearance
The design creates a continuous scrolling feature in which graphic elements and text exhibit movement and interact with the scrolling motion. This creates a layered visual effect, which helps create depth between the background and the moving images, graphics and text.

So what could be so bad about something that looks so good?

Cons:

It is simply not SEO-friendly
Parallax scrolling normally means that a majority of your site is on one page rather than spread out over different pages with click through pathways. Therefore, you lose out on meta description and title tags, some of the most important factors in determing SEO rankings with search engines.

Multiple H1 headers on one page
Typically a website has one big H1 header per page, with sub-heads to follow. On parallax websites you have headers competing with each other since they’re on the same page. It’s a little like this year’s VMAs…were we supposed to focus on Miley, the dancing teddy bears, or that guy in the striped suit?! By having multiple H1 headers on one page, you lose the opportunity to target keywords in meta tags on your more traditional individual pages instead of one set for an entire paralax website.

Loading time
Image overload on a page can make your website slow to load. Since visitors often give a site less than 4 seconds before they bounce, slow loads can be the main factor causing a person to leave your site immediately.

Mobile device usability
Parallax scrolling websites are difficult to design responsively in order to work on mobile devices. Although there are some tools out there starting to deal with this issue, such as parallax.js which is meant for mobile, to date designing separately for mobile is warranted.

As a Parallax and a Miley Cyrus fan myself, here’s the best advice I can give about Parallax:

When using parallax scrolling on a website, continue to use separate pages instead of using anchors to navigate around one page. For example, you might use a homepage feature to show off the parallax effect, while utilizing links to other pages for more extensive content. As Miley has taught us all too well, too much twerking can actually be a bad thing. Your goal should be to make your site engaging, creating a unique user experience, while paying attention to important things, such as performance in searches. Everyone wants to stand out amongst competitors without actually riding the wrecking ball.

uiguy

Greg Talks UI: Fiddle Mobile Sneak Peek

November 15, 2013 | Kate Nelson, General Manager | one comment
Share this post:  
 

Earlier this month, FiddleFly announced the release of our new software, Fiddle Mobile. It is currently still in BETA and we would love for y’all to try it out and provide some feedback! In the meantime, we wanted to give you a little sneak peek at the software. So, we sat down with the one and only Greg Parker, everyone’s favorite UI guy, to take a look at the software interface…Check it out:

Want to learn more about our Fiddle Mobile software? Head over to the NEW site (really, its awesome)!

Stay up to date and keep in touch with us directly through Facebook and Twitter. You can also follow Greg on Twitter:@GregBParker.

MOBILE SOLUTIONS

How Much Does a Mobile Website Cost?

November 8, 2013 | Jason Brover, Digital Solutions Consultant | 0 comments
Share this post:  
 

One of the most common questions we hear is, “How much does a mobile website cost?” The simple answer is anywhere between free and $50,000, but the average is between $7-15K.  However, like all things, it depends on a number of factors.

It’s worth mentioning that although a mobile website renders on a smaller screen, it does not mean there is less work to do.  In fact, often times the strategy and concepting of the project becomes more difficult due to the limited screen real estate available on mobile devices. The challenge is in creating engaging and action oriented content/design without bogging down load speeds.

There are a variety of solutions on the market, each with different price points.  The three that are most often discussed are: Scraping tools, template sites and full custom solutions.

  1. Scraping Tools for Mobile Pages (Duda Mobile) – usually range from free to about $300.  The tool allows you to get a mobile web page up and running rather quickly.  You are limited in functionality and customization, but you can get something up quickly and inexpensively. (http://m.somethinggreek.com)
  2. Template Mobile Site – usually range from $1,000-$5,000, depending on scope of project.  These sites should have optimized content and can have a bit of a custom design feel.  This solution will give you a nice look and feel for mobile, without much strategy or outcome based UI/UX. (http://m.whiterabbittruck.com/)
  3. Full Custom Mobile Solutions – usually ranges from $10,000 – $50,000 depending on the scope of the project.  These custom solutions are specifically designed to engage with the customer and lead them down a path to take action.  There is a lot of thought and planning that goes into custom solutions making them more successful. (http://m.entrequest.com/)

When determining which solution to go with, there are more factors to consider than just budget.

  • • Check your traffic – if your mobile traffic is on the rise, like almost all sites are experiencing.  It may be worth the extra money to make sure you are well represented on mobile.
  • • Action orientation – make sure the solution you choose allows your customers to take action.  Visitors on mobile phones are more likely to take an action that your desktop visitors, this makes them more valuable to your bottom line.
  • • Legitimacy trigger – when your customers are looking at your company through a digital medium like their phone, they are judging your company.  A mobile site that represents your company well is an indication to your visitors that you are a viable and legitimate company.

The good news is that no matter what your budget, you can and should go mobile!

 

 

 

Transitioning to mobile? Check out our helpful tips!

5 Quick Tips for Designers Moving to Mobile

October 7, 2013 | Kate Nelson, General Manager | 0 comments
Share this post:  
 

 

Transitioning to designing for a different format can feel a little like learning a new language (most of us remember the pain of moving from print to digital). First, there’s new terminology, then we learn the context and finally we figure out how in the world to properly use it all. More often than not, there’s no time to fully immerse ourselves in the latest technology, so we just have to jump in and do our best to avoid embarrassment. There might be plenty of information out there to help with this transition, but when you’re starting a new job, it’s hard to find time to become a real expert overnight. So, here are the basics for building successful mobile sites.

• First things first, use the right words: There are no hover states in mobile. Tap instead of click. Fingers instead of cursors (and you better make sure it looks tappable). Swipe instead of scroll. Mix these up and you’re going achieve newbie status pretty quick.

• Set up your files for success. Whether you’re into building mobile sites or scaling responsive sites for mobile, we can all agree that we have to be aware of the variety of sizes and resolutions that viewers may be using. So, our trick is to set up files twice the size (but at the same resolution) of the final design to preserve quality for larger screens and for high-definition displays. You’ll be kicking yourself later if you don’t start with a high-res file. Just remember to optimize and scale down final outputs so you don’t slow down your site.

 • Fonts and buttons should be bigger, not smaller. The challenge is that they still need to fit within the limited format of a mobile screen without a ton of awkward breaks. Lists and buttons should also be spaced out enough to avoid “fat finger syndrome” which results in a frustrating user experience. Note: if you’re following the 2x resolution tip, make sure to make your font size is twice as big as you would at 100% (28px instead of 14px).

• The flow and general mindset is different for mobile. This means we have a shorter time frame to make an impact. Most users are looking to act, not browse for hours on these small screens. So, when choosing content, try to think about how you use your phone on breaks, between meetings, etc. Be intentional about creating clear hierarchy that is directed towards the desired outcome.

• We can’t rely on the user’s intuition. This means adding coach marks and sometimes full tap-through tutorials. Try to make your designs as intuitive as possible to eliminate the need for these additions. But, please don’t avoid them at the cost of your user. The fastest way to lose our audience is for them to not understand how to interact with your site, and be unable to find what they’re looking for.

Hopefully these can help some of you who are just breaking into the mobile space. When in doubt, just ask a coworker; designers love being able to share their expertise (and feel like an expert). Above all remember, experience is always the best teacher, so you’re bound to have a few snafus along the way. If you’re an experienced mobile designer, please share some of your top tips and tricks for the mobile transition.

For more in-depth best practices and mobile design resources, check out the links below:

mobilewebbestpractices.com

nngroup.com/articles/mobile-site-vs-full-site

https://shop.smashingmagazine.com/the-mobile-book.html

sidebar.io

The orders to go mobile are coming straight from the top.

May 24, 2012 | Mike DiMarco | one comment
Share this post:  
 

With campaign season in full swing and the nation still struggling to emerge from the seemingly bottomless economic pit of the past eight years, needless to say President Obama is a busy man. While he may have diplomats to meet with, bills to sign, and babies to kiss, those things have not stopped him from taking the time to focus on mobile. In a directive issued Wednesday from the Office of the Press Secretary, the President gave direct orders for all government agencies to optimize their websites for mobile devices.

During the 2008 election, we saw social networks become major players in campaign strategy, and this year many experts are predicting that mobile will make or break candidates’ campaigns. Wednesday’s initiative takes the mobile movement well beyond the campaign trail (though it will almost certainly end up benefitting President Obama’s re-election efforts) and into the national spotlight. (more…)