Scheduled Maintenance: We are aware of an issue with Google, AOL, and Yahoo services as email providers which are blocking new registrations. We are trying to fix the issue and we have several internal and external support tickets in process to resolve the issue. Please see: viewtopic.php?t=158230

 

 

 

HTML-noob + mobile friendly = nightmare [Solved]

Off-Topic discussions about science, technology, and non Debian specific topics.
Post Reply
Message
Author
User avatar
Hallvor
Global Moderator
Global Moderator
Posts: 2029
Joined: 2009-04-16 18:35
Location: Kristiansand, Norway
Has thanked: 139 times
Been thanked: 206 times

HTML-noob + mobile friendly = nightmare [Solved]

#1 Post by Hallvor »

Well, I have had a website for a long time, bug I still have no idea how to code.

It hasn't bothered me too much until recently, when Google decided to push the page downwards in search results, because it wasn't "mobile friendly"...

I have for the most part used NVU and Kompozer to edit the web pages the last years, but Kompozer is now impossible(?) to install, so I am trying SeaMonkey instead.

The page still looks OK in a web browser, and Google now says my site is mobile friendly...

https://cdn.pbrd.co/images/H5XEWX1.png

Not so good on a mobile device...

https://cdn.pbrd.co/images/H5XGccF.png

I am sure my horrible code is to blame, but where is the problem? :lol:

https://cdn.pbrd.co/images/H5XFauF.png

Edit: Added entire code at pastebin: https://pastebin.com/fGABCZPM
Last edited by Hallvor on 2018-02-03 22:00, edited 2 times in total.
[HowTo] Install and configure Debian bookworm
Debian 12 | KDE Plasma | ThinkPad T440s | 4 × Intel® Core™ i7-4600U CPU @ 2.10GHz | 12 GiB RAM | Mesa Intel® HD Graphics 4400 | 1 TB SSD

User avatar
bw123
Posts: 4015
Joined: 2011-05-09 06:02
Has thanked: 1 time
Been thanked: 28 times

Re: HTML-noob + mobile friendly = nightmare

#2 Post by bw123 »

Hallvor wrote: I am sure my horrible code is to blame, but where is the problem? :lol:
How could anyone answer that by looking at images?

https://duckduckgo.com/html/?q=google+r ... e+friendly
resigned by AI ChatGPT

User avatar
Hallvor
Global Moderator
Global Moderator
Posts: 2029
Joined: 2009-04-16 18:35
Location: Kristiansand, Norway
Has thanked: 139 times
Been thanked: 206 times

Re: HTML-noob + mobile friendly = nightmare

#3 Post by Hallvor »

Did you see the last image with code?

I don't need to search mobile friendly. The page is now mobile friendly, according to google. It just looks horrible on mobile phones.
[HowTo] Install and configure Debian bookworm
Debian 12 | KDE Plasma | ThinkPad T440s | 4 × Intel® Core™ i7-4600U CPU @ 2.10GHz | 12 GiB RAM | Mesa Intel® HD Graphics 4400 | 1 TB SSD

User avatar
pawRoot
Posts: 603
Joined: 2016-12-28 18:26
Has thanked: 1 time
Been thanked: 1 time

Re: HTML-noob + mobile friendly = nightmare

#4 Post by pawRoot »

You must learn proper HTML and CSS

https://www.w3schools.com/css/css_rwd_intro.asp

using editors is not the way to go anymore

User avatar
Hallvor
Global Moderator
Global Moderator
Posts: 2029
Joined: 2009-04-16 18:35
Location: Kristiansand, Norway
Has thanked: 139 times
Been thanked: 206 times

Re: HTML-noob + mobile friendly = nightmare

#5 Post by Hallvor »

pawRoot wrote:You must learn proper HTML and CSS

https://www.w3schools.com/css/css_rwd_intro.asp

using editors is not the way to go anymore
I should...

Anyway, I found the problem. It was related to margins. After adjusting them, it works just fine.
[HowTo] Install and configure Debian bookworm
Debian 12 | KDE Plasma | ThinkPad T440s | 4 × Intel® Core™ i7-4600U CPU @ 2.10GHz | 12 GiB RAM | Mesa Intel® HD Graphics 4400 | 1 TB SSD

User avatar
debiman
Posts: 3063
Joined: 2013-03-12 07:18

Re: HTML-noob + mobile friendly = nightmare [Solved]

#6 Post by debiman »

if i may add a few suggestions, although you marked it solved...

imo, the root of the problem lies here:
Hallvor wrote:I have for the most part used NVU and Kompozer to edit the web pages the last years, but Kompozer is now impossible(?) to install, so I am trying SeaMonkey instead.
this is not how webdesign works anymore.

the thread title speaks to me, and i'll tell you what i did when i was in your situation:
  • whatever coding i need to do, i do it by hand.
  • you really need to start using separate stylesheets + classes in your html, instead of styling every element directly.
  • instead of re-inventing the wheel, i take something done by better webdesigners and start hacking it. the most common way is to use some sort of basic layout CSS, and pile your own CSS onto that, but i usually rip it apart instead because i cannot bear the thought of wasting resources by double- and triple-defining design elements
btw, the geeks call it responsive design, with good reason - it's not only about "mobile", but about an ever-increasing range of devices in different sizes & resolutions.
one very important trick (at least for me) was to use em instead of px.

use an editor with syntax highlighting, look at w3schools.com, when you see a site that looks well done, view its source or go to developer tools (F12) to maybe understand how it ticks.
and my personal advice: javascript sucks, kill it with fire.

in the end - my opinion - the goal is to have developed some framework that does the right thing, and just write the content.
i'm currently using pico cms

PS: http://www.csszengarden.com/

Post Reply