Build Your Own Business Website header image

Is It Possible to Design a Website that Works Well on Mobile Devices from the Beginning?

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session, we discuss how to create a WordPress website that works with Smart Phones and other mobile devices. The design used is called Responsive Design which allows websites to respond to the size of the device browser window being used.

Video Transcript

Rick: You want to explain your question to me again?

Member: Yeah Rick, what I was trying to do is just get an overview but if I’m going to create a new WordPress site, is there a way from the get go to set that site up so that it works well on smartphones or cellphones?

Rick: You know, there is. It’s called Responsive Design and that’s a little catchphrase intended to convey the diea that your webpage responds to the size of the browser window that the device is using. And it is… I am told that Thesis 2.0 is going to be responsive in some way or another. An example of a really totally, cool responsive site is this one here… I don’t have anything to do with it it except that I love it from afar so I don’t get any benefit… I mean, I dind’t have anything to do with this. I just really, really, really like it.

So let’s see, look at my bookmarks and then Thesis Design and then where did it go? The Father Apprentice. Okay, this site is responsive. And so if you take your browser window and you drag it in like this, you can see that his site changes as it gets smaller. It changes deliberately. The videos change in size. The images change in size. Everything slips around. You know, sidebars go down to the bottom. Everything starts to stack whereas if you are about here, I guess this is… okay, so this is sort of the full size. This is the iPad size. You know, then you et get in to about here. Well actually maybe… this is the vertical iPad size and then this is the iPhone you know, width size. It’s just… this ability to make your website do this is the way in which you achieve a mobile-friendly site really right off the bat. And this is actually done in Thesis 1.82, I believe, but the person who did this is really good at it and you know, did a lot of extra code in order to make this happen. And if Thesis 2.0 takes a long time to come out, I am going to do a makeover of this site, ReliefApp.com which a friend of mine designed. Right now, this site, if you minimize it, it does everything a normal Thesis site does which is essentially just cut that stuff off. But I am going to do a little seminar on how to make this from a static layout into a layout that does the same thing as that Father Apprentice does.

But anyway, that’s called Responsive Design and Thesis 2.0 is supposed to be responsive in some form or another and we’ll find out for sure in the future. But…

Member: So Responsive Design really is a matter of code. If somebody…

Rick: It absolutely is a matter of code, yeah.

Member: Okay, great. Thanks so much for your information.

Rick: It’s my pleasure. We’ll talk to you soon.

1 Comment… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
1 comment… add one
  • John Cunningham July 17, 2012, 9:30 pm

    That was a cool demo. I am looking forward to using a plugin to do all of that.

Leave a Comment