So I am creating my first webpage catered to mobile browsers. What are some things to consider?
How do I get the resolution right for different devices (Blackberries, iPhones, iPads, etc.)? Is there a common method that people are using? Some sort of framework?
How do I prevent zooming (on most touch screen phones, you can zoom in by pinching)?
What are some other things to keep in mind?
There are a ton of good practices to follow. Here are a few:
make the content shorter and easier to read. People can only scroll so much and read so much on a smaller screen size.
develop all your content in one single column. Make the width flexible (100% or close to it) so that it expands to fill the screen Do not make people horizontally scroll the page.
do not use a lot of a) scripts, b) css stylesheets, c) images. These require lots of downloading and will increase the page load time and the cost for the user (as most people on mobile pay per KB for Web browsing). Consolidate / gzip your files.
in your css, add extra line-height for easier reading.
in your css, add extra letter-spacing between numbers in phone numbers, for easier reading.
retain a link back to the full site, for those who want the full content.
include a back to top link at the bottom of the page, so users do not have to scroll all the way back up.
add padding to a hrefs so that it is easier to click/touch a link.
use HTML5 form types so that modern browsers will use the appropriate keyboards... http://diveintohtml5.ep.io/forms.html
Just create normal web pages with liquid layout and let the browser take care of choosing an appropriate width.
If you know your pages will scale down nicely to mobile screen sizes, give the browser a clue that it can show the pages 1:1 without zooming by default. Include in your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
I would strongly recommend not attempting to disable zooming (user-scalable=no) as it's a useful feature that you gain nothing by blocking.
Related
My first attempt at a RWD site was for a simple one-page site for an NFT project. It didn't use media queries, but many lines similar to: max(value, calc(vw*x)) for margins, padding, font-size, etc.
I also was dependent on Javascript. If the screen was <400px I might have a header bar anchored to the top with a profile pic left, title center, hamburger menu right, content underneath. If the resolution was larger socials appeared in one spot, if larger, in the footer. If the screen was over ... 600px, I lost the top header bar; title became the first line in the main content area; hamburger popup menu now a permanent fixture as left navbar, PFP floated left in the content area.
Being new, is this good or bad? I only hear people speak of flex boxes and grids. Not rearranging layouts with JS. Since the layout and content is essentially within JS code, any attempt at SEO for naught?
Using max() and calc() can work for simple layouts, but can become difficult to maintain for more complex layouts. Flexbox and Grid is more effective and efficient for creating responsive layouts. When it comes to SEO, it's important to ensure that your content is accessible to search engines by including it in the HTML of your page.
Javascript is great for making pages dynamic and obviously improving some UX things, but you should know where and when to use it.
You should definitely use CSS and media query for responsiveness on your page. There are a lot of frameworks or libraries that make the css writing process a lot less painful (I use Tailwindcss and I think is a good one).
And as for SEO, if you create a page based entirely on javascript, you will find a lot of difficulties in this area. You should read about server-side rendering, which may help you to improve this.
Today we have a lot of tools that can help you with this, if you use React you have Nextjs, if you use Vue you have Nuxjs and so on.
I used Highslide JS about 5 years ago on this site: http://wela.ctc.edu/academy12-13.aspx (example page). Now I'm redesigning the site use Twitter.Bootstrap and am trying to figure out how I can tweak the Highslide popups to work in a small device width. Is this possible or should I use find another solution to implement? I've played around with the setting parameters in my highslide-with-html.js file, but the results have been unsatisfactory. If it is possible to use Highslide in a responsive design, would be grateful for any URLs to look at.
The short answer is that Highslide adapts very well to small devices if you're opening images. The expander is purpose-built to do just that - display the image as large as it can without exceeding the boundaries of the viewport.
But when opening anything else - an expander with HTML content, an iframe, etc. - the expander must initially be a fixed size. You can put a resize handle on it, but that's not really good enough for handling everything from a smartphone to a large monitor.
Without rewriting Highslide JS, overcoming this limitation would require that your page do its own detection of the viewport size, then either modify the call to htmlExpand() on the fly, probably with some jQuery manipulation, or change the .highslide-html CSS class width. The latter approach (targeting the CSS) seems like it would be easier.
I am using a script from http://detectmobilebrowsers.com/ to detect whether a site is being viewed on a mobile browser.
If the site is on a mobile browser, I show a pared down, simple slideshow. If it is a regular browser, I show a whiz-bang super slideshow. I'd like to optimize my images, making them as small as possible on the mobile slideshow. My mobile slideshow is responsive, so it will shrink to fit in whatever window, but I don't want to make it any larger initially than it absolutely has to be.
Does anyone know what the maximum width is on the current array of mobile browsers? Or rather, the maximum width of mobile devices that are detected with the http://detectmobilebrowsers.com/ script?
BTW, I'm not asking how to detect the width once the page is loaded in a browser.
Thank you!!
Edit....
I think you guys misunderstood my question. I AM using max-width:100%. My images DO scale to fit any screen-size. And, I DO determine whether to show a simple slideshow or a complex one. Here's my logic:
If the user is using a mobile device (based on the device detector)
show a simple slideshow
Else the use is NOT using a mobile device (based on the device detector)
If this is a small screen (based on media queries)
show a simple slideshow
Else this is a large screen (based on media queries)
show a complex slideshow
End If (based on media queries)
End If (based on the device detector)
Why bother using mobile detection at all? Because even though for small screens I am only showing the simple, low-filesize slideshow on small screens, the images from the complex, image-heavy, high-filesize slideshow ARE STILL DOWNLOADED (http://cloudfour.com/examples/mediaqueries/image-test/). My media query determination of which slideshow to show doesn't save the user from having to download the images of the slideshow that's currently not shown. It's only used because the simple slideshow looks better on small screens than the complex one. Using the mobile detection screen makes sure that images that aren't shown, aren't downloaded.
Why do I care what the maximum width is on current mobile devices, when my images are set to 100% width and will scale down to fit any size? Because a 900px wide image has a larger filesize than a 600px wide image. If I know what the max width is that the image needs to be, I can save the slide down to that size initially, saving some additional bandwidth. Have you guys ever viewed a slideshow on a mobile device? Slow!
I would really appreciate if anyone can point me towards the proper stats. I googled, but couldn't find what I needed.
The answer is almost certain to change as soon as you deploy the software.
It also depends on whether you mean pixels or screen-resolution-pixels (the Retina displays define them differently).
Perhaps it's best to stick with detecting mobile browsers (if you don't like the scripts you're using, see , e.g.:
Detecting mobile browsers on the web?)
and then let users opt into higher-rez images.
Alternately, you could try to detect bandwidth, which is really what you're optimizing for; 'mobile' is just a proxy for this, and only moderately correlated with it.
I'm retro-fitting a website for Mobile First Responsive Design (MFRD). My question is - how far do you go with the "Mobile First" part?.
For example - on the homepage I plan on having a list of upcoming events, say 4 or 5. On the mobile version I thought 2 would be enough to save screen real-estate. Should I load the other events in dynamically for the larger views, or should I just hide them since it will only be a few elements anyway?
Loading them dynamically for larger sizes means I have to attach an event to the window resize which typically gets fired every pixel. Even though I can offset that with Timeout, that's still a lot of client side checking is it not (even though it's not like users are constantly resizing their browsers).
I mean, even though you're designing for mobile first, you also have to consider the larger sizes right? Obviously larger JavaScript libraries and other assets that are needed for larger only you want to pull in later and not load for mobile - but how crazy do you want to get with the bandwidth saving?
What is the target market for the website? Are you making a completely responsive website that encapsulates smartphone to desktop? Or are you just concentrating on smartphone to tablet?
Mobile First really just means start your styling and content views at the smallest form factor and work up as the device dimensions get bigger. HTML, CSS (media queries) and jQuery all play a part to expand the UI and manipulate (show/hide) content elements as the browser gets bigger.
Take a look at Smashing Magazine, their responsive layout is one of the most extensive I have seen so far, it will give you an idea of how far you can take the MFRD or DARL (Device Agnostic Responsive Layout) methodologies.
Hi sorry if this is already asked. But I looked around quite a bit.
The methods I have found for detecting if a web user is using a mobile phone don't seem very nice. They are: look at the user agent string (hackish), look for a narrow width (but what's narrow?).
Is there a direct way to see if the browser supports the <meta viewport...> directive?
I think that would be the best way.
Because that's what we want... If the browser supports viewport (i.e. is mobile) use it. Otherwise not.
Try this one:
http://detectmobilebrowser.com/
The meta viewport is seems to be implemented differently from the CSS attributes, so any solution involving reading the viewport width before specifying it may not be portable.