Forum Moderators: not2easy

Message Too Old, No Replies

Readability of text on mobile devices

         

deeper

5:16 pm on Sep 12, 2014 (gmt 0)

10+ Year Member Top Contributors Of The Month



Hi,
my relaunch of an old static site on Wordpress will be supported by a special theme called "Headway".
It allows to acivate "responsive", so the "blocks" (similar to WP-widgets) were moved and adjusted, dependant on the the mobile device(browser window).

Furthermore, after activating responsive there are further options, for example setting breakpoints and hiding single elements.

My site has a lot of text with paragraphs of max. 7 rows, each has about 10 - 13 words. The text column is the middle column of three columns. The width of all three should be about 1000 px for desktop.

Is it possible to make the text mobilefriendly without a typical paragraph being compressed to many rows with very few words or very few rows with very long rows?

not2easy

6:33 pm on Sep 12, 2014 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



On mobile devices visiting a site with responsive design, the text is a smaller size proportional to the settings in the css. If the theme has responsive options they should be handling the text size adjustments with viewport settings. These changes are only visible on a mobile device so you would need to view it using a mobile device. That way you could see if you need to set breakpoints and where.

deeper

9:56 pm on Sep 12, 2014 (gmt 0)

10+ Year Member Top Contributors Of The Month



"That way you could see if you need to set breakpoints and where".
If? Would be great, if they were not necessary, but 12 words per row resized to the width of a smartphone probably are very very small, even if right and left column will disappear (may be only one of both).

At the moment I cannot test, but you suggest just creating the site as usual, then checking and adjusting via breakpoints as far as necessary? No "mobile first-thoughts/measures" necessary?

not2easy

12:00 am on Sep 13, 2014 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



I have not taken a look at the theme you are using, haven't seen the css. I can say that if you are using a responsive design theme it should not need special device or text settings. My comments may have wrongly assumed that you are using a theme with responsive design which scales based on the desktop OR mobile browser's specifications in relation to the viewport settings in your theme. If you are offering different versions of the same content that is another method of making a site mobile friendly, but it is not ideal because accurately pre-determining screen size is an iffy science.

The Theme's creator may have the specific information you want if it is using some method that requires some mobile specific settings.

There is plenty of information about this on Googles' page speed articles. On Font sizes:
[developers.google.com...]
On viewport settings: [developers.google.com...]
On sorting out the various ways to present a mobile friendly site and why some are better than others: [developers.google.com...]

And to have your site analyzed for recommendations: [developers.google.com...]

deeper

3:58 pm on Sep 13, 2014 (gmt 0)

10+ Year Member Top Contributors Of The Month



Thanks for the links!

I know for sure that it is responsive using media queries ("responsive grid feature") and that they are reliable profs. Headway is more a framework than just a theme. But how it works in detail with CSS... there is forum support, but it is not always "present"...

I don't expect you to become acqainted with this theme and certainly I will have to try and test, but may be you take a look at the following page of their doc. It's no detailed technical description, but may shed some light indirectly:

[docs.headwaythemes.com...]

not2easy

7:47 pm on Sep 13, 2014 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



A quick look at the theme's support area tells me that this is Type 2 that dynamically serves different html and css based on the device. So you can totally disregard my earlier suggestions which are for type 1, where the same css and html are presented regardless of device and it is dynamically scaled by the browser's defaults.

Type 1 and type 2 are not some official designation, they refer only to the references I linked above, the "various ways to present a mobile friendly site" page lists the different ways and your theme uses the #2 description. Both ways work.

Your theme uses a grid of content blocks that change position based on the screen width of the device so that elements move based on their hierarchy in the theme. I have not looked into that option because when I view on an iPhone (for example) I don't use portrait mode and don't like to guess which way others might prefer to use their device. I don't really enjoy using a phone browser and only use one for testing but I can see the numbers so apparently a lot of people are fine with the tiny screen.

If you don't have a mobile device to test with, talk to a nephew or niece, maybe they'll check it out for you? The link above for analyzing speed and function can give you insight on what to work on even if no mobile device is available.

deeper

10:25 pm on Sep 13, 2014 (gmt 0)

10+ Year Member Top Contributors Of The Month



Oh!?

If Google correctly defines what "responsive" means (type 1) and you correctly consider my theme as type 2, then my theme creators claim having responsive ability though it's wrong?

not2easy

1:11 am on Sep 14, 2014 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



No, on that page, Google lists 3 ways you can present mobile friendly sites. They separate that list into different methods. All 3 methods produce a mobile friendly website. Don't let terminology get in the way of what you want to do. Your theme will give you one of Google's accepted methods of mobile friendly website. It is good to understand the differences, but they all do the same thing. Your Theme creator uses the term responsive grid and that sounds like an accurate description.

WordPress now has its own answer to offer a responsive site and it is built in to the free default theme. I haven't looked at it, but one day soon I want to take a look.

deeper

3:24 pm on Sep 14, 2014 (gmt 0)

10+ Year Member Top Contributors Of The Month



Sure, all three ways are mobilefriendly and certainly my theme is mobilefriendly.

But my last question was about the TYPE of mobile my theme has. Referring to Google and their 3 ways you said my theme is type 2, not type1 = responsive.

On dozens occasions on the website of my theme they say "we are mobilefriendly using RESPONSIVE"

Regarding the TYPE of being mobilefriendly there is a contradiction, right?
Theme creators: responsive (type 1)
You: Type 2, dynamic websites...

In order to draw right and possible consequences regarding my text pages on mobile devices it should be clear what type my theme offers, shouldn't it?

not2easy

4:12 pm on Sep 14, 2014 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Their terminology does not need to agree with terminology used in Google's article. These are not legal terms. The theme's support pages clearly describe how it works to achieve mobile friendly status. I don't think they are trying to mislead anyone.

If you talk to them about Type 2 anything, they probably wouldn't know what you meant. I tried to make that clear earlier, these are terms used in Google's article, nothing more. I used them here as a way to reference the article's information.