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
Related
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"
I am trying to convert my current website to a mobile version. I will be creating different views (I am using codeigniter) but want to make sure the CSS will look perfect on all phones. What are the universal/standard specs for a mobile website?
Also, what language is recommended? I was thinking just changing the CSS to a specific width and redesigning according to that width.
As there is no fixed limit of screen width/height of mobile devices. You must consider using percentage value for sizes. That way your mobile site will be more compatible.
For info on effective mobile websites, ie, what you should include and what not. Take a look here
http://www.qsrweb.com/article/202567/3-tips-for-creating-an-effective-mobile-website
For width related queries, see this,
Mobile version of my website, what design width is optimal?
A quick google search yields the following:
W3C's thoughts: http://www.w3.org/standards/webdesign/mobilweb.html
Smashing Magazine's thoughts (I have enjoyed some of their comparison articles before): http://www.smashingmagazine.com/guidelines-for-mobile-web-development/
You will want your page to be easy on the fingers, keep the text displayed to a minimum at first (i.e. summary + expanding things), and overall run fast. You will probably want to have multiple levels of fallback on things like CSS so that people running a CSS 1/2 browser can still use the website, even though CSS3 browsers may have a better experience.
Your site could also make use of media queries to choose a stylesheet based on the size of the user's screen (there are several standard sizes, especially if you consider the popular devices).
Javascript and other things like that should also work well for fallbacks. Using things like HTML5 canvases and WebSockets and such are good since they can be assisted directly by the mobile device hardware, but your script should handle those things not being available as well.
And, as always, an easy to navigate page goes a long ways just as it does with normal development. If the user can tell just by looking at the page how to use it intuitively (remember, intuitive for you isn't always the same as someone else), then I would think you are on the right track.
There are many takes on designing sites for mobile devices. The most straightforward, is to build an entirely separate user interface, just for the mobile site.
The next method would be to use CSS media-queries. This allows you to re-use your current UI and styling, but you can tailor it's content to specific widths and devices.
Lastly, is fully responsive design. It's rather similar to media queries, except that it uses percentages, instead of absolute pixels. It's the most seamless way, that a standard width-webpage can scale to fit the screen of a smaller mobile device. It can even scale up easily!
Here's a good place to start learning about responsive web design, and how it applies to mobile devices - http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Try scaling the size of your browser while on that site. Notice how the layout changes. That's CSS media queries at work.
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.
I have a website that I want to make look good from a non-mobile browser, but make very usable from a mobile device.
I'm thinking I'm going to detect if the user is likely using a mobile device, and if they are, redirect the first hit to a page that says something like: "It looks like you're viewing this page on a mobile device. Would you like to view the mobile version?" Based on the user selection, I'll set a cookie. (Would this be annoying, or helpful?)
But I'd also like to make sure that if I miss someone who is mobile browsing (if I think they're non-mobile, but it turns out they aren't), I provide some way to switch to the mobile version. Also, if I detect someone is mobile, but they'd prefer to browse the full non-mobile site, I need to allow that, too.
I'm leaning toward having a mobile and non-mobile version of every page on the site, just presenting the data differently (and with a lot less images, etc) for the non-mobile version.
Anyone who's been through this, have advice? Any links to sites that do this right?
I'd suggest using WURFL for the detection part.
Also, lots of good reading material about such practices on Mobiforge
I'm trying to determine what kinds of interactions a mobile website can handle. For example, I obviously can't track page-level dragging operations because this scrolls on mobile browsers. So, I'm looking for demos that can tell me what interactions work, how well, and hopefully for information about how consistently that is across mobile devices. For example, I'd like to know if I had a page that fit on the screen, would my page elements receive mouse move events when I drag my finger? I could test that myself, but I figure there are probably lots of things that could be tested, so I was hoping there was something like the ACID test, but for mobile UI interactions.
I don't think I've ever seen such a thing, but the thing to remember is the browser is just one key factor in the interaction between your application and the user. The capabilities of the device itself is a large part of what you can and cannot do. For one, the iPhone has a full JavaScript stack and CSS rendering ability as well as the ability to "click". However, on a BlackBerry you're going to lose a lot of that CSS and JavaScript functionality. Also, with Nokia handsets you're going to be dealing with a different beast. The best way to develop for something like this would be to either use a framework/device template like the ASP.NET Mobile platform, or to go as close to basic HTML as you can.
There is no silver bullet, and you're just going to have to try to cover as much market share as you can. One thing I can share, is that the more standards compliant and semantic your markup, the better it will render across the devices. Sometimes, you can even get away with just coding the site once provided your site degrades well when CSS and JS are not available.