Develop Responsive SIte w/o Smart Phone?

Crazy question…

Is it possible to develop a “responsive” website if you don’t own a smart-phone? :relaxed:

Sure, why not? Use can use the developer tools on browser (most of them are shown when you hit F12 in your browser).

Chrome has a cool feature that enables the most popular models of smart phone and also can manage the throttling of the device helping you to understand how you site we work when you are, for instance, using a 3G network.

Grab the right hand edge of your browser and drag it down until its 320 px wide then grab the bottom of the browsers and drag it upwards…

There you go. :smile:

You now see what your site will look like on a mobile (assuming you have the viewport meta tag in place).

The truth is you can do nearly all your initial testing in the desktop browser by simply opening and closing the window. If at any point you get a horizontal scrollbar on the viewport or things look awkward then throw in a media query and fix it.

As mentioned above Chrome has some good mobile testing tools built in so read up on them and they will also help with the task.

There are of course some specific issues that can only be seen on the device but for straight forward html and css the desktop will give you a pretty good idea of how it will look on a device.

2 Likes

There must be more to it than that?

I thought the whole way smart-phones work and display things was a thousand times different than on a computer?

What is that?

But I don’t get horizontal scroll bars not on my non-responsive site. Of course my laptop monitor is larger than a smart-phone too!

I have never owned a smart-phone, so I’m not sure what I am asking about, but I thought a large part of responsive sites was that you need to be able to handle non-keyboard and non-mouse commands from the user. What about all of that touchy stuff and hand-gesture crap?!

What tools would those be?

Because I don’t have a smart phone! How could I mimic whatever it is people on smart-phones do? It’s not like I can touch my laptop monitor or use taps or gestures to navigate my site.

I don’t see how you can mimic not having a touch screen.

And do you think every mobile dev has every device to test with?

The best you can do is use the browser tools and emulators and hope for the best.
Then get beta testers to report any problems so you can look deeper into them

Post a link to your site in a site-review topic here and members that have mobile devices will be able to do some beta testing for you.

I think I am the only person left on the planet without a smart phone.

So you are saying unless I have a smart-phone then I can’t be sure any responsive website I would build will work?

But I am considering learning how to build a responsive website. If I must have a smart-phone to do that then maybe I won’t bother learning…

No, I am saying unless you have every smartphone there is no way you can be 100% certain.

But trust me, beta testers will be happy to let you know if they have any problems

@Mittineague,

Do you know how to build responsive websites?

If so, how do you test your code for obvious issues?

@PaulOB makes it sound like you just need to makes your browser window smaller?! :smirk:

The answers were given back in post # 2 and post #3

Making your browser view-port more narrow (or wider if you’re designing “mobile-first” instead of “desktop-first”) will let you see where breakpoints should be added in your media queries.

Firefox dev tools has “Responsive Design View”

.

And Chrome dev tools has enough to let you test to your hearts content.

.

.

And I’m sure there other emulators and online sites one could use.
But at the end of the day, emultators are not the actual devices, so all one can do is the best they can and then rely on “help” from those using the actual devices

This is one of those times when an Learnable annual subscription would be a great investment, not least of which because you can download this book

http://abookapart.com/products/responsive-web-design, or this one

Or in fact one of the many other ‘A Book Apart’ publications. They are not long in the greater scheme of things and you will learn an awful lot about the thinking behind terms like RWD, Mobile First, Progressive Enhancement and so on.

1 Like

Maybe Richa Jain’s article on the subject of mobile friendly design would be of interest to you too.

2 Likes

At the basic level yes this is all you need.

The main thing you are interested in is how much space is available for my design and what does my design look like when there is only 320px width of space (smallest iphone size) and what does the design look like at every pixel up until a max desktop width.

If you had no other tools you can make a basic responsive site this way and be pretty sure it will work on most devices.

Mobile doesn’t have hover so don’t create hover menus for mobiles and just use normal links which will work everywhere; avoid hover effects unless they are just decoration. A touch on a mobile device is just like a click and behaves in much the same way.

You don’t need to know about ‘swipe’ unless you get into advanced design and things like swipe are usually reserved for slideshows and ‘apps’.

As I said if you are just interested in basic responsiveness then create a fluid site that adapts to all widths using media queries to control the content when necessary.

If your site is a fixed width then yes you will get scrollbars when the browser window is smaller than the design. Just because you have your browser wide open doesn’t mean everyone does.

They react to touch but other than that they behave much the same except they are smaller. There are advanced things to consider such as pixel density, swipe, touch-events etc. but you don’t need to know about them from the start. (Pixel density mainly affects the quality of images that you present but won’t actually stop anything rendering.)

The viewport meta tag is the most important part of the puzzle and without it a device will simply scale your large site until it fits in the small viewport resulting in tiny text that is almost impossible to read. When you add the viewport meta tag the device will then assume that you are controlling the width via media queries and making the design fit nicely.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
1 Like

I don’t think Paul has a smartphone either (last I remember).

But yes, it’s really as easy as just doing the whole resizing the browser thing. That’s why I tell peple just get a fluid design, then do a few breakpoints.

You need to read this article I wrote.

You’re right I never had a smartphone until my wife got a new iphone at Christmas and gave me the old one. I’ve now made 2 texts and one call with it :smile:

2 Likes

How do you do that and know when it is 320px by whatever?

The lazy way is to have the developer toolbars open, and drag it down. In Chrome, if it’s open, the top right of the viewport will have the dimensions (as you drag) and you can easily see what width/height you are viewing at.

When I went into that view while viewing the post I am responding to I saw this…

That says to me SitePoint and Discourse were not build to support mobile devices…

Discourse is responsive, but Sitepoint isn’t. I’ve complained about this for a couple months now.

It appears they don’t want to do anything about it.

Yes, With Firefox, you need to “simulate touch”, reload the page, go into the hamburger menu and choose “Mobile View” to get the mobile CSS instead of the desktop CSS