Develop Responsive SIte w/o Smart Phone?

[chrisofarabia]

@mikey_w

It sounds like it is more changing how I conceive websites than the languages themselves…

I’d agree with that entirely. Over the years, HTML and CSS have grown in capability, whilst discarding (depreciating) a smaller number of things that have ultimately proven less useful. RWD though, is less about the newer features of HTML and CSS than it is about applying what’s been there for a long time in a different way.

[mikey_w]

@RyanReese

@mikey_w

So based on your response, it sounds like what I need more than memorizing what is new to HTML5 and CSS3, is starting to understand how Responsive Web Design (RWD) leverages things in HTML and CSS to make websites “responsive”, right?

It’s hard to pinpoint ONE thing that you need work on. You need to understand how to make sites that automatically adjust without media queries (fluid websites). No widths if possible, or max-width if possible. That’ll adjust as needed. Then you need to know what’s thebest way to handle the screen sizes that break once you’re done that.

Overall, there isn’t just ONE thing I could point at that you need work on.

My personal website does use a fluid design, so it’s not like I don’t understand that. (Sure, I relied heavily on @PaulOB website and tutorials, but I have tweaked it and it works.)

Now the website I built for this auto repair place was not fluid, but then for what they paid me, oh well.

[SamA74]

@mikey_w

Now the website I built for this auto repair place was not fluid

The good thing about the web is that its not cast in stone, you can change any site to RWD once you learn how.

[zymara]

@mikey_w

I don’t mind finding someone with an iPhone or Andriod to test, but there is no way in my current situation where I can afford getting a smart-phone and expensive telecom plan with it. (I have a hard enough time paying AT&T on time as it is now!!)

Don’t! Get a used smartphone off of eBay that still works, and just connect it to the internet via wi-fi to use it for testing. Cheaper, no monthly fees.

[mikey_w]

@zymara

@mikey_w

I don’t mind finding someone with an iPhone or Andriod to test, but there is no way in my current situation where I can afford getting a smart-phone and expensive telecom plan with it. (I have a hard enough time paying AT&T on time as it is now!!)

Don’t! Get a used smartphone off of eBay that still works, and just connect it to the internet via wi-fi to use it for testing. Cheaper, no monthly fees.

I thought you couldn’t use a smart phone unless you signed a contract - in blood - with the telephone company?

[RyanReese]

Nope - it’s just a hell of a lot cheaper to do the contract.

[jeffreylees]

If you buy an older used smartphone, you could use the Internet on it via WiFi without any phone service at all. Just use it like it’s a little WiFi computer and not a phone.

The problem with buying any phone outright is that they’re expensive. If say a new iPhone costs $200 USD with a 2 year Verizon contract, it may cost $800 to buy it retail without a contract. So you’d want to look at older models, just ones that still function, if you’re going that route.

[mikey_w]

@jeffreylees

If you buy an older used smartphone, you could use the Internet on it via WiFi without any phone service at all. Just use it like it’s a little WiFi computer and not a phone.

The problem with buying any phone outright is that they’re expensive. If say a new iPhone costs $200 USD with a 2 year Verizon contract, it may cost $800 to buy it retail without a contract. So you’d want to look at older models, just ones that still function, if you’re going that route.

Interesting.

I thought Apple and the other manufacturers of smart phones had them “locked” so they would only work if you had a contract with AT&T or Verizon or… (Sort of like how your cable or DirecTV box works.)

At my former job, there was someone new I was becoming friends with that had “jail-breaked” his new iPhone to use with Google Voice so he had a smart phone with FREE phone service!

Sadly, I lost my job before I could learn how to do all of that…

(While I know tons about computers, I know nothing of “consumer” devices. I still struggle with resetting the clock on our Betamax!!)

[jeffreylees]

Yeah. And just to be clear, to actually use them as a phone/etc you definitely do need service - and most of the time that involves a contract. For instance, when I was using an iPhone, I had an older Android device I kept in a drawer with a charger so that I could quickly plug it in, fire it up, and check on a web page if I needed to for anything. No contract, no phone service… just used it as a little web browser device.

If you use Google Voice, you can in theory have free phone service - through your computer or your smartphone, really - although only when on WiFi or whatever. If you use the phone’s cellular data to use GV, you’re sort of defeating the purpose since you need a plan for that. It’s still pretty useful though!

[SamA74]

@mikey_w

I still struggle with resetting the clock on our Betamax!!

That must be a rare collectable now, there can’t be many about. It was actually a better format than VHS.

A smart phone should work for browsing without even having a sim card in it if you have wi-fi.
Still, you will probably do 99% of testing and viewing on a desktop browser, dragging the width or using a simulation mode as described. Then check it on the phone when you think you have cracked it.
The primary issue you face with RWD is varying browser width, which is best tested on the desktop as you see it change dynamically as you drag.
Having said that, it seems you are quite unfamiliar with smart phones and have a few misconceptions about them. Having one to play with would benefit you, to see how they work and are used, helping you to design for them.

[mikey_w]

@SamA74

A smart phone should work for browsing without even having a sim card in it if you have wi-fi.

Good to know.

@SamA74

Still, you will probably do 99% of testing and viewing on a desktop browser, dragging the width or using a simulation mode as described. Then check it on the phone when you think you have cracked it.

Okay.

@SamA74

The primary issue you face with RWD is varying browser width, which is best tested on the desktop as you see it change dynamically as you drag.

Okay.

@SamA74

Having said that, it seems you are quite unfamiliar with smart phones and have a few misconceptions about them. Having one to play with would benefit you, to see how they work and are used, helping you to design for them.

Very true, but thanks for the jumpstart!

[mikey_w]

@jeffreylees

If you use Google Voice, you can in theory have free phone service - through your computer or your smartphone, really - although only when on WiFi or whatever. If you use the phone’s cellular data to use GV, you’re sort of defeating the purpose since you need a plan for that. It’s still pretty useful though!

Before I lost my job, there was someone new I met that knew how to do that. Wish I had learned from him before the hammer dropped.

Do you think it requires a “hack” or “jail-break”, or is it as simple as getting an old iPhone, connecting to the Internet via free wi-fi, private wi-fi, or a paid hotspot (like I have already) and then using Google Voice to make calls?

[jeffreylees]

Should be about that simple, once it’s all set up. I know you can use GV/Hangouts for text, calls, and video calls - as long as you’re on wifi.

What you need to know about the new Google Hangouts, Hangouts Dialer, and the...

There’s a guide… there might be better ones out there, but yeah. Not sure of the pros and cons of Android vs iOS for this. I’ve used GV as my primary voicemail on iOS, and used Hangouts to sort of instant message; My new Android phone does GV/Hangouts fine, and I use Hangouts for primary text app now too.

[SamA74]

@mikey_w

Very true, but thanks for the jumpstart!

What I’m basically saying is, you don’t have to have a smartphone in your hand or by your side to create a responsive design. But, you do need to have some knowledge and experience of using one to get it right. And, it is a good idea to have one to check both the look and functioning of the site when done to be certain it works as intended.

[mikey_w]

@SamA74

@mikey_w

Very true, but thanks for the jumpstart!

What I’m basically saying is, you don’t have to have a smartphone in your hand or by your side to create a responsive design. But, you do need to have some knowledge and experience of using one to get it right. And, it is a good idea to have one to check both the look and functioning of the site when done to be certain it works as intended.

Understood.

[yellowjacket]

Hi Mikey - I’ve read this entire thread and I feel your pain. I’m struggling with the same issues. By way of introducing myself, I’m not an IT guy, though I have a degree in Electrical Engineering so I’m a fairly quick study in technical matters. My kids are grown and my wife died very young of cancer so I only have to support myself. I have been a marketing consultant for 40 years. I used to make big six figures creating brochures, TV commercials, international magazine advertising, etc. All of that drifted away due to technology changes in the 1990’s so I replaced it with web development. Then CMS, Wordpress, etc. eroded that. IMO, the big threat now if you are targeting small web clients is Wix, 1+1, etc. My experience is that you are positioned well because the best clients I’ve added in recent years need cosmic programming skills, mostly in PHP/MySQL. The downside is that some need a $100,000 buildout but only have $6,000 to spend. I walk away from those.

I self-trained in responsive and am proficient. What I’ve found is that each assignment leads to the next and you can carry much of your CSS knowledge-base forward.to the next project. This can be a huge time saver if you make your CSS modular.

There’s a lot of free code out there that you can use (and tweek) to your needs. Here are some ideas:
Responsive Menus: http://cssmenumaker.com/
Smartphone Emulator : http://mobiletest.me/

Good luck. God bless you and your family.

[mikey_w]

@yellowjacket

Hi Mikey - I’ve read this entire thread and I feel your pain. I’m struggling with the same issues. By way of introducing myself, I’m not an IT guy, though I have a degree in Electrical Engineering so I’m a fairly quick study in technical matters. My kids are grown and my wife died very young of cancer so I only have to support myself. I have been a marketing consultant for 40 years. I used to make big six figures creating brochures, TV commercials, international magazine advertising, etc. All of that drifted away due to technology changes in the 1990’s so I replaced it with web development.

Thanks for sharing your personal story as well. (You sound like a survivor!)

@yellowjacket

Then CMS, Wordpress, etc. eroded that. IMO, the big threat now if you are targeting small web clients is Wix, 1+1, etc. My experience is that you are positioned well because the best clients I’ve added in recent years need cosmic programming skills, mostly in PHP/MySQL. The downside is that some need a $100,000 buildout but only have $6,000 to spend. I walk away from those.

Yeah, I am starting to encounter that.

@yellowjacket

I self-trained in responsive and am proficient.

How long did it take you to convert your presumable HTML and CSS proficiency into RWD proficiency?

@yellowjacket

What I’ve found is that each assignment leads to the next and you can carry much of your CSS knowledge-base forward.to the next project. This can be a huge time saver if you make your CSS modular.

True.

@yellowjacket

There’s a lot of free code out there that you can use (and tweek) to your needs. Here are some ideas:
Responsive Menus: http://cssmenumaker.com/
Smartphone Emulator : http://mobiletest.me/

Thank you. Those will be handy!

@yellowjacket

Good luck. God bless you and your family.

Same to you, my friend!

[yellowjacket]

Hi Mikey - I think you asked how long it takes to get up to speed in responsive. You are a programmer, so HTML should be a weekend. Responsive CSS is the core that you need. Responsive is like playing the guitar. You can be “sorta good” in a month. To be a virtuoso takes longer. Here are some more links:
Prebuilt PHP/MySql CMS solution. Free to learn. $40 license per site you add it to with 3 months included tech support from them I’ve learned it and tested it. Haven’t installed it on a client site yet.: http://www.couchcms.com
Here is the seminal article on RWD: http://alistapart.com/article/responsive-web-design

[mikey_w]

Based on everyone’s comments, it sounds like the best place to start learning RWD is with some of the RWD books mentioned above, correct? (As opposed to learning HTML5 or CSS3 first…)