Our testers rely on Chrome's responsive view in dev tools to see how our site works with various devices. Recently, we've been getting some issues reported with the "galaxy fold" layout.
It appears that Chrome considers the Galaxy Fold to be a 280px wide screen. Which seems unusually narrow compared to most every other smartphone out there right now.
In googling this device, though, it appears the Fold actually as a screen of 1536x2152 which is, a bit larger than 280px. And even accounting for retina/virtual pixels, I can't see how 280 correlates to 1536.
Is Chrome just wrong here? Or is it maybe confused with some older Galaxy device with an unusually small screen?
I believe the idea is that when the phone is folded, you should mostly get notifications and general info from the phone, and all view functionalities should be used with the phone unfolded. Because of that I believe in most cases the most appropriate way to deal with this situation is show a message to the user asking to unfold the phone in order to view the page. (Note that even the Galaxy Fold landing page doesn't display correctly when the phone is folded)
Related
I just got notification that my site is now in the mobile first index in Google.
So does this mean that I should change my developing and work at a lower resolution oprimarily and then check "just to make" that it looks OK at higher resolutions?
I would imagine that there's very few people looking at my website on a mobile device due to its nature.
Tablets and smaller PCs maybe though.
I also got notified on Google Search Console.
I don't think that to optimize for it is to lower your website resolution.
Some basic optimization I might suggest are:
Make your website responsive
Avoid using heavy fonts and images
You can declutter your mobile view from the desktop, do not worry if the content will be different, as long that it will still relevant to your desktop.
Make sure your pages are crawlable by search engine robots (Check your javascript)
You can check this timely discussion about optimizing for mobile-first indexing
https://www.propelrr.com/blog/questions-google-mobile-first-indexing
So, I worked on responsive sites before but I'm on my way to build my first responsive site now. I opened some articles on the subject, and boom: Mobile First.. I have no idea how I skipped that concept till now. From the beginning I cant seem to understand whole thing (except that number of mobile devices will take out soon desktop computers) and here is why.
How I'm supposed to know how my site will look for desktop version, if I design it for mobile first? I mean, on the smallest device I will have to eventually hide some content etc, how I'm supposed to know what to hide and move things, when I don't know how the site will look on bigger screen? Isn't stripping the things easier?!?!
For me (right now), the Mobile First concept looks to me like building pyramid upside down.
Most implementations actually have two sites: one for browsers and one for mobiles. The webserver redirects the client to m.your-domain.com (or mobile.your-domain.com) if it recognizes it as mobile accotding to the user-agent.
Still, there's room for responsiveness since you might decide to consider different screen sizes, both for mobiles as well as browsers - for example: iPad browser might display things differently than chrome on desktop.
Remark:
Even though we already reached the point where major portion of the internet traffic is done by mobile devices, your site/service might be such that most of its clients will be laptops/desktops. Take Stackoverflow for example :)
You should use google analytics and see what's the split and decide according to that if it's really worth putting energy into it (and if so - how much).
In my opinion. mobile first applies more to apps than to websites. It is relatively easy to make a responsive website, or two versions of a website, to accommodate different screen sizes. It is much more difficult to create an app that works equally well on both small, mostly touch-driven screens, and large desktop screens. In applications the difference is more than just what information you can fit into an available screen real estate. Mobile applications often have a different UI flow and use a different set of components (widgets).
Once you have analyzed your requirements, you have to answer a key question: can a single application/website offer a great user experience on both desktop and mobile devices? If it can, go for it. If it cannot, then you arrive at the mobile first concept: these days it is often better to start with a mobile experience. It will work on large screens too, even though it may look a little strange and it will not take full advantage of a desktop environment. If you app is successful, you can always create a desktop-optimized version.
Note that I said "often", not "always". There are many applications that users still prefer to access from their desktops. If you build one of those applications, there is nothing wrong with going desktop first.
stripping away stuff scaling down your website to a mobile website is not a best practice. nor is mainting two separate websites. starting from mobile lets you focus on what you really need and on the content of your site. don't think "graphics" but think "content"
hopefully my questions won't be too vague.
I designed a pretty simple website. You can see an image of it >>> here
But now I'm trying to make a mobile version.
However I'm contemplating using a different html for the mobile version since the desktop version has jquery pop-ups (prettyPhoto) and a very large backround that scales, which aren't great on mobile screens.
I'm unsure of how to do that. My first question therefore is:
1.) How do I call a different html for mobile?
Also, for tablets, the website renders pretty well in landscape mode but becomes weird in portrait mode. So my second question is:
2.) Can this different html be called based on width? If so, any ideas how?
So if tablet is viewing website in portrait mode, they get the mobile version, if they are seeing it in landscape mode, they get the desktop version.
I am not sure what you are attempting to do, but from experience as both developer and mobile user, what you propose is not a good idea. Again, since you have not mentioned what you are attempting to do, I am speaking generally. Consistency is very important for UX, and delivering completely different behaviours and looks for orientation does not sound like a good usability. Also, remember that on today's tablets, switching orientations is very easy. Would you load each version on each orientation change? What if the user is on 3G?
But technically, it is possible to load depending on width or orientation. Use AJAX, and load the appropriate content.
We have a site with Cufon-font and it's working fine in all the browsers except IE therefore, we've used Google font for IE css. We are now intend to create mobile site for it using same Cufon-font. My question is, Will it be ideal to use Cufon-font for a mobile site ? And will it cause any performance issues ? if "Yes" is there are any solution for it ?
Because from research I found some bottle necks and positive result for mobile. For example
Opera Mini supports (to a certain degree).
IPhones are good at Cufon-font.
From my personal experience I've visited the current web site (which is using Cufon-font) with the Samsung Galaxy W mobile and for some detail pages it took 18 seconds load. Until it loads the page completely the fonts are displayed as normal.
Is there a way to overcome these issues ?
Any comments would be appreciated.
On the IE issue, IE 10 supports custom fonts and that should work for you, previous versions of IE do not. As far as the time to load, that all depends on the bandwidth, the device, etc. So if you loading of over 3G its going to be slow for a large file.
I have an existing website running. I want this site to be able to be viewed on mobiles smart phones as well. I am ready to shave off some stuff, but would like to know how can I test this and are there any tools/guidelines on how to repurpose the site to be best viewed on mobile phones ? How to detect on the web site whether a mobile phone or a PC is hitting the site and accordingly serve the appropriate content.
There are few factors to consider such as:
- screen size
- touch vs non-touch
To detect whether the mobile phone hitting your site, you can simply verify the user agent.
There is a good article on this at A List Apart which will answer your implementation questions: Put Your Content in My Pocket
You can test by setting the user agent of your browser to that of mobile device. This can be done in safari under the develop settings, or firefox has various plugins.
And a tip, don't use anything that requires hover functionality. Touch screens don't hover.
You will find out it's a strange new world at http://mtld.mobi/
First decision you should make is which mobile platforms you want to support, then start coding...
As some one mentioned http://mtld.mobi/ is the best place to start for resources but for testing I would use http://ready.mobi that will test and debug your site and provide interface to viewing your website in mobile platforms.
First you need to decide what platforms/browsers you are going to support. If it is only smart phones like Android/Iphone/Blackberry it would be a pretty safe bet that as long as the website works in crome and isn't VERY javascript intensive and the site is catered for smaller screens it would be fine.
That is the theory in practise mobile is mobile and real world testing is the only way to go for 100% coverage.