Mobile first? Simulator


(Jon Norris) #1

Forgive me if everyone knows this but it was news to me.
Designing mobile first is a pain, the 3 views in Rapidweaver help a little, and Preview helps a little more. I couldn’t find a way to view the exported/published site, via Ampps, Mamp or whatever locally, from my iPhone. Publishing to a live site was hopeless, our broadband speed being slower than New Horizons would accept from Pluto!
Downloaded Xcode free, from the Mac App Store, it has a built in simulator for the iPhone and iPad.
Job done.


(Brandon Scott Corlett) #2

Have you used the “Responsive Preview” available in Safari’s Developer Tools?


(Stuart) #3

I use the mobile simulator built into Chrome… works really well and avoids any need to install the Xcode behemoth.


(Jon Norris) #4

Yet the two look different. As do the other two options within RW. At least Xcode looks like a phone! But seriously, the Safari preview does not shrink to the size of an iPhone, it is wider for one thing.
As my problem is trying to get things to actually appear within an iPhone screen (mobile first!) I really needed to test it properly.
It looks like Xcode is the best way. Download it, open Simulator and away you go… Anyway, I’m no expert.


(Stuart) #5

I wonder if we are talking about the same thing?

In chrome I can select the device whose viewport I want to emulate, choose orientation and get a pretty darn good render of what its going to look like on that device/screen/orientation… I also get to use all the inspector tools to mess around with CSS, play with jquery on the console and see the effects instantly.

I just looked at XCode on the app store… 4.41GB … to get access to a mobile simulator… to test websites being made in an application which is about 170MB in size.

If it works for you… :slight_smile:


(Jon Norris) #6

It does! You’re an expert (jquery and stuff), me - I just want to see exactly what it looks like. I’m using Safari, not tried Chrome.
Anyway, horses for courses!


(Brandon Scott Corlett) #7

Safari does it too. It even allows for you to toggle between landscape, portrait, and split screens on iOS. i prefer the UI of Safari in most cases, but chrome and safari offer pretty much the same features for preview.


(Jon Norris) #8

I know, people - but they look different. I am trying to fit god knows what from a desktop site into an iPhone screen. I really need, as a total beginner to see exactly what it looks like.
These other options are all different!! I could send screen shots to prove it, but Safari developer, RW Preview etc do NOT show, to me, what is on my iPhone screen when I have actually managed to publish the site (with RW constantly crashing and our broadband joke-speed and FTP failures!).

Anyway - enough…


(Stuart) #9

haha… I have some bad news for you… the only way to see what will show up on your iPhone is to look at the site on your iPhone. Don’t care who you are or what you say, that’s the only way to be sure… even then that only proves how it will look on your iPhone and only at the time you checked it.

How is that 4.4GB download coming along? Is it finished yet? :wink:


(Jon Norris) #10

I shall crawl into a corner … I was sooo happy at my discovery and now you’ve all bullied me into a quivering quiescence of solitary sobriety. It works for me (sob) ;(


(Stuart) #11

Haha… you won’t be lonely in that corner… I’m in there a lot. :smile:


(Jon Norris) #12

Oooooooh. Under Develop menu, instead of going to User Agent and choosing the layout to look at, go to Responsive Design Mode - didn’t need Xcode. Told you!