?

Log in

No account? Create an account
 
 
08 June 2014 @ 01:02 am
Responsive UI  
Recently I spent some time making my web site mobile friendly.
Here's how I did it:
http://nubisnovem.com/responsive-ui/

Short version:
1) Discarded Twitter Bootsrap as too heavy.
2) Added "viewport" meta tag.
3) Removed fixed width from div and other elements.




Want to see if your web site is mobile friendly?
Open it in Google Chrome, press ctrl-shift-i.
Press Esc in order to "Show drawer".
Then find "Emulation" tab, select your favorite mobile device (e.g. "Google Nexus 4") and click "Emulate".
Read more about mobile emulation: https://developer.chrome.com/devtools/docs/mobile-emulation
 
 
 
fatoff: Fatofffatoff on June 8th, 2014 05:41 am (UTC)
What tab?

Untitled

Edited at 2014-06-08 05:42 am (UTC)
Dennis Gorelik: 2009dennisgorelik on June 8th, 2014 06:05 am (UTC)
First you need to click "Show drawer" icon on the left (third from the left).
I updated this post to reflect it.

Does it work for you?

Edited at 2014-06-08 06:23 am (UTC)
журнал закрытjuan_gandhi on June 8th, 2014 05:49 am (UTC)
How do I find this tab?!
Dennis Gorelik: 2009dennisgorelik on June 8th, 2014 06:08 am (UTC)
ctrl-shift-i
Esc to "Show drawer" tooltip.
Then click "Emulation".

I updated this post to reflect it.

Does it work?

Edited at 2014-06-08 06:23 am (UTC)
журнал закрытjuan_gandhi on June 8th, 2014 03:07 pm (UTC)
On my mac, I tried a bunch of combinations; neither produced an icon...
Dennis Gorelik: 2009dennisgorelik on June 8th, 2014 07:19 pm (UTC)
Are you using Chrome?
If yes:
1) Right mouse-click on content of the page.
2) Select "Inspect element".
3) Then click "Esc" or find icon with "Show drawer" tooltip.
https://developer.chrome.com/devtools/docs/mobile-emulation
журнал закрытjuan_gandhi on June 8th, 2014 09:28 pm (UTC)
О! Спасибо! Оценил!!!
Clean and sober: aboutloveanspa on June 9th, 2014 07:12 am (UTC)
May be it would be a good idea to replace this with the Ctrl-Shift-I scenario in the article.
As this seems to be more generic? Thank you! =)
Dennis Gorelikdennisgorelik on June 9th, 2014 07:46 am (UTC)
Sorry, I don't understand: replace what with what?
Clean and sober: aboutloveanspa on June 9th, 2014 01:57 pm (UTC)
My apologies. It was a long night for me. I meant having "Ctrl-Shift-I" in the article is very narrowed to Windows users. May be we have to replace those instructions with more generic steps, that you outlined above, that should work for Mac users, too? Thank you.
Dennis Gorelikdennisgorelik on June 9th, 2014 05:56 pm (UTC)
Windows users are probably over 80% mark.

I already added "Read more about mobile emulation:" link.
Do you think anything else is needed there?

I don't really know what works on Macs, but I guess that Linux has the same hotkeys in Chrome.
Clean and sober: aboutloveanspa on June 10th, 2014 03:20 am (UTC)
I think it would be helpful to be more generic for clarity sake. But if you feel that was enough of tips, it's alright. I am not insisting on anything. =)

BTW Windows users are probably at 70% and that share is declining even further. Every other developer has a Mac in addition to their PC. Every student has a Mac.