Archive for : Responsive Design

What Exactly Is Mobile Friendly?

Mobile website, mobile friendly, responsive, adaptive, app…these are all the same right?  Not really.  Here are our definitions of those terms and the different mobile site types to help you better understand the landscape of mobile.

1.  Mobile Friendly or Adaptive – The key to this type of site is the screen size and device type.  This type of mobile site can change it’s layout and content depending on the device and screen size.  Ex:  iPad version, iPhone 6 Plus version, iPhone 4 version.  Now, this doesn’t mean you need fifty different versions of your site, it just means that your design and layout must adapt to different screen widths and show appropriate content based on those screen widths.

2.  Responsive – Responsive is great, until it’s not.  If you’re website is currently a desktop version only, this is a great “stepping stone” in the right direction.  Responsive refers to the action of a website shrinking and expanding to fit the size of the web browser window, so that no matter what size computer or device you are on, your site displays within that browser size.  The downside to this method is that usually responsive sites just reposition and shrink your content into a confined space.  So all those awesome case studies and client testimonials you have on your site just get squished into a smaller space.  And let’s be honest, who visits a site on a phone to read testimonials?  I’m not knocking responsive, it’s better than nothing.  But it does have some down side.  The upside is that depending on who or how your site was built, your site may be responsive already.  So kudos to the guy that built it!

3.  Separate Mobile Site –  This is a completely separate website that is designed, developed, managed and maintained separately from your desktop website.  The great advantage to this type is that you can create a unique and customized mobile experience.  This kind of site is strategically designed and developed to accomplish specific marketing goals.  Typically these sites have custom homepages, limited content, defined user paths, and obvious actionable steps for a user to take when browsing.

 

The bottom line is that the web is universal and so accessing content should also be universal.  Additionally, Google is now ranking your site based on whether or not it has a mobile version  (of any kind).  For more details read this article.

 

PS – Just because your website can be viewed on a mobile device DOES NOT make it mobile friendly…c’mon people!

 

Facing the Challenge: Building a Responsive Web Application

We are talking and reading a lot about responsive Web design (RWD) these days, but very little attention is given to Web applications. Admittedly, RWD still has to be ironed out. But many of us believe it to be a strong concept, and it is here to stay. So, why don’t we extend this topic to HTML5-powered applications? Because responsive Web applications (RWAs) are both a huge opportunity and a big challenge, I wanted to dive in.

Read more from smashingmagazine.com.

Technical Details of Responsive Design

There are some gritty details to creating the perfect responsive design that may not be completely apparent at first. Here are the details in this great article byWebDesignerDepot.com.

Today, there’s even a mini debate going on regarding whether responsive design is here to stay or whether it’s just a flash in the pan. Only time will tell, but for now, it’s clear that responsive design strives to make the user experience as comfortable as possible.

Responsive design is a web design philosophy that focuses on creating sites that give users an enhanced viewing experience. This includes features such as effortless navigation and reading, and a minimum of browser resizing, scrolling and panning. All of this takes place across a range of different devices, from desktops to smartphones.

Since this web design approach is still in a fledgling state, you may not be totally clear on what responsive design is all about. Is it more about seamlessly displaying content across multiple platforms, or is it mainly about helping businesses build more attractive sites to increase their sales through a better user experience?

Mashable has already gone out on a limb and called 2013 the year of responsive design. While that remains to be seen, some basic aspects of responsive design are standards that will never go away. Here are the most important responsive design facts to familiarize yourself with.

 

There’s a difference between responsive design and mobile design

You’d be forgiven for thinking that responsive design and mobile design are one and the same — but they’re not. Sure, responsive design does create websites so that they both respond to a browser’s size and are mobile-friendly, but responsive design really is whole web design. The problem with referring to this web design approach as mobile design is that it’s inherently limiting, which does a disservice to the approach itself.

The most effective responsive websites may be viewed as they were meant to be, across a range of resolutions. This includes everything from the usual 1024×768 pixels to the 1920×1080 displays and everything in between. Sites like these also look splendid on tablets (both retina and standard displays), as well as on smartphones. If a web designer looks at responsive design solely through the context of mobile, then he’s potentially missing out on a broader user experience.

At the same time, mobile is a really opportune starting point for the entire responsive design discussion. It’s been the norm to begin with a mobile scheme and then expand this design to additional sizes as a responsive website is developed. Lots of designers believe it’s simpler to grow visuals rather than to minimize them.

 

Quality and image size are priorities

If there’s a rule that web designers ought to follow, it’s that image quality is a whole lot more vital than the actual number of images. The reason is that a low-quality image simply doesn’t look attractive in any size. The time it takes a site to load an image is almost as important as the size. Mobile users will agree with this because they have limited bandwidth with which to contend.

What’s a web designer to do? Simply reach a smart balance between load time and quality. This includes scaling images with CSS height and width properties, steering clear of loading full-size images, and optimizing images for the Internet. Prior to uploading, it’s highly advised to crop any images and save each picture at the smallest size possible, as long as it still maintains sharp, visual quality.

Check out Sony USA’s website. Note how all the images are super sharp in quality, no matter what size they are. Once you visit the site or refresh the homepage, also note how fast the images load. You don’t have to wait more than a second for everything to come into focus extremely sharply.

Designers have many choices when incorporating images in a responsive setting. They can use only a few images; lessen the use of images within mobile-sized schemes; permit images to mask themselves in mobile surroundings; or utilize various file sizes and versions. These choices will work effectively, although some developers are against hiding images, because the user will still have to load the images in spite of them being unseen.

 

Let’s talk about responsive type

Type shouldn’t be one size fits all. One kind of font that looks appealing to the eye on your desktop may be horrid on your smartphone. Typography must follow the same rules as other aspects of responsive design.

The most important aspect of responsive typography is the line length. For smooth readability, type ought to be optimized based on the width of the screen. The rule of thumb, for desktop websites, is that between 50 and 75 characters a line is ideal; for mobile devices, just between 35 to 50 characters is ideal.

Type must also be easily read vertically. Lots of sites utilize a line space that’s up to 140 percent of the screen’s point size for bigger blocks of text. If the screen is smaller, more space should be added.

Even the specific typeface that’s utilized is significant. Fancy fonts and novelty typefaces have the ability to look visually appealing on bigger screens, yet they’re hard to read if the point size is small. These sorts of fonts should have lots of space between them. When you work with smaller sizes, it’s easiest to utilize normal sans serif styles and even strokes.

On Hardboiled Web Design’s site, you can see a lot of these principles being followed, making for good responsiveness. Note how its line length of text on a desktop — while on average greater than the ideal recommendation of 50 to 75 characters — is comprised of a typeface that’s clean and easy to read. In addition, the line space is also greater than the point size of the font. On mobile devices, the site’s responsiveness performs even better: On an iPhone 5 display, the number of characters per line was approximately 67, which is just a bit over the ideal rule of between 35 and 50 characters.

 

Don’t forget about navigation

When it comes to the user experience — which is one of the most important factors that web designers should think about — navigation is right at the top of priorities. Navigation has to be smooth and efficient to ensure a comfortable user experience.

Effective responsive design must ensure this by paying extra attention to the specific width of a given browser. A site that uses responsive design well will lay out its site navigation in different areas, all dependent on the browser’s width. One of the best examples of this is Food Sense’s site navigation.

It would be a mistake for responsive design to scale the site navigation to larger proportions on devices with bigger screens.

 

The takeaway of responsive design

So now, when you hear web designers talking about responsive design, you’ll know that it isn’t just about making a website look good and run smoothly on smaller, mobile screens. You’ll know that this design approach is based on the principle of making websites of all sizes provide the most optimal experience to the user — no matter what they’re using to view the site.

Responsive design is still a relatively new concept, at least to most people who just view websites on the internet. That’s why so many people still can’t agree on what makes responsive design…responsive design. Is it about seeing everything properly on mobile screens? Is it just about load times and high-quality images that will please the eye? Is it about a clean design and easy-to-read typefaces?

It’s all of that and more. Those are just the fundamentals of this web design approach, but responsive design is still evolving and changing, so chances are good that additional elements will be considered, too. In the end, it’s about enhancing the user experience, because no one wants to deal with a website that’s slow, blurry, hard to read, cluttered or difficult to navigate.

 

Author: Marc Schenker
http://www.webdesignerdepot.com/2013/06/must-know-facts-about-responsive-design/

Responsive Design: What It Is and Why It Is Important

Ok here’s the deal:  When it comes to technology, you have to be willing to progress with it, or you will get left in the dust.  Websites are are no different.

One of the more recent progressions in web development is responsive design.  Notice I said ‘recent’.  It’s not new, but it is becoming more noticeable to end users.

What exactly is responsive design?  To put it briefly, it’s an approach to building a website that ensures your site looks good on any device, no matter what kind of device you are using.

How does it work?  Eh, don’t worry about that part, we’d prefer you not fall asleep while reading our blog.  But if you must know, there is code you can place in your site that tells the browsers to check for a screen size and then display the site a certain way depending on the screen size.

The more important question is:  Why Should You Care About Responsive Design?  Well, that’s a long answer.  But here are some practical reasons why you and your customers care about it that will help answer that question:

  1. If you are on a mobile device, you don’t have to zoom in and out with your fingers to read text (and it makes it easier to read while you are driving…ehhem, I mean while you are waiting for the light to change).
  2. Your most important content is immediately brought to the attention of your users.  Having a responsive design forces you (the site owner) to make decisions about what your customers should absolutely see when they visit your site.
  3. Responsive design is flexible and fluid – so no matter what the device is (tablet, phone, laptop, desktop) your site will look professional and clean.
  4. Having a responsive design is impressive to most people.  While they may not go out and tell their friends at dinner that they “just saw the most amazing responsive design website” what they won’t say is “Company ABC has a terrible website.”
  5. It challenges you to stay current with your website design, layout, trends, and most importantly the content.

 

For more information about Responsive Design, checkout these articles:

  1. http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
  2. http://en.wikipedia.org/wiki/Responsive_web_design