iPhone 6 Resolution Increase Affect on Mobile Websites

The iPhone 6 and 6 Plus are packed full of updates both in hardware and software through the launch of iOS8. The most obvious and significant update is the size. The iPhone is now available in a 4.7″ version and a 5.5″ alternative. So how will this affect the mobile viewing of your website? Well, lets take a closer look. It isn’t just the size of the screen, the real innovation is under the hood though higher contrast, wider viewing angles and greater pixel density. In other words, Apple has made a pretty drastic resolution increase for iPhone 6 and iPhone 6 Plus compared to previous models.

This raised a question for many businesses running a responsive design website…

How will the iPhone 6 & 6 Plus resolution increase affect responsive design?

You will be happy to know that as long as your website is properly responsive there will be no change at all.

When designing a responsive website you design it to be flexible so the website will automatically adapt from desktop, tablet and smartphone to provide the user with the best viewing experience. When creating a responsive layout we don’t generally design for specific screen sizes. When done properly, your site should be able to fluidly adjust to any screen width from a desktop all the way down to an iPhone 4 or earlier. Let’s not forget about non-Apple devises. Samsung, Nokia and Google and others all make smartphones with larger resolutions than the iPhone 5 and responsive coding when done correctly can scale up to accommodate these sizes.

If your website currently functions fine in a responsive format on most smartphone displays now, it’s going to work fine on iPhone 6 & iPhone 6 Plus. That said, you’ll still want to make sure you’re sticking to responsive design best practices.

Although responsive design is not normally created for specific layout sizes, app developers may find it useful to know the various devise width in pixels. To the best of my knowledge you will be looking at something like:

iPhone 6: 375px (portrait), 667px (landscape)

iPhone 6 Plus: 414 (portrait), 736px (landscape)

QR Codes: Dying Fad or Creative Marketing?

In the last few years we have seen QR codes become increasing popular. Their presence would indicate an impressive adoption rate among marketers. There is even a website dedicated to some of the most ridiculous places QR codes show up. Advertisers seem to love them but the questions remain as to how many users actually scan them. It’s important to take a look at both sides of the debate over QR codes to see if they are a creative tool or an annoyance for your brand.
qrLets start with a simple question, what is a QR code? A QR code or ‘Quick Response Code’ is basically a bar code that stores encoded pieces of information that can be decoded by a reader app. When a smartphone reader scans a QR code it actually takes a picture of the code and then identifies the code patterns to produce a desired result. In most cases the result is a website landing page or specific web content that is opened in the user’s mobile browser. Some smartphones do have QR scanners built in however the more popular phones, like iPhones, require a 3rd party app.
The real pitch with using QR codes is that they are ‘fun’ and require user interaction. There is a sense of anticipation as to what the output will be for the user. Today you’ll find QR codes in the strangest places. QR codes have been spotted on shirts, giant billboards, belt buckles, produce and just about everything else you can imagine. There really are no barriers to entry either. Just google “Free QR Code” and you will see a variety of different websites that will generate a unique QR code for you quickly that can be pointed to website or landing page.
Although they serve a great interactive and creative advertising purpose some will argue that the QR code is a fade that is slowly dying. When you think about the rate technology is moving this argument holds some weight. Success in mobile is all about speed. Devises are getting faster, more intuitive and asking a potential customer to launch an app, point it to a QR Code, wait for the app to process and produce a web page seems a bit arbitrary to some. The user could have been reading your content a lot quicker by typing a url into their browser. The whole QR experience seems anything but quick and convenient from this perspective.

Consumer Behavior

QR Codes were present in 1% of print advertising in January of 2011, a number which shot up to 6% by December of the same year. Advertisers obviously like them but the real question is are consumers actually scanning them. A report titled “9 Things to Know About Consumer Behavior and QR Codes”, released in January 2012 by Consumer Pulse, provided some insight. According to this report, 79% of respondents had never heard of a QR Code. However, when shown a picture of a QR Code, 81% of respondents claimed to have seen one before. The report also claims that ½ of smartphone users have scanned a QR code before and 70% did claim it was an easy process and 42% had mixed feelings about how useful they were. There figures do not convincingly support the argument in either direction but it does provide some solid evidence that when presented with a QR code, the majority of smart phone users will know what to do with it but roughly half may actually scan the code.

QR Code Best Practices

What this study tells us is at worst QR Codes are a fad that will fade quickly and best case, a great way to grab the interest of smartphone owners, but you will need some convincing that your target market is ‘QR savvy’ and will want to scan your code. The real problem for business owners comes down to how the code is used. Setting up a QR code to simply launch your website homepage is a waste of time for both you and the consumer. In order to get a user to want to scan the code you need to get creative. If you are placing a QR code on a product for example, have the code launch a page on your website that explains that product in more detail. If the QR code is going to be placed on an ad, have it launch to a specific landing page geared towards that ad or a page that generates a coupon. Envision the QR as a call-to-action on your website. By serving a specific purpose you may see better conversion rates.

Responsive Design for Mobile Viewing

There are essentially 3 components of a website- Style, Content & Behavior. We use HTML for the content, CSS for the style, and JavaScript for behavior. Now more than ever web designers need to be concerned with a new component, Viewing Experience. The popularity of smart phones and tablets means multiple screen resolutions to design for. Non Apple fans may argue this point but the iPhone changed the way we approach mobile web design due to the simple fact that it was the first smart phone with a really awesome web browser. Other manufactures followed along and there are now several mobile operating systems and some really great mobile browsers that are transforming how and when we view our favorite websites. When it comes to mobile viewing Jeremy Keith said it best, “Stop thinking in Pages. Start thinking in Systems.”

How do we best approach web design for the growing use of mobile devises?

Responsive DesignThe obvious solution may seem to just build an app. Having an app for your business is a great idea but for most businesses, especially smaller start-ups it can be a costly. To cover the majority of mobile users you would need effective app solutions for tablets and smart phones on both Apple iOS & Google Android just as a start. For mobile website specific design, a more cost effective solution is responsive web design.

In a responsive web design approach our goal is to create a seamless design experience so the website works equally well on any device. This website, matt540.wpengine.com is responsive. To see it in action on a desktop browser slowly drag in the corner of your browser inward. You should see the layout adjust itself to fit the new width of the browser. If you access this website from a smart phone you will see the layout looks different from the desktop and fits the resolution perfectly with an app like menu option. This is responsive design, the user does not need to pinch-and-zoom to read the text or worry about “fat finger” errors resulting in clicking the wrong hyperlink.

How does responsive web design work?

Responsive design uses a coding concept called media queries which detect the type of device you are viewing a website on and changes the site’s behavior accordingly. The width at which the website design begins to break down is where media queries are targeted in order to optimize the design. It does this with the help of a fluid grid. A fluid grid layout allows a website to squeeze onto a small mobile device or stretched across a huge high-res screen. Regardless of the screen size all of the elements in the layout will re-size their widths in relation to one another. With our fluid grid as a foundation we can use a series of media queries to essentially create if-then statements modern browsers will understand. When the website is viewed on an iPhone for example, a media query with a set pixel width of 320px is targeted and tells the browser to display the website in a certain fashion. A second breakpoint would be set at 600px to target the websites appearance in an iPad. This is simplifying responsive design extensively as there are several coding elements involved, but overall the concept allows us to define how our website will appear at different resolution breakpoints.

Looking to the Future: Start Small

As a web designer I am always reading. Whether its my favorite design blogs, books on web design theory or coding languages on thing is certain… there is a radical change in thinking among the design community about mobile. The Mobile First approach to design is becoming the new standard. When designing a website for a client I will now first envision how the site will appear in mobile and then scale up from there.  It is a different approach to designing a website and it represents the future and responsive design allows us to adapt to this change. The benefit to the client: You build a website once, and it works seamlessly across thousands of different screens.