Warning: count(): Parameter must be an array or an object that implements Countable in /data/web/virtuals/104571/virtual/www/blog/wp-includes/post-template.php on line 284
“Mobile version”

“Mobile version”

Hi guys,

the mobile homepage is really becoming a nightmare for me. However I think I made some progress in terms of deciding how to go about this.

First thing I need to emphasize – it was not a good idea to call this “mobile” version simply because it is not really for “mobile phones”, but rather devices with very small screens. Majority of today’s high-end smartphones will display the desktop version just fine, or at least in landscape mode (and you really cannot expect the page look good in portrait if you have two or three blocks next to each other containing a webcam image, graph etc.).

The mobile menu is working fine, in the next version I will only add a feature that will let you add your own external links to it.

The problematic part is the content section of the mobile homepage. I have recently asked you if you could help me out and several of you offered help. I also asked some of my friends who work as professional web developers and do this for living. The conclusion of this all is that in the current state of things, the small-screen homepage will never be nicely responsive. It is like asking someone “can you design me a responsive page”, they answer “ok” and you say, ok do it and when you are done, let me know and I will tell you how I want that webpage to look like and what I want it to include… I hope you get my point. I got several people sending me the CSS setting that best worked for them and as expected, each was different and when viewed on a different device it didnt look good again – simply because it really is impossible to design a page about which you know practically nothing 😀 Which is the situation there is now… I do not know what your page layout is, what the content is (which blocks you chose) and what screen size you are using…

So the bottom line is that the mobile homepage (small-screen homepage… or simply “lite version of the page”) needs completely different concept. First I thought about having some fixed layout, in other words I would define a fixed layout and block arrangement, which everyone would use, but where I would know exactly what I am working with and so be able to optimize it to look nicely on various screen sizes – just like you do a responsive page in general when you are making your own page or when a web designer makes a webpage for a client.

The problem with the above solution is that you would all have to have these blocks somehow pre-installed and obviously it would be very hard to find a combination that would more or less suit everyone. So this is also not an option.

Then I thought about yet a different solution. Keep the block selection to you just like now, but have either:

  • one column where the blocks are below each other, you would be able to choose which blocks you want and the order, and they would display in this order below each other
  • have some sort of a select box at the top, where you can select from the blocks you defined and that particular block will load either below (just like in a menu block) or load as a fullscreen popup (just like the fullscreen blocks on the desktop homepage)

At the top there would be the header, the current mobile menu and below this dynamic block (or just the selection if using the popup) there will be some sort of optimized footer.

Also, I would probably make the desktop load by default because in most cases it works fine and bypassing the redirection script will significantly speed up the initial loading time of the homepage. Most devices will simply always use the desktop and the few that cannot display it even in landscape will click to go to lite version and that could maybe be saved as a cookie for that particular device, so next time they will go directly to lite version.

This solution would therefore speed up homepage, solve the “mobile” homepage issue and make it all more efficient.

The question now is if it is better to use the menu block concept (i.e. select box and selected block loading below this box and one loading by default) or the popup concept (list of all blocks on the homepage as just titles and clicking it triggering full-screen popup).

Most likely I will make a poll because from my perspective it is about the same amount of work and time.

10 thoughts on ““Mobile version”

  1. Hi Jachym,
    indexMobile is working beautifully for me, just one column with little extra adjustments in font-size and a redesigned header.
    I have to tell you that after I started using it, it has quickly become the preferred meteocaldas version amongst visitors. A true sucess, so I don’t really see any need for a new mobile version, but since you are a wizzard of coding, it is quite possible that I will change my mind after testing your new “inventions” 🙂
    http://www.meteocaldas.org/mtp/indexMobile.php

  2. I also set my “mobile” page to a single column. Then I just modify the block CSS to get the look I want. Of course lite and simple win the day.

  3. On my windowsphone 640LX and my samsung galaxy s5 the pages with one column in the middle looks fine , on my tablet a nexus 10 (10,1 inch I can see the pages from the Desktop fine so as it is as now I think you better leave it as it is but thats my opinion

    Ron

  4. Hi,
    my “mobile” version has one column with blocks below each other. The actual problem is character used, the same of desktop version ….too small for using it with a smartphone. F.e. “current” block… Weather values are too small to read without glasses 🙂
    Naturally, this is my opinion.
    Regards

  5. I have to disagree with the statement ” Majority of today’s high-end smartphones will display the desktop version just fine, or at least in landscape mode”. My Samsung Galaxy Tab S3 does not display the main page correctly in landscape, but to me that isn’t a big deal.

    I have my “mobile” page set for a single column and also can use the WeeWX template for current conditions, which is all I really want on my phone/tablet anyway!

    For Mobile devices I thinks the old KISS principle applies, simple, and low bandwidth!

    My $0.02

  6. My mobile page has always been just one column, and it works fine for me. I include just the basic, common blocks most people would want for a quick weather check on a phone.

    I’ll go along with whatever you decide, but I don’t think you need any large changes from my perspective.

  7. Don’t Google lower SEO rankings if a site doesn’t automatically direct to a mobile-friendly format?

    I understand your comments but personally I think we’re going backwards here. Until v14 my single column mobile site worked perfectly in portrait on my iPhone SE. My desktop site has always looked awful on my mobile, obviously.

    I will miss not having full control over my mobile site and menu, but will of course go with the majority.

    • Simon that is one of the options I am considering:

      – one column, blocks below each other (pretty much like now, but everyone will have just one column and there will be no multiple/menu/sub blocks)
      – select box at the top and one block loading dynamically below it based on select box selection
      – a sort of checkboard with block titles and clicking it would trigger fullscreen popup with that particular block

      Re Google SEO: page rankings is always based primarily on content. I made absolutely no effort in optimizing the main meteotemplate.com webpage in terms of mobiles, meta tags etc., but as MT is becoming more popular and because it has regular updates and lots of content, it is now number one on page one for certain searches including eg. “weather template” and also not a single ad anywhere…

Leave a Comment