Web Page Design for the Mobile-first Index

Where to start first?

[keyplyr]

Since Google's Mobile-first Index [webmasterworld.com] went live (actually even before) I have started designing* pages primarily for mobile phones, then larger mobile devices like tablets & detachable screens, then the classic desktop. One set of pages responsive to all screen sizes, but with a primary focus on mobile.

It is very important to use content in its complete form for all screen sizes and not omit content for smaller screens. I have also been creating slightly shorter content than when I was only designing for Desktop.

My development process is:

• Center - I always start with research & writing content. This content will appear complete on all screen sizes.

• Top - Logo, Contact, Site Search & Navigation (intuitive navigation is especially important for small screens.)

• Right/Left - Sidebar content (optional) for the wider Desktop view. This is lessor value content including product links, affiliate links, ads and events.

• Bottom - Copyright Notice linked to full Copyright page, Site Map link & Privacy Policy link.

I have been experimenting on the location of Social Media sharing links, but have seriously considered not including SM on future pages.


* This approach is for hand-coded markups. If using page creation software like a CMS, some of this may not apply.

- - -

[tangor]

Content is where you start.

Maintaining your "brand" is essential.

All the rest is for other devices, and should "degrade" to wider formats as applicable.

Meanwhile, those who depend on advertising need to work that into content without running afoul of the DO NOTS.

Small screens means be concise, and never miss a chance!

[Marshall]

CONTENT IS KING! no matter what size screen you are designing for. Too many people forget that and place their emphasis on placating SE's. Another aspect I found is becoming more and more applicable is that people have the attention span of a gnat. So the old adage "First impressions are the deepest" still applies, maybe even more so.

[tangor]

Up vote from me! All too often this is the case and reminders to cross the t's and dot the i's is essential!

[martinibuster]

Content is Not Enough - Formatting Issues
Content has traditionally been composed in 3 to 4 sentence chunks. If you're still doing this then it's not mobile friendly.

Writing for mobile also means, imo, more images to break up the wall of ants effect. But the images have to be optimized.

[edited by: martinibuster at 4:02 pm (utc) on Jun 9, 2018]

[Marshall]

Content is not enough

I did not say it was enough, just that it was still king. The comments about "placing emphasis on placating SE's" and "attention span of a gnat" should have covered the rest.

[martinibuster]

attention span of a gnat"

Thanks.

Yes, content is important. But you know, very vague.

The mobile friendliness thing appears to be related to attention span. But it's really an issue with the medium, not the person. So rather than think in terms of the gnat attention span, I believe a lot of good ideas will present themselves if you focus on designing for the medium.

- Is short content useful? Sometimes. Not always. Depends on what the user's needs are. This is an illustration of the nuances of content, the right content for the particular moment.

-Should you use tables to present info? If it's a small table this can be useful. And this is a good way to break up the content without using images but still communicating in shorthand.

- Images are super useful IF they communicate the content, like a step by step or illustration of a point.

-Images of a woman wearing glasses and writing words in the air with her finger are pointless. Why? Because they waste valuable screen space.
Every pixel of space must be wisely used.

[keyplyr]

Writing for mobile also means, imo, more images to break up the wall of ants effect. But the images have to be optimized.

Agree. The content needs to be made more visually interesting by breaking up the text here and there.

There are several ways of doing this: Images & as you mentioned "tables" or graphs, if appropriate. A lot can be done with CSS designed DIVs. Also, for some sites using Videos or Audio players can work.

[tangor]

Sectional breaks and in line text decorations also help with very low overhead involved. Surprising what an appropriately styled <hr> can do!

[keyplyr]

Style attributes for <hr> are no longer supported by HTML5, but it is still useful, primarily now designated as a thematic break between paragraph-level elements.

[QuaterPan]

Style attributes for <hr> are no longer supported by HTML5,

In all events, whose serious web designer is still using inline style attributes? You style <hr> like any other elements in the CSS section.

[keyplyr]

...whose serious web designer is still using inline style attributes?

Some haven't built pages in a long time & still others may not have built pages specifically for the Mobile-first Index, which is what this discussion is about.

[Robert Charlton]

Writing for mobile also means, imo, more images to break up the wall of ants effect. But the images have to be optimized.

martinibuster... what do you mean by "optimized" in the above sentence?

Are you talking about...
- simple file size reduction?
- responsive images for multiple devices?
- images relevant to the text context
- ?

Usually your use of language is precise, almost to a fault. Here, I'm not sure what you're getting at.

[QuaterPan]

To complete what Robert said about responsive images

img {
 max-width: 100%;
 height: auto;
}

Also, multi resolution images is a good way to save on bandwidth using the <picture> tag, or the "srcset" attribute of the <img> tag.

Something else, unrelated to image, it might be a good idea to use the "overflow-x:hidden;", this is a backup, in case you missed something which is too large for the screen. With complex and dynamic site, it's not always easy to think about everything. (I also had Adsense trying to display 728x90 banners, on a mobile device, in spite of using their responsive code ! ). So with the "overflow-x:hidden;" you can handle situations you didn't think about (it happens).

In the same idea, think of using the CSS property "word-break". Like that if a word is too big to fit in the screen, it won't mess up your page layout (for example, if you let users post message, they may put words without space, or plenty of "!" in a row.

[martinibuster]

Nice contributions to this discussion, QuaterPan!
;)