On Fri, Apr 24, 2015 at 7:35 AM Erik Visser <e...@erikvisser.net> wrote:
> Dear list members, > > I have to transform this traditional handwritten html website into a > mobile friendly website: http://www.utrechtsyogacentrum.nl > > The google webmaster tools testing page has two complaints. The site is > too wide. And links are to close to each other. > > Other google information pages suggest to use inline styles. But that is > against what i know of building websites using css. > > I agree with you on this. Odd that it was recommended... > So i'am wondering: what is the right approach / solution ......? > > I like the idea of having one site and targetting different devices. Is > this the way to go? > > Should i use media queries and css for all kind of screens: > > http://www.htmlgoodies.com/html5/css/cutting-edge-device-targeting-with-css3-media-queries.html#fbid=a7t_mgj4iPJ In my opinion, yes. This is the only way we build sites where I work now. I will add here though, that going from desktop to mobile is, IMHO, more difficult and requires more code. I strongly recommend a mobile-first approach if you can. I understand this may not always be possible - as in your case - but I believe it's the best way. > > > And depending on the device that is reading the website: > - leaving out images? or exchange them by small size (width / height) > images? > Yes. You can look into "responsive images" with a google search. Support is improving. I am still using a polyfill called picturefill http://scottjehl.github.io/picturefill/ > - changing the orientation of the page depending on the orientaion of > the device visiting the page? > This is something you don't really do, it just happens, but you can adjust your styles (and therefore the visual layout) to better fit a device upon orientation change. > - for portrait screens: display a top-menu instead of a left-menu > - ... ? > Navigation is a tough nut to crack sometimes. There are various ways of dealing with a site's navigation on smaller screens. Off-screen, drop down/fly-out/expanding, etc. You'd have to assess your needs and decide what will work best for your site. > > So i like some advice from the masters who already converted or designed > some website for multiple devices / screensizes. > > Is there a good step by step guide somewhere? > If you are new to this, I like the A Book Apart books that focus on this. http://abookapart.com/ There are many other good books and reference sites around. I do not recommend w3schools, however. > > All information and ideas are welcome. > > Thanks, Erik > Hope this helps! ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
