March 01, 2016

In Part 1 of What is Responsive Design?, we offered a history of responsive web design and development. In Part 2, we will touch on some of the benefits of having a responsive website, including better Google PageRank scores, higher customer conversion rates and better mobile usability.

Don't Confuse your Users

The author of this article remembers working as a developer at a large online retailer a few years ago as they were in the process of rolling out a new separate mobile version of their website. The initial launch was a tentative one, served to a small number of customers to test sales conversions; after two weeks of testing, the new m-dot site had a 100% higher user abandonment rate than the desktop site. 30% of users who began the checkout process on their mobile devices quit during the checkout process and switched to a desktop computer to complete the process. Needless to say, after another short round of testing, it was decided that the new m-dot site would be scrapped and the primary website would be made responsive. It may seem as though the moral of this story is that responsive sites are better than separate m-dot sites, but it's not. In this came, the issue came down to usability. The desktop site was easier to navigate; it was easier to find the items you wanted and purchase them, while the mobile site presented users with an unfamiliar interface. By making the existing site responsive, we could retain the same navigation, the same customer flow from search to checkout, the same customer support structure; and we could do so while optimizing the experience for someone on a mobile device.

Speed is King

Those of us in the development industry have all seen the statistics:

• 21% of users will abandon a shopping cart if pages load too slowly
• 85% of users expect websites to load as fast or faster on their phones than their desktops
• 40% of users will abandon a website if it takes over 3 seconds to load
• 80% of users who are unsatisfied with a site's performance will never use that site again

And the list goes on. More than ever, your users are browsing the web on mobile devices (over 50% in the U.S. and 35% globally at time of writing). And as the adoption of mobile web-capable devices grows, the patience for slow page load speeds decreases. To add insult to injury, Google modified their PageRank algorithms in 2015 to deduct points from sites with low mobile PageSpeed scores. Not only do you run the risk of losing clients with a slow, unresponsive website, but you could potentially lose your precious position in Google's search results. So how does a responsive web solution address this issue?

Mobile First

In software development circles, there has long existed a concept known as Graceful Degradation, wherein a software application would be designed for the newest, shiniest computers and devices out there, but would "degrade" across older systems, stripping out extraneous animations, user interactions, and other bells and whistles. This methodology posited that even users on the oldest systems would at least be given the bare minimum functionality required to operate the application.

From this methodology arose the concept of Progressive Enhancement, which flipped Graceful Degradation on its head. Rather than targeting the newest, most cutting-edge technology, Progressive Enhancement posited that we should create the best experience possible for the lowest common denominator, and only add those extra bells and whistles as technologies improve.

Finally, in 2011, an author named Luke Wroblewksi presented the web development community with a contentious methodology called Mobile First. Due to the limited visual space of mobile devices, the increased use of mobile devices, and the additional capabilities of these devices (GPS positioning, user orientation from internal compasses, multi-touch capability, etc.), Mobile First pushes developers to target the mobile platform... wait for it... first. This methodology pushes us to streamline the user experience, decrease page load times, serve better-optimized images to mobile devices, and take advantage of mobile capabilities to create an optimized web experience on mobile devices while simultaneously serving desktop devices the large, image-heavy, User Experience-rich websites we've grown accustomed to.

More to Come...

In Part 3 of What is Responsive Design?, we will give you some insights into how we design responsively, from traditional static comps to mood boards and style tiles; from pixel-perfect desktop comps to rapidly prototyped mobile wireframes. We'll discuss why a "mobile first" mentality has been undeservedly maligned. We will delve into mobile navigation and the contentious "hamburger" menu icon, responsive image solutions for increased mobile performance, responsive text using the newish Viewport Units, and the difference between Adaptive and fully Responsive design methodologies. Finally, we'll give you a look at Level8's browser and device testing methods, from VMs to BrowerStack to our in-house device lab.

February 23, 2016

Part 2 of this article can be found here.

As professional web designers and developers, we're more than aware of the importance of responsive web design and development; but as a small business owner, you may have only heard the term in passing. With this series of articles we hope to familiarize you with the concepts of responsive design and why it's vitally important to your business's existence on the web.

A Brief History

When we began creating websites in the early 2000s, our biggest challenge was managing web browser inconsistencies. The now-extinct Netscape Navigator 4 was the most popular browser in use. Microsoft had just rolled out Internet Explorer 6, unwittingly launching a decade of developer hair-pulling, teeth-gnashing, and fist-clenching. IE 5.5 still existed on the Macintosh platform, and Safari had yet to be released. The Opera browser, although not a new face on the scene, was rising in popularity. But with the exception of the nightmare that was browser consistency testing, it's not unfair to say that web development in those days was easy; sites were built entirely in tables, back-end platforms were limited, and Cascading Style Sheets were just a blip on the radar. We only had to worry about designing for clunky square CRT monitors, and only once every year did we need to check the statistics on popular monitor sizes and update our methods to reflect the ever-increasing screen real estate available to our users.

Enter the iPhone

In 2007, the web development landscape changed drastically. Apple released the iPhone, the first widely-adopted smartphone with excellent web browsing capabilities, thanks in large part to the Webkit-based engine driving its mobile Safari browser. As it gained popularity and Android smartphones entered the fray, the design and development community quickly realized that though smartphones made the web accessible to anyone, anywhere, anytime, our current design methodologies did not translate to the smaller screens, forcing users to pinch-and-zoom and swipe-and-scroll and make frequent fat-fingered mistakes while trying to follow tiny text links. Recognizing a need for a mobile browsing experience targeted at these new devices, designers and developers began creating mobile websites that lived separately from their desktop counterparts. Hacky device detection methods were implemented to determine on the fly whether or not your device should be redirected to the new mobile domain.

This approach was effective for a few years, but eventually the field of smartphones, tablets, tablet/laptop hybrids, and touch-screen desktop devices grew too large to effectively detect. Should a desktop computer with a touchscreen get a touch-only experience? Does the small tablet device count as a mobile phone? And does the large mobile phone count as a tablet? What happens when a user rotates their device from landscape to portrait mode? Just what the heck is up with tablet/laptop hybrids?

The Responsive Revolution

In 2010, a web developer, author, and conference speaker named Ethan Marcotte blew our collective minds with an article entitled Responsive Web Design on the influential A List Apart blog. In short, Ethan demonstrated that through a combination of fluid elements (containers and images that adapt to a percentage of screen size) and a newly-adopted CSS3 rule known as a Media Query (more on that later), we could create "layout agnostic" websites. That is to say, a website that not only adapted to fit whatever screen it was viewed on - from the smallest 240-pixel phone screens up to the largest monitor and every size in between - but could go so far as to add and remove elements, paring down the site's content until only the most high-priority information was available to our users. Responsive design was the futureproof (nearly) solution to designing and developing websites that would work across the tens of thousands of devices and screen resolutions now in existence.

More to Come...

In Part 2 of What is Responsive Design?, we will dive deeper into the problems responsive web development solves, from mobile sales and customer conversion rates to mobile usability issues. We will touch on the importance of Google's recent decision that a well-tuned responsive mobile experience will affect your site's PageSpeed score and thus your PageRank, and the ever-increasing use of mobile devices for web browsing (over 50% of all web traffic and counting!) In Part 3, we'll give you some insights into how we design responsively, from traditional static comps to mood boards and style tiles; from pixel-perfect desktop comps to rapidly prototyped mobile wireframes. We'll discuss why a "mobile first" mentality has been undeservedly maligned. We will delve into mobile navigation and the contentious "hamburger" menu icon, responsive image solutions for increased mobile performance, responsive text using the newish Viewport Units, and the difference between Adaptive and fully Responsive design methodologies. Finally, we'll give you a look at Level8's browser and device testing methods, from VMs to BrowerStack to our in-house device lab.

December 12, 2015

In Maine we are sitting on some of the most beautiful scenic and available land in United States. Everyone from the president to John Travolta comes to visit our National and state parks. If someone is looking to buy a home in Maine there are not a ton of easy to use website solutions. According to leading experts the Maine real estate market is hotter than ever. With the above in mind effective real estate website design is more important than ever.

Real Estate Website Design
is not Just for Trulia

In Maine it's not just huge companies like Sotheyby's or Trulia trying to grow the economy but boutique firms that support the local economy. Some firms have stopped paying attention to what their website looks like and others continue to use signs billboards and third party websites to support their business. Few web development firms have taken notice of this market and done it well.

Level8 design studio has been working with real estate agencies for over five years now. We take pride in our work especially our real estate web design clients and projects.

Ok. Why is an office not enough?

Consider the largest consumer market today or think about the kids. People are increasingly using mobile devices and laptops to do shopping. In fact this holiday season has had quite a surge in online purchases. In fact traditional brick and motar stores like Walmart or Target are still trying to catch up with Amazon and Alibaba. Of course you do not have to take my word for it. Many Agencies such as US Newsweek and The New York Times have been writing about this shift for a decade or more. Just recently Teresa Mears wrote an article in US News

Younger buyers live on their smartphones and use them as a key tool in their home searches. Apps are often their preferred method to check listings and collect other information.

Yet so many real estate website designs do not even provide a mobile view much less an application. Consider that you are more likely to get a call or gain trust from the average web or application user if you are the actual source of the data. A minor investment in a good website could yield some profits and Maine is definitely ready to serve the data

Want to know more?

Got questions? Want to know more? Stay tuned as we continue to post relevant information about real estate website design or contact us if you are looking to get started with a great design.

December 29, 2012

Creative Minds Need Room To Breath

Level8 is expanding its office to create new creative spaces. A quiet and uncluttered conference room is being built to establish a better space for strategizing and planning the new fun projects of 2013. Along with a new conference room is a creative lounge that will be built to handle even the most tantalizing brain storms. Below are the top three reasons you should come see these new spaces next year:

1. Magnetic walls with a pantone pallet
2. More windows with Old Port views
3. A projector with Wii Bowling capabilities

For those who can't stop in and see it for themselves, we'll be posting pictures soon enough.

December 12, 2012

Let's Get Festive

Creating holiday cards for your business is a great way to reach out to clients new and old. Holiday cards can be fun & playful, or sophisticated & traditional, but they should most definitely be festive! If you want to talk about a custom creative holiday card for your business, email or call us.