HTML-noob + mobile friendly = nightmare [Solved]

If it doesn't relate to Debian, but you still want to share it, please do it here

HTML-noob + mobile friendly = nightmare [Solved]

Postby Hallvor » 2018-02-03 17:26

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.
HP Elitebook 2570p, Intel Core i5 3320-M CPU @ 2.60 GHz, 6 GB RAM, Intel HD 4000 graphics, 240 GB SSD, Debian Stretch (KDE)
User avatar
Hallvor
 
Posts: 843
Joined: 2009-04-16 18:35
Location: Norway

Re: HTML-noob + mobile friendly = nightmare

Postby bw123 » 2018-02-03 17:37

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
User avatar
bw123
 
Posts: 3377
Joined: 2011-05-09 06:02
Location: TN_USA

Re: HTML-noob + mobile friendly = nightmare

Postby Hallvor » 2018-02-03 17:40

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.
HP Elitebook 2570p, Intel Core i5 3320-M CPU @ 2.60 GHz, 6 GB RAM, Intel HD 4000 graphics, 240 GB SSD, Debian Stretch (KDE)
User avatar
Hallvor
 
Posts: 843
Joined: 2009-04-16 18:35
Location: Norway

Re: HTML-noob + mobile friendly = nightmare

Postby pawRoot » 2018-02-03 18:00

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
pawRoot
 
Posts: 534
Joined: 2016-12-28 18:26
Location: Poland

Re: HTML-noob + mobile friendly = nightmare

Postby Hallvor » 2018-02-03 22:00

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.
HP Elitebook 2570p, Intel Core i5 3320-M CPU @ 2.60 GHz, 6 GB RAM, Intel HD 4000 graphics, 240 GB SSD, Debian Stretch (KDE)
User avatar
Hallvor
 
Posts: 843
Joined: 2009-04-16 18:35
Location: Norway

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

Postby debiman » 2018-02-04 20:37

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/
User avatar
debiman
 
Posts: 2900
Joined: 2013-03-12 07:18


Return to Offtopic

Who is online

Users browsing this forum: No registered users and 5 guests

fashionable