Responsive Web Design

Subscribe in your email box!

Subscribe in your feed reader!

I try to write about three times per week. Most of it is pretty good and will probably help you grow your business. If it doesn't, then I probably can't help you.

You can use a traditional RSS Feedreader with this fancy-dancy link. I think this approach is harder but if you want to do it the hard way, who am I to say otherwise?

You can use a traditional RSS Feedreader with this fancy-dancy link. I think this approach is harder but if you want to do it the hard way, who am I to say otherwise?

Out With The Old In With The New

posted this on Thursday, June 6, 2013 at about 11pm.
Old Corey Smith Blog

Two years ago this week, I started this new blog. I came up with a design that I was very happy with but then a few months later I realized that it needed a little upgrade because it quickly became my personal branding website and not only my blog.

Over the course of those two years, I have made a few tweaks here and there and have been pretty happy with the result. I've enjoyed the design but I finally figured it was time for an overhaul.

Not only is my website an opportunity for me to write new content but it's also a bit of a test bed for doing new things with our company's web design capabilities.

For example, my old blog was the first mobile responsive design that we put together. Well, I did it but now my company builds most of our sites with mobile responsive design. My first blog post on the subject was Mobile Web Requires Accomodations. I wrote that shortly after I put in the responsive upgrade to my blog in September of 2011. The purpose of that post was to point out how responsive web design works. Of course, the images in that post are out of date now so I might have to write a follow up to it.

I wanted to create a new website that matches the trends that we are currently seeing and I felt I was way overdue for this upgrade.

In the coming posts, I'll spend a little time talking about why I did what I did... including why I chose to build this myself instead of having my team build it for me. Afterall, I'm not a web designer nor a developer. I'm a businessman and a web strategiest.

I'm curious to know what your thoughts on this design is. Please feel free to leave a comment below with what you think.

By the way, this website is designed using Drupal 7. I'll make sure to write a post talking about why Drupal brings some significant power to this website.

Corey Smith and his wife are the proud parents of five wonderful children and live in Meridian, Idaho. He is the president of Tribute Media, a Meridian based Web Design & Marketing Agency.

He is the author of two books, "Do It Right: A CEO's Guide to Web Strategy" and "Tweet It Right: A CEO's Guide to Twitter." You can learn more about his books here.

Interested in having Corey speak for your organization? Need help building or marketing your organization? Want to tell Corey how cool you think he is?

Mobile Site or Responsive Design?

posted this on Tuesday, January 31, 2012 at about 7pm.
iPhone

I’ve talked in the past about a mobile responsive Web design in my post Mobile Web Requires Accommodations. I talk in that post about a responsive Web design.

In short, a responsive Web design is a website that doesn’t care what size the web browser is… it just looks good. The idea is, quite simply, it looks good all the time whether you are viewing your website on a desktop computer, tablet or a mobile phone.

The concept has only really been around for a little over a year and a half and really is groundbreaking in how we look at designing websites for mobile (or even for desktops). It allows us the ability to actually consider the mobile device right at the beginning of the design phase of a website which actually allows us to produce a better website.

Prior to this concept of responsive Web design, mobile sites were designed as separate websites that would present different information but in a way that works well specifically for the mobile device. You’ll be familiar with this approach if you’ve been to eBay or Amazon on your mobile device. You’ll see that the website is actually very different from their desktop version of the website.

Ebay and Amazon

This is an incredibly expensive approach but may, for the time being, still have it’s place. I think, however, it’s place is going away and a responsive design is going to be more important going forward.

Costa VidaIn my post Marketers Don’t Quite Get QR I point out two different examples of how QR codes are used (one good and one bad example).I think that the imagery there (copied to the left) points to what happens to a website when you don’t have a mobile version of the website (whether that version is responsive or not). The example of Costa Vida shows that when you have a full website on a mobile device you have a hard time viewing all the elements… the links are small, the text is small and it’s hard to navigate.

Under most conditions, I think there is no reason why should you have separate website for your mobile visitors. You should have it all in one platform.

There are some times that it still makes sense to have a separate mobile website.

  1. Your separate website is so small, it’s easy to maintain.
  2. You are creating a mobile only landing page (for example, in our QR example)
  3. The mobile version of the site really needs to be that different. Amazon and eBay may never make sense to be responsive.
  4. You really want to focus on trimming the content down for mobile users. Heavy content websites may need to have less visible in the mobile version.
  5. You’d like the mobile website to look more like a mobile app. (In fact, this is a great alternative to a mobile app.)

The most important thing to understand about mobile (either a separate mobile site or a responsive Web design) is that it will cost more to do it right. You can’t expect to spend a few hundred dollars and think it’s going to work out right. There are elements in the design that need to be considered.

No matter which method you choose, you will be required to manage your Web presence differently than you do now. You’ll have to add content differently, you’ll have to add images differently and you’ll have to test regularly in your mobile devices.

I personally believe that the time and effort spent is well worth it because more and more people will find you on their mobile device. This blog have about 15% of my site visitors using a mobile device and that number will continue to grow. It will be interesting to report in a year how much that number has grown (who knows, I may be proven wrong).

Mobile Web Requires Accommodations

posted this on Tuesday, September 20, 2011 at about 10pm.
QR to CoreySmith.ws

I remember a few years ago that I thought that mobile use of the Web would require very small consideration.

I first used my mobile phone to browse the internet back in 2005 and didn’t really like it because it was slow and the websites didn’t look good on my little phone. They simply were not optimized for Web traffic.

Times have changed. I use my phone to browse the Web a lot. More and more people are doing the same.

According to Fierce Mobile Content, mobile and tablet (an offshoot of mobile) generate about 8.2% of US Web traffic. In fact, the iPad alone represents about 25% of all mobile Web traffic.

The challenge for businesses (as well as developers) is to make the experience reliable for all Web users. It’s important that we have a rich experience for your normal website visitors for their desktops but you also want an experience that makes sense for the mobile users… whether those mobile users are on a small smartphone or a tablet, such as the iPad.

A common approach for building a mobile website has been to create an alternate website for your mobile visitors to see when they use their mobile platform. There is a big problem with that approach. When you go to a mobile website, it is usually (if done right) optimized for phones and not for tablets. In fact, the experience tends to be a little awkward on tablets because of the touch optimized buttons designed for tiny screens.

An approach that I favor is a responsive website design. A List Apart had a great article on this concept of Responsive Web Design in May, 2010. The concept is simple… the website changes it’s presentation depending on the browser size you are looking at.

You can use my website as a pretty good example of this. You probably won’t be able to see this in Internet Explorer but if you are running Firefox, Chrome or Safari (you should make the switch if you haven’t) you’ll be able to see this in action.

Do this now

Resize the browser window. Simply take the corner of your browser and make it smaller (narrower) and you’ll see the content will shift. Images will get smaller. If you make your Web browser as narrow as a mobile phone, you’ll even see how it would look in your mobile phone. The other way you can do this is go to my website using your mobile phone. I’ve included a QR code at the top of this post (if you know what that is) so that you can just scan it with your phone and see this in action.

I’ve included a couple of images in how this works as well just in case you can’t figure how how to resize your browser window.

Website Full Width - Responsive Web DesignWebsite Mid and Narrow Width - Responsive Web Design

What this means?

When I redesigned my website here, I was originally going to have a mobile version of the site that was optimized for touch, but I thought it would make more sense to have a responsive website design. Here is what I really liked about responsive Web design for my website.

  • It meant that I didn’t have to rethink the user interface. I didn’t have to make a decision as to what content was included and what was left out.
  • I didn’t have to write a bunch of extra code to make it work.
  • Most importantly, I didn’t have to as much spend time or money to create a second website that would present my content for small phones.

There are some drawbacks to responsive Web design. It’s not a decision that will work for everyone. Some people will still want a mobile version of their website. If you are considering making the decision to use a responsive Web design for your website, consider a few challenges that could crop up.

  • Your users usually cannot resize their browser window in the mobile device as easily so small text could be harder to read.
  • Your content may not work well (e.g. eCommerce heavy websites may introduce more problems than are solved).
  • You must make different concessions on how things will look. Images will shift and you may need some to go away. However, even a mobile website will have this consideration.
Subscribe to RSS - Responsive Web Design