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:

Adaptive vs. Responsive: Which mobile design is right for my site?

May 1, 2014 by Aaron Rubman

Adaptive web design and responsive web design were built with similar ideas and goals in mind: how can you scale a website so that content is displayed in the best possible way for the device viewing it?

Responsive Design aims to increase the fluidity of the web page content so that it can shift and scale to accommodate any browser or device size. The content typically remains the same no matter which size device you use.

Adaptive Design is built for a number of per-determined screen sizes. The server hosting the website will attempt to discover the device being used, and will deliver the corresponding version of the site. Adaptive design allows you deliver different content to different devices - but this can lead to a situation where a visitor wants to access a page or information that you have not made available to their chosen device.

Either method will enhance the viewing experience and accessibility of website content on mobile and desktop devices, regardless of screen size.

 

Differences Between Adaptive and Responsive Design

 

  1. Responsive design uses CSS3 media queries to adjust the web page to any screen. Adaptive design makes use of a series of predefined layouts based on breakpoints.
  2. Responsive design is client-side, meaning the page is sent to the device browser of the client, which then adapts the appearance of the page as per the size of the window browser. Adaptive design is predominantly server side, meaning that the web server is responsible for detecting the different devices and loading the appropriate style sheet based on the type of the device.
  3. Responsive design is based on fluid grids and adaptive design is relies on predefined size layouts.
  4. Responsive design will fluidly modify its appearance when the browser window is resized, while adaptive design will load a definite layout for the device used for viewing the site.

 

When to Use Each

Responsively designed websites usually work better for content-packed websites where there is not a lot of variation in user intent between desktop users and mobile user, and the focus is on simple functionality.

Adaptively designed websites, on the other hand, are more appropriate in cases where the user intent varies significantly between desktop users and mobile users, and website performance becomes a critical factor in shaping visitor conversion and satisfaction, such as in e-commerce websites.

While both responsive design and adaptive design have their own virtues, deciding which one is appropriate for a website can be deduced by assessing a customer’s needs while achieving business goals.

The Pulse of Heartbleed

Apr 25, 2014 by Aaron Rubman

If you have been following technology news, you will have heard about the Heartbleed SSL Bug. It was an exploitable piece of code buried in the OpenSSL library that many websites (including some mb/i websites) used to establish secure connections like the ones you have when accessing Facebook, or your bank’s website.

Was my website affected?

If mb/i is your hosting provider and your site was vulnerable, you will have received an email from us during the week of April 14. Since the discovery of the Hearbleed bug was announced on Monday, April 7, mb/i has ensured that all the servers that we use have been further strengthened against this exploit.

If you are unsure if mb/i is your hosting provider, please feel free to contact us.

How does Heartbleed work?

The most concise explanation can be found in Randall Munroe’s comic, XKCD.

What steps should I take?

First, confirm that the error has been patched. Then, change your passwords.

The order in which you execute these steps is important.  If an online service has not yet been patched, hackers could be watching right now - and will be able to see your new password as you first enter it.

Even though most mb/i sites were not affected by the Heartbleed SSL bug, it is a good idea to periodically update your passwords, and this is as good a time as any.

If you stored financial information in a compromised account, you may also wish to sign up for a credit monitoring service.

Who else was affected?

The Open SSL library is used by a broad range of website developers in order to add an extra level of security. It is suspected that as many as 2/3rds of the sites that use Open SSL were affected by the Heartbleed bug.

Some of them are very high profile - prompting Mashable to create a ‘hit list’ of passwords that should be updated right now.

If you have further questions about the Heartbleed bug and how it might have impacted your mb/i website, please do not hesitate to contact support@marissaberger.com.

9 Elements of an Efficient Global Website

Apr 24, 2014 by Aaron Rubman

One of the most beneficial features of the Internet is that its location agnostic. A website can be accessed by a user in Silicon Valley as easily as by a user in Siberia, regardless of where you are headquartered.

Here are nine elements to keep in mind when preparing a website for a worldwide audience:

1. Languages

For a positive user experience, a global website must be available in the native language of several different regions. Consider a webpage showing all of the available languages.

2. Style guides

A style guide should be such that it can be used all through the localization of the website. Different languages might require different fonts and styles, so a style guide can help keep each of your website’s translations consistent.

3. Terminology

Try to keep your website’s terminology straightforward and simple. Consistent terminology will help cultivate better translation memory reuse and SEO.

4. Branding

Even when you’re translating your website into different languages, it is imperative to retain the brand’s feel and identity. To do so, outline your standards for business history, mission statements, logos, colors, etc. before translation.

5. Multimedia

When it comes to engaging with your brand, different cultures will prefer different content multimedia such as text, audio and video. Multimedia translation might involve voice-over recordings or localized subtitles.

6. Imagery

Images on websites can lead to higher translation costs. Try to avoid images with embedded text, or divide them into layers to make translation easier. Also be mindful to avoid discriminatory or culturally biased, imagery.

7. Phone numbers and addresses

Make sure that you have contact information (phone numbers and addresses) that is accessible to every location served by your website. Globally valid phone numbers work, as do regionally appropriate phone numbers that are only displayed within the relevant countries.

8. Legal Concerns

Make sure you know the laws of each country you intend to target. Privacy laws in some countries might prevent you from gathering visitor’s data while libel laws in another may prevent any negative advertisements.

9. Coding

Use Unicode (a universally adopted encoding system) to standardize your website’s display, and establish a lingua franca for your programmers to use when documenting their work for each other.

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.

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: