Designing for mobile users

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
adrian5750
 
 
Posts: 85
Joined: Wed Apr 20, 2011 9:17 pm

Designing for mobile users

Post by adrian5750 » Fri Aug 30, 2019 7:04 am

HI Folks

I know that there's a separate 'responsive design' forum - but this is probably less of a detailed techy quesition - and more of a general one..?

Nowadays, I don't do a lot of website design - mostly maintaining my own website and just a few other 'older' sites.
All of these have 'Google-friendly' mobile variants - but these are just cut-down versions of the 'desktop' site, rather than full-blown responsive sites.

As a favour, I'm making a single-page site for a local fellow who done some work for us.
To be honest - it's more of an online 'flyer' - just a page so he can be found and contacted on the web.

So - seeing the stats about mobile usage - I'm wondering whether it's time to bite the bullet on this new little site - and make it responsive...?

Question is - how responsive?
What's the 'bottom end' mobile screensize that you clever folks are designing for nowadays?
I'm aware that I've been somwhat left behind by the march of progress, and well recall the agonising we went through designing 'desktop' websites in the latter part of the 1990's that looked OK in both 640x480 and 800-pixel-wide monitors (so that dates me!)

Comments and suggestions please!
I'm guessing that one of the ready-made templates will be the fastest way to get up & running with this little project.

Thanks
Adrian (a web dinosaur!)

User avatar
rogerl
 
 
Posts: 246
Joined: Tue May 03, 2016 8:24 am

Re: Designing for mobile users

Post by rogerl » Sat Aug 31, 2019 7:52 am

You have so many choices these days. I chose to use break points. My default / desktop size was 1250 then I chose 768, 480 and 320. Since finishing I wish I had chosen a higher minimum of around 380 rather than 320 as most modern mobiles are wider. I found most of the test mobiles I tried defaulted to the 480 and would have been better at the 380 area. Maybe I should have added something in between 480 and 768 as well! Anyway it was all new territory to me and the end result looked pretty good.
Don't forget to code for people turning their phones around from portrait to landscape if you are using fixed layers. I used media statements which reset things nicely when the phone is tuned and the screen gets re-written.
Also mobile browsers behave differently, especially Chrome and Apple. I believe Pablo has added something to help since I last looked at this but I ended up using an extension "Android & IOS Full Screen Background Fix". It fixed issues when I used full background images and got rid of white spaces. And the last issue was text which is handled differently so I end up compromising on block sizes allowing more length than used on desktop presentation.
Hope this helps.

adrian5750
 
 
Posts: 85
Joined: Wed Apr 20, 2011 9:17 pm

Re: Designing for mobile users

Post by adrian5750 » Sat Aug 31, 2019 8:26 am

Hi Roger
Thanks....
To be honest - I've kind of shied away from the whole 'adapting to mobile phones' issue - but it seems that an awful lot of people are browsing the web on mobile devices.. so I guess I'd better try and catch up!
It was just this question of where the 'bottom end' is....? - before I spend a lot of effort catering for a non-existent market...
Thanks
Adrian

User avatar
rogerl
 
 
Posts: 246
Joined: Tue May 03, 2016 8:24 am

Re: Designing for mobile users

Post by rogerl » Sat Aug 31, 2019 9:51 am

Yep, I resisted for a couple of years then realized I had to bite the bullet and go with the flow, a frustrating but interesting exercise.

alan_sh
 
 
Posts: 520
Joined: Tue Jan 01, 2019 5:50 pm

Re: Designing for mobile users

Post by alan_sh » Sat Aug 31, 2019 11:04 am

I've tried the 'fully responsive' mode with the layers and stuff provided here, but I found it quite limiting as I only have partial control over where things go.

So, I now write using the 'adaptive' method. I have done 4 sites so far and all seem to work as I expect them to. I set the default breakpoint at 1280 and then have others set at 980, 768, 480 and 320, which seems to capture all the major devices in both portrait and landscape mode.

I did do a small Youtube video on how to set this up for a new site - have a look in the tutorial section of this forum.

Akab

adrian5750
 
 
Posts: 85
Joined: Wed Apr 20, 2011 9:17 pm

Re: Designing for mobile users

Post by adrian5750 » Sat Aug 31, 2019 11:57 am

rogerl wrote:
Sat Aug 31, 2019 9:51 am
Yep, I resisted for a couple of years then realized I had to bite the bullet and go with the flow, a frustrating but interesting exercise.
Understand about the 'interesting' aspect - just a matter of finding the time...
as web design isn't really my main activity any more....

Old dog, new tricks and all that!
Thanks

adrian5750
 
 
Posts: 85
Joined: Wed Apr 20, 2011 9:17 pm

Re: Designing for mobile users

Post by adrian5750 » Sat Aug 31, 2019 12:02 pm

alan_sh wrote:
Sat Aug 31, 2019 11:04 am
I've tried the 'fully responsive' mode with the layers and stuff provided here, but I found it quite limiting as I only have partial control over where things go.

So, I now write using the 'adaptive' method. I have done 4 sites so far and all seem to work as I expect them to. I set the default breakpoint at 1280 and then have others set at 980, 768, 480 and 320, which seems to capture all the major devices in both portrait and landscape mode.

I did do a small Youtube video on how to set this up for a new site - have a look in the tutorial section of this forum.

Akab
Yes - I guess that's part of my concern.
I've seen some commercial sites that have been designed to adapt to smaller viewports - but look (to me) quite dreadful in conventional computer formats. I'm sure some of that is down to the designer...., and I suppose wysiwyg will allow the 'look' to be defined for different resolutions - just wondering how many 'different' screenwidths I need to worry about.

Back in the '90s it was so much easier - design for a 640-pix width, and drop a nice coloured border down the sides for those dangerously=progressive individuals using an 800-pixel screenwidth!
Mobile phones - not an issue!
Ah - the good old days....

alan_sh
 
 
Posts: 520
Joined: Tue Jan 01, 2019 5:50 pm

Re: Designing for mobile users

Post by alan_sh » Sat Aug 31, 2019 12:51 pm

My breakpoints allow for:
1280 - conventional PC screen
980 - iPad Pro in landscape mode
768 - iPad pro in portrait mode/iPad in landscape/some mobile phones in landscape mode
480 - iPad in portrait mode/phones in landscape mode
320 - phones in portrait mode

I think that covers most scenarios.

If you want to see/try it out, head for https://test.penninescouts.org.uk - let me know what you think

Alan

adrian5750
 
 
Posts: 85
Joined: Wed Apr 20, 2011 9:17 pm

Re: Designing for mobile users

Post by adrian5750 » Sat Aug 31, 2019 1:02 pm

Thanks Alan
I'll have a look later
Adrian

User avatar
rogerl
 
 
Posts: 246
Joined: Tue May 03, 2016 8:24 am

Re: Designing for mobile users

Post by rogerl » Sat Aug 31, 2019 11:33 pm

Hi Alan - had a look at video. That's a good start up guide. I wish I had managed to get the Master page thing right when I tackled my project but for some reason never got it to work. Probably my frustration at the time and with so many pages to do and faced with doing break points for each. I think your selection of bps confirms my thoughts at the time. I missed the 980 as I felt large tablets and desk tops seemed to handle the 1280 well and let's face it there are fewer issues on desk top screens. Still think there is a case for upping the 320 to 380 as it will tidy up issues at that size and you'd be hard put to find that size screen around now days.
Enjoy Adrian!

adrian5750
 
 
Posts: 85
Joined: Wed Apr 20, 2011 9:17 pm

Re: Designing for mobile users

Post by adrian5750 » Sun Sep 01, 2019 7:07 am

Thanks both for the pointers....

This particular website (more of a web-page) has been mooted for at least the last 18 months - so, once the client comes up with the content, I'm hoping he won't want it done 'immediately'.

My other business is staned-glass and fused-glass - and I'm at the back end of the summer rush (we're in an area popular with tourists - and the 'busy season' is from March to end-September) - but, would you believe, my retailers are now asking about Christmas stock - so the webpage will need to be fitted in as & when...

And to think we moved out here to rural south-west Ireland for a quiet life!

Many thanks - some food for thought there
A

User avatar
rogerl
 
 
Posts: 246
Joined: Tue May 03, 2016 8:24 am

Re: Designing for mobile users

Post by rogerl » Mon Sep 02, 2019 10:20 pm

A final comment on this subject.
My Partner recently acquired a Galaxy Tab A 10.1 inch tablet and this subject led me to check our web site on it, Silly me! I now realise I should have done the 980 break point to cover tablets in portrait mode.
Guess you know what my new project is?

andyp
 
 
Posts: 257
Joined: Fri Aug 08, 2014 8:56 am
Location: Brighton UK
Contact:

Re: Designing for mobile users

Post by andyp » Mon Sep 02, 2019 11:33 pm

Have a look at the stats for one of my sites and you can see the popularity of the different screen sizes and also browsers

Image
Making mistakes....and still learning as I go along.. and very grateful to those who know far more than me... :)
http://www.apgraphx.co.uk

User avatar
rogerl
 
 
Posts: 246
Joined: Tue May 03, 2016 8:24 am

Re: Designing for mobile users

Post by rogerl » Tue Sep 03, 2019 12:22 am

You think there may be a trend there?!
Looks like a lot of people don't like moving their mobiles to landscape either. Interesting stats, thanks.

WWBman
 
 
Posts: 737
Joined: Fri Jan 08, 2010 6:10 pm

Re: Designing for mobile users

Post by WWBman » Tue Sep 03, 2019 7:50 am

Surprising how Firefox has recently plummeted way down the ranking.
I guess the big 19.0% will include the large number of laptops with 1366x768.

Post Reply