css: set PRE’s max-width so it doesn’t stretch the viewport
[mina86.com.git] / posts / mobile.en.html
blob9284098ca26b8f7142e5c32e1c4f45ef23d1509c
1 <!-- subject: Mobile is the future -->
2 <!-- date: 2015-03-17 01:42:26 -->
3 <!-- categories: Site News, Techblog -->
5 <figure class=nw>
6 <img src=/d/news-mobile.webp width=1000 height=200
7 alt="Photo of a smashed mobile phone.">
8 <figcaption>(photo by <a href="https://www.flickr.com/photos/doctorow/16426637175/">Cory Doctorow</a>)</figcaption>
9 </figure>
11 <p>A few days ago I received an email from Google Wembaster Tools saying no more no less but: ‘Your webpage sucks on mobile devices!’ Or something. Now that I think of it, I could have been worded slightly differently. The gist was the same though.
13 <p>I never paid that much attention to how my site
14 looks on phones and tables. I’ve made sure it loaded and looked, but
15 apart from that never spent much time on the issue. I always
16 thought optimising for a small screen would be a lengthy and painful process.
17 How mistaken I was!
19 <p>In my defence, when I last looked at the problem, state of mobile browsers
20 was different; now there are two things to do. First, add
21 a <code>viewport</code> meta tag, e.g.:
23 <pre>
24 &lt;meta name=viewport
25 content="width=<i>device-width</i>, initial-scale=1"&gt;</pre>
27 <p>and then <a href=https://alistapart.com/article/responsive-web-design/>use <code>min-width</code> or <code>max-width</code> CSS media
28 queries</a>. Admittedly the second part may take some time, but if
29 your layout uses simple markup rather than being TABLE-based,
30 reading the excellent article on A List Apart might turn out to be
31 the most time consuming step.
33 <p>If you haven’t already, do take a look at whether your website
34 looks reasonably well on small screens. Apparently mobile is the
35 future, or some such.
37 <p>The ‘bad’ news is that I’ve dropped endless scroll feature. This is
38 because in narrow layout the sidebar moves to the bottom and
39 endless scrolling would make it unreachable since it would
40 run away all the time.