About: Aaron Rubman

Website
http://www.marissaberger.com
Profile
Aaron is a SF Bay Area native, and has worn many hats at MB/I, from Administrative Assistant through Project Manager. Before joining the MB/I team, he was a high school math teacher. He also dabbled in theatrical design, web design, and computer trouble-shooting. Aaron has been with MB/I since 2008, and has been overseeing maintenance and content integration since 2010.

Posts by Aaron Rubman:

New Year’s (Screen) Resolutions

Jan 6, 2014 by Aaron Rubman

Have you ever gone back and looked at a website designed in the late 80’s?

Either the text runs all the way across the screen with a bare minimum of branding and styling, or else the entirety of the copy is compressed into a narrow column of text running down the center or left hand side of the page. But if you cast your mind back, the designs didn’t look like that back in the 80’s -  at that time they filled the full screen.

So what changed?

In 1984 it was a big deal to have a screen width of 640 pixels. This effectively determined the maximum size of a website - but it is less than half the size of a typical modern screen. While some people still browse the web with 320 pixel monitors, others have 2560 pixel width monitors.

Top 3 Screen Widths

There are three screen widths that should be paid special attention.

1024 px
14% of all desktop web traffic comes from monitors of this size
95% of modern web traffic comes from monitors this size or larger
Designing to this size produces a website that is near-universally accessible

1280 px
19% of all desktop web traffic comes from monitors of this size
79% of modern web traffic comes from monitors this size or larger
Many designers now treat 1280 px as their “standard” design width

1366 px
28% of all desktop web traffic comes from monitors of this size
55% of modern web traffic comes from monitors this size or larger
This is both the median width for modern desktop web traffic and the single most common screen resolution.
Designing to wider screens is generally unwise at this point.

Responsive Design

For a long time, web designers would pick a single screen resolution and design for it to the exclusion of all others. However, as we can see by looking at old websites on modern monitors, this does not future-proof the design, nor does it take into account mobile devices with their smaller monitors.

The answer is Responsive Design. When a developer produces a responsive design, they are arranging the same content for anywhere between 3 and 6 screen widths each customized to the standard resolution of a mobile, tablet, or desktop monitor. The same content is typically displayed in all versions of the design, but arranged to better serve the devices it will appear on.

Visible or Optimal: Your Website on Mobile

Sep 5, 2013 by Aaron Rubman

If you have a website, you have a mobile site.  Don’t believe me?  Try typing your URL into the web browser of your tablet or smart phone.

Something’s there right?  In fact, unless your developer was completely unaware of the mobile web it probably looks something like your regular website.* So why are people talking about mobile websites if pretty much every website out there has already “gone mobile?”

* Unless you used a lot of Flash.  Flash gets no love on mobile devices.

The answer is that existence is not enough.  A website that looks beautiful on a 1024 pixel screen (typical in most laptops) is going to be tiny on a mobile that is only 480 pixels wide (most iPhones).  Roughly 80% of the site’s area is lost in the conversion from big screen to small, and links that had been easy to decipher start requiring magnifying glasses.  Unless you take action.

Designing for Mobile

An optimal mobile design is built with the limitations (and capabilities) of mobile devices in mind, rather than treating smart phones and tablets like miniature desktop monitors.  Google acknowledges three methods for such sites.

Alternate URLs

The mobile site has an entirely different structure from the core website. Facebook uses this approach (you may notice that mobile devices get re-routed to m.facebook.com) - as do most companies who employ a different developer for their mobile site. However, Google does not recommend this approach as it can lead to broken redirects or inaccessible pages.

Alternate HTML

The same site architecture is used for both mobile and desktop browsers - but each has entirely different code.  This might be used on a site that has abbreviated content for its mobile users.

Adaptive Code

Both mobile and desktop browsers execute the same code - but the code itself has been designed to respond to the display device.  Such a site typically has between 3 and 5 distinct designs corresponding to different screen widths or device orientations.  It is Google’s preferred mobile design, and the type that they use themselves.

“Rules” of Adaptive Design

Everyone takes a different approach to Adaptive Design, but there are four main rules that help to keep everything mobile friendly.

1. Never design anything that requires horizontal scrolling.

2. Ensure that text is visible no matter what the size of the screen.

3. Make sure that content areas adjust to accommodate various volumes of text.

4. Ensure quick loading times for any “above-the-fold” content* - Google now suggests less than 1 second.

* “above-the-fold” is a term that web designers stole from the newspaper world.  It
refers to any content that appears on a website before you start scrolling.

In order to meet these guidelines, it is not uncommon for the mobile-friendly designs to include alternate navigation, or for sidebars to get relocated under the main content.  Using columns of fixed width can help ensure that this resizing happens in a smooth and continuous manner.

What about apps?

There is one inescapable aspect of the Mobile landscape that I have not yet touched upon: Apps.  It is comforting to think that you are so important to your customers that they would gladly take up some of their limited hardware space for an easy access, easy interface website –

You, know - with the exception of Google Maps, I don’t think I have a single App on my phone that mimics a website.  Why would I bother, when I have the internet?

An App needs to be a value added proposition.  Google Maps qualifies, because it integrates with my GPS system to provide directions from my current position - something the website is not as good at.  An app can also be useful to keep key information available if you expect your visitors to be in a location without reliable wireless access (campers’ tips, warehouse maps, and convention calendars come to mind).

However, if your “app” is going to be exactly the same as your website without a significant increase in accessibility or functionality you would be better served directing your efforts towards an adaptive design.

What is Compatibility Mode, and Why is it Causing Me Problems?

May 20, 2013 by Aaron Rubman

What is the Purpose of Internet Explorer’s Compatibility Mode?

In 2007 the W3C group announced major changes in their recommended website design standards with plans for even greater changes in the future.

  • https://en.wikipedia.org/wiki/Cascading_Style_Sheets
  • http://en.wikipedia.org/wiki/HTML5

In order to make sure that Internet Explorer would still be able to display sites built to the old standards, Microsoft added in the Compatibility Mode feature.

Compatibility Mode described for IE9

  • http://windows.microsoft.com/en-us/internet-explorer/products/ie-9/features/compatibility-view

What does Compatibility Mode Do?

In order to guarantee reverse compatibility, Internet Explorer browsers in Compatibility Mode render websites in IE7.

More Information

  • http://webdesign.about.com/od/internetexplorer/f/what-is-ie-compatibility-view.htm

Why is This a Problem?

At the time when IE7 came out, there were fewer industry wide standards. Each browser had its’ own rules for implementing HTML, and Internet Explorer was notorious for not allowing features common on other browsers.

But Why am I Seeing the Compatibility Mode when I didn’t set it?

compatibility-menuWhen Microsoft first introduced the Compatibility Mode, they built in an option to view all websites as if using IE7, then they turned that option on by default.

Any upgrade which preserved your past settings would leave the browser running in IE7 for all websites.

Microsoft’s Letter Announcing Compatibility View

  • http://blogs.msdn.com/b/ie/archive/2008/08/27/introducing-compatibility-view.aspx

So how do I turn Compatibility Mode Off?

compatibility-allTo turn off Compatibility Mode, you will need to open the Tools menu in Internet Explorer, find the Compatibility View Settings, and uncheck the box labeled, “display all websites in compatibility mode.”

At this point you may also need to locate Compatibility View option listed about half way down the menu. Make sure the option is unchecked.

If you cannot find your Tools menu, try these directions from Microsoft:

  • http://answers.microsoft.com/en-us/ie/forum/ie9-windows_7/ie9-always-rendering-pages-in-ie7-compatibility/c0177b44-3950-e011-8dfc-68b599b31bf5

Tip of the Week: Write Your Facebook History

Apr 22, 2013 by Aaron Rubman

Facebook suggests that new company pages start with a minimum of 5 Milestones.  Whether real or fictitious, these milestones should reflect the company brand.

So what goes into a milestone?

  • Every good milestone needs a descriptive name
  • A date (to determine where it appears on your timeline)
  • A high quality image (840 px x 400 px)
  • A one-paragraph description
  • and (if it serves your brand) a location

These milestones will appear as major landmarks on your Facebook timeline, cutting across both sides of the screen.

Boston Marathon

Apr 15, 2013 by Aaron Rubman

Our thoughts go out to everyone at Copley Square and the Boston Marathon.

If you have news that someone is safe, or are still waiting to hear for sure, both Google and the Red Cross have set up information sharing sites:

Both sites are operating under a heavy load, but are providing much needed information.

Tip of the Week: Ask for Objections

Apr 8, 2013 by Aaron Rubman

Are you having a hard time getting past a prospective clients’ objections? Does it feel like you pass one hurdle only to have another thrown in your way? Rather than getting worn down or giving up from running such a slalom, see if you can straighten the course a little.

The next time someone expresses a reservation, ask if they have any other concerns. After all, you can’t formulate a complete response when you don’t even know all the questions.

Once you have the full list, you can recast yourself from adversary to ally as you work with your prospect to help them find ways to overcome their objections. If it seems like some other vendor would help clear a gate on the way to making the sale, suggest them.

You’ll still be clearing the course for your own sale - but you’ll also have demonstrated that the prospects needs come first.

Content Prompt: Turn it Upside Down

Apr 1, 2013 by Aaron Rubman

Looking for something to write this April Fools’ Day?  Try turning your product (or business model) on its head.

For example, if mb/i were in the business of making websites less attractive, we’d probably produce a geocities-izer of our own.

If you can get your audience to scratch their head and wonder if you’re serious - you’ve won!  Just remember to clear up any confusion on April 2.  Better still, schedule a clarification to launch at 12:01 a.m.

Tip of the Week: Draft your positioning statement

Mar 25, 2013 by Aaron Rubman

In January, Dale Riehart wrote a great list of ways to prepare for working with a professional writer. One of his suggestions is that business clients prepare a positioning statement.

Of course, a positioning statement isn’t just important for a professional writer. It’s a valuable tool to have whenever you want to talk about your product or company. Think of it like an elevator pitch for copy - short and to the point. So how do you prepare a positioning statement?

Dale offers a proven and elegant solution: ad-libs.

Just fill in the blanks appropriately and you’ll have your positioning statement.

For <<target audience>> who need <<unmet need>>, <<product name>> is the <<short product description>> that <<way product meets unmet need>> because <<reason to believe>>.

Did you find that helpful? Try reading Dale’s entire article.

Content Prompt: Why should I believe you?

Mar 18, 2013 by Aaron Rubman

We all know that I have a vested interest in promoting mb/i, that Tim Cook has an interest in promoting Apple, and that you are interested in the success of your own business endeavor.  So when you tell me how much better my life will be with your product, why should I believe you?

Wait!

Hold that thought, because you can’t.  However, independent research, competitive data, and honest testimonials can.  If you’re looking for something to write in your blog, tell me where I can find these things.  And if you’re so inclined, expand upon them.  Your readers will make up their own minds about what they chose to believe, but it never hurts to put the data you’re providing in context.

Tip of the Week: Set an Online Goal

Mar 11, 2013 by Aaron Rubman

How do you measure success?

How about your website’s success?

Drawing a blank? Then maybe it’s time to figure out your website’s “finish line.”  I’d be willing to bet that you had some sort of a goal in mind when you first decided to build a website.  What were you trying to do?

  • Make a sale online
  • Grow your mailing list
  • Initiate contact with potential clients
  • Share critical information with the community
  • Drive business to a brick and mortar location

Each of these suggests a different ‘finish line,’ and if you aren’t watching it you’ll never know how useful your website has been.  No time is better than the present to single out the objective you’re most interested in.  Once you know that, all you need to do is figure out a way to measure it (and mb/i would be more than happy to help).

Welcome to The Gold Mine

The Gold Mine is a blog developed by MB/I to assist site owners with the process of developing and maintaining a website. MB/I is a full-service web development company building websites since 2000.

Follow MB/I in: