Making a site mobile friendly

[mangopo]

Hi,

what are the best options for making a PW site mobile friendly? Edit the current template and make it responsive or make a new mobile version to a subdomain? What PW modules/add-ons are there to help this process? The site is www.lentovertailu.fi

[dab]

Best approach is to just make your template responsive.

I've found this template very easy to implement:

http://getskeleton.com/

 

[AndZyk]

Hello @mangopo,

either you can make your existing site responsive using media queries or you can build an mobile version of your site.

There are pros and cons for each approach, but I would recommend responsive design over an mobile version.

If you want to learn more about this topic, there are many resources available, which explain it in depth:

• Responsive Design with CSS3 Media Queries

• Responsive Web Design: What It Is And How To Use It

Regards, Andreas

[mangopo]

Making a separate mobile version to (m.tld) is better in this case. How would it work with PW: two sets of templates using the same database for articles?

[Robin S]

2 hours ago, mangopo said:

Makin a separate mobile version to (m.tld) is better in this case. How would it work with PW: two sets of templates using the same database for articles?

I think a separate mobile website is an outdated approach and device sniffing will be both unreliable and require more maintenance. I would highly recommend a single responsive design, but if you're sure you want to pursue separate templates for mobile devices then you could select templates by domain as suggested here...

...or use the same approach but test for device using Mobile Detect.

[SamC]

I've used bourbon/neat for about the last couple of years, really simple to use for layouts: http://neat.bourbon.io/

Works great for me so far. I do exactly the same thing on my Windows PC using scoop http://scoop.sh/ (instead of homebrew https://brew.sh/ on the OSX laptop) to set up node.js/gulp (to compile the scss). Not sure this answers your question, but this is how I develop responsive sites.