1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Mobile issues

Discussion in 'HTML & Website Design' started by jasonwilks, Feb 8, 2016.

0
  1. #1
    Hello, I have a website that looks good on a desktop PC, but in mobile there are some issues that maybe someone can help me with.

    First of all I am still using static HTML with Include files to code all my sites, no CMS. I also have all my CSS code directly on all the pages, so you can just go to the site and view the source code to see everything.

    Here is the website:

    http://www.furiouspaul.com/

    I already done a lot of work to get it looking better for mobile devices, but the main issue is that it doesn't always fit into a mobile device correctly. I have noticed in order to get it to work, I have to flip the phone from horizontal to vertical, or vice versa and then that seems to correct the width of the page to fit on the device correctly.

    My question is how can I make it fit the width of a phone without having to flip it in vertical or horizontal to fix it?
     
    jasonwilks, Feb 8, 2016 IP
  2. denis bayly

    denis bayly Well-Known Member

    Messages:
    104
    Likes Received:
    28
    Best Answers:
    6
    Trophy Points:
    105
    #2
    Hi there jasonwilks,

    It appears that your site was created using twentieth century methodology, so
    I would suggest that you scrap it and rewrite it using modern semantic code.

    Here is a basic layout example...

    

<!DOCTYPE html>
<html  lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>untitled document</title>

<link rel="stylesheet" href="#" media="screen">

<style media="screen">
#container {
    width:96%;
    max-width:1100px;
    padding:10px;
    margin:auto;
    border:1px solid #999;
    box-sizing:border-box;
 }
#header {
    height:80px;
    padding:10px;
    margin-bottom:10px;
    border:1px solid #999;
 }
#navigation {
    float:left;
    width:260px;
    padding:10px;
    margin-bottom:10px;
    border:1px solid #999;
 }
#content {
    margin:0 0 10px 292px;
    padding:10px;
    border:1px solid #999;
 }
#footer {
    clear:both;
    height:130px;
    padding:10px;
    border:1px solid #999;
 }
@media screen and (max-width:800px) {
#navigation {
    float:none;
    width:auto
 }  
#content {
    margin:0 0 10px 0;
 }
</style>

</head>
<body>

<div id="container">
 <div id="header">header</div>
 <div id="navigation">links</div>
 <div id="content">content</div>
 <div id="footer">footer</div>
</div>

</body>
</html>
    Code (markup):


    coothead​
     
    denis bayly, Feb 8, 2016 IP
  3. Varss

    Varss Peon

    Messages:
    3
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #3
    I think you need to read about responsive web design. You can try Bootstrap.
     
    Varss, Feb 8, 2016 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    I have to agree it's built from decade and a half out of date methodologies. There are three things that are usually called the "Trifecta of Epic Fail" when it comes to web design:

    1) Fixed width. Declaring a width in pixels is inaccessible trash and misses the stepping stone of fluid to semi-fluid layout needed to make a site responsive -- what people incorrectly call mobile friendly. It also prevents the layout from being elastic -- aka adjusting the widths to the font size should the default be different.

    2) Fixed metric fonts -- declaring font sizes in pixels so they do not auto-enlarge to user preferences.

    3) Illegible colour contrasts. -- There's MATH for this, consult your WCAG or use an online tool like:
    http://webaim.org/resources/contrastchecker/

    (that site is filled with handy tools to check accessibility).

    ... and that's just a surface inspection. Digging into the code the accessibility woes continue with the utter and complete lack of logical document structure, meaningful heading orders (since you only have ONE heading), tables for layout, presentational images in the markup, tags like FONT and CENTER along side attributes like BORDER, COLOR, ALIGN, VALIGN, and so forth that HAVE ZERO BUSINESS BEING USED IN CREATING ANY WEBSITE AFTER 1997!

    The first order of business would be to TRY and drag the HTML out of the era of Congressional inquiries into stained dresses, a First Lady throwing business partners under the bus when accused of real estate fraud, "ethnic cleansing" in Eastern Europe, and 3dfx being the bleeding edge of video card manufacturers.

    The girl got sticky with it. That's it now honey, honey, just lie. Like me, I'm the guy, got it in your eye. You gotta, you gotta, dress with a lotta -- stuff on it, put it in a wash on spin.

    Simply put, you've got 36k of HTML with static CSS in the markup (using endless redundant style attributes in complete ignorance of how those work) to deliver 8.6k of plaintext and maybe two dozen content images -- that's 16k or less' markup job... and by having ALL your presentation in the markup in both the pointless STYLE tag (that has no real business on ANY modern website) and the equally pointless use of the STYLE attribute (which should only be resorted to for a handful of corner cases) you've completely missed a good number of caching opportunities.

    A good start, read my article here:
    http://www.cutcodedown.com/article/whats_wrong_with_YOUR_website_index

    Pretty much EVERYTHING there applies to what you've done. It's such a mess I actually wonder if you dragged out some ridiculously out of date WYSIWYG like frontpage or nyetscape composer since that's the last time I saw code remotely resembling this that wasn't a e-mail. (since most e-mail clients have their heads wedged so far up the 1990's rump it's tonguing slick willy's tea bag) -- the lack of a Doctype and Windows-1252 encoding being a dead giveaway that some twenty year out of date tool was used in building the site.

    Basically, I'm not entirely sure how you expect that outdated mess to be useful on a modern desktop or notebook, much less smaller screen handhelds or touch devices. Whoever told you that's how to build a website packed you so full of sand you could change your name to Sahara. WCW called, Bischoff want's his website design back.

    Sorry if that all seems a bit harsh, but really you've been led pretty far down the garden path here.
     
    deathshadow, Feb 8, 2016 IP
  5. Patricia Ann Lee

    Patricia Ann Lee Active Member

    Messages:
    1,190
    Likes Received:
    73
    Best Answers:
    1
    Trophy Points:
    95
    #5
    Hmm.. I hope this one could help you.
    This is mainly on the loading page issue, but there are some recommendations that might also help you improve your overall mobile site.
    https://developers.google.com/speed/pagespeed/insights/
     
    Patricia Ann Lee, Feb 8, 2016 IP
  6. jasonwilks

    jasonwilks Well-Known Member

    Messages:
    65
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    111
    #6
    thanks for the responses. It looks like I have a lot to learn here. I have been using FrontPage 2003 to code my site as that's what I have been using over the years. As far a functionally goes I think it works great on desktops, just not as good on mobile. Anyway, I have tried to convert my site to the newer format, but I am really lost, it really is different the way things are now. Can someone recommend a good HTML editor besides FrontPage 2003 that will allow me to still build static html5 pages and put them in Include code? I assume "Include" files are still used today right? Or am I going to have to scrap that too? I am trying to avoid CMS and stick with the Include method for static HTML.

    Could someone perhaps help get me started and convert one of my pages into the newer format? such as this page here: http://www.furiouspaul.com/test.html

    I am really trying to get it to look exactly like how I have it right now. The new HTML5 Semantic Elements are really weird to me, I am not used to that method at all. I have been using tables to nest pretty much everything.

    Thanks for any help!
     
    Last edited: Feb 13, 2016
    jasonwilks, Feb 13, 2016 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #7
    Developer side include/templates have given way to PHP... which for simple stuff is almost as easy to use.

    Generally speaking if you need anything more complex than a flat text editor -- like a notepad replacement, you are doing it ALL WRONG. If all you know is "WYSIWYG" style design, you need to unlearn bad habits that NEVER should have been allowed to exist in the first place. Frontpage, Nyetscape composer, the preview/design panel in Dreamweaver -- all halfwit scam artist BS that only deluded people into thinking they can make a website.

    The "tools of the trade" page on my site runs down a few suggestions for editors:
    http://www.cutcodedown.com/article/tools_of_the_trade

    I prefer "Flo's notepad 2" just because it doesn't get underfoot with features that just get in the way, and the few it does have can be easily disabled... but there are dozens if not hundreds of fine and dandy choices and finding one to suit your own tastes is a matter of trying them all.

    You test what it looks like in actual browsers. As I outline in my progressive enhancement article:
    http://www.cutcodedown.com/article/progressive_enhancement

    You start out with your content or a facsimile of your content in the flat text editor as if HTML doesn't even exist, you then use the HTML tags with semantic meanings to say what things ARE, and not what they look like. If you choose your HTML tags based on appearance, you're choosing all the wrong tags for all the wrong reasons. Remember that a h1 is the heading under which everything on the page is a part of, hence the site title/logo is USUALLY the best candidate for that. Your h2 indicate the start of subsections of that SINGLE h1, (there is rarely a legitimate reason to have more than one h1 on a page apart from ignorance), H3 are the start of subsections of the H2 preceeding them and so forth down the line... HR (horizontal rule) indicating a change in topic... H1..H6 do not MEAN text of different sizes, nor does HR MEAN "draw a line across the screen", even if that's the default appearance. Appearance is not HTML's job, that's either the browser or the CSS' job. P is for grammatical paragraphs not stuff that "just happens to be text", LI are for short bullet point items (good rule of thumb if it warrants a numbered heading tag, it's not a list item), etc, etc... Even <b> and <i> have semantic meanings of when text would be that way in professional writing (book titles, proper names) and not just because you want the text bold or italic, just as <em> and <strong> mean text is recieving "emphasis" or "more emphasis" respectively. Good rule of thumb, if it's a title or name, you're not emphasizing it... (though you may be citing it, in which case use <cite>)

    DIV and SPAN do not imply any meaning, as such when creating your semantic markup they have ZERO PLACE being added to the HTML. Those get added while you are creating your style -- best practice is to do so in a external stylesheet since again, appearance has ZERO business in your HTML with all but the rarest of exceptions. Pretty much if you use the <style> tag, you've screwed up. If you've used the style="" attribute, you're probably doing something wrong. (there are one or two corner case exceptions for style="" that should NOT arise on the majority of sites).

    It's a VERY different way of looking at building a website, but it's essential if you actually care about EVERYONE who may visit your site. You start with the CONTENT, what people are coming to a website for, and then progressively enhance it with the fancy bits -- semantic markup, base layout, responsive layout, extra behavioral enhancements with JavaScript, doing so in a manner so that should ANY of those enhancements along the way be blocked, invalid or simply irrelevant, the CONTENT is still delivered to the user in a useful manner.

    When you say:
    You quite clearly haven't seen it on enough desktops, or we have wildly different definitions of "great" -- much less BEFORE you even THINK about your "desktop appearance" you should be thinking about non-visual UA's like search engines, screen readers, braille readers, and devices we may not even have conceived of yet! That's what HTML was invented for so that regardless of the device, the user-agent (a browser is a type of user-agent) can best determine how to convey it.

    Really from a functionality standpoint, it's a disaster even on modern desktops... at least if you've even grasped the simplest aspects of accessibility norms, differing display sizes and metrics, etc, etc, etc...
     
    deathshadow, Feb 13, 2016 IP
  8. jasonwilks

    jasonwilks Well-Known Member

    Messages:
    65
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    111
    #8
    Alright, I have been reading up on the new semantic elements and started trying to recode my site with the new methods, but I am having trouble with a lot of things. First off I am trying to get my site to look exactly like it is now but with the new code.

    My site structure is like this:

    OOOOOOOOOOOOOOOOOOOOOOO
    OHeader .......................................O
    OOOOOOOOOOOOOOOOOOOOOOO
    ONavO..........................................O
    O......O................ARTICLE..............O
    O......O..........................................O
    O......O..........................................O
    O......O..........................................O
    OOOOOOOOOOOOOOOOOOOOOOO
    O.......................FOOTER................O
    OOOOOOOOOOOOOOOOOOOOOOO

    My current problem is that I do not know how to create a side navigation where the ARTICLE does not wrap underneath of the Nav section. I can do a { left-margin: 165px } for the Article section, which works initially. But I code my site so that the NAV section hides once the screen width gets smaller. The problem here is that the ARTICLE section still has the left margin of 165px, so there is a big blank space on the left then. I want the ARTICLE section to go all the way to the left when the NAV section hides from the screen (after shrinking the screen width).

    I have been able to do this with tables very easily by simply hiding table columns once a certain screen width is met, but with this new method I am clueless. this is what i have so far: http://www.furiouspaul.com/test1.html
     
    jasonwilks, Feb 15, 2016 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    First off, I actually advise that you IGNORE those HTML 5 tags until you have a firm grasp of HTML 4 semantics... ARTICLE, SECTION, FOOTER, NAV -- all redundant to numbered headings and horizontal rules if you use them properly. They're more headache than they are worth and generally just make it more confusing.

    I tell you what, I do this from time to time. I'll take your test1 page and rewrite it "modern style" as a proper responsive layout, using proper semantics, separation of presentation from content, yada-yada... then I'll write up section by section breakdowns of the how/what/why. The process I'll be following I outline on my page here:
    http://www.cutcodedown.com/article/progressive_enhancement.

    Besides, us retrogaming geeks gotta stick together.

    For now, let's just say that given what you have on the page, my HTML is probably going to be pretty close to this:
    <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">

<meta
	name="viewport"
	content="width=device-width,height=device-height,initial-scale=1"
>

<!-- HTML 5 validator will balk at "projection" and "tv" -- F*** THEM! -->
<link rel="stylesheet" href="screen.css" media="screen,projection,tv">

<title>Furious Paul - Hardocore Gamer & Speed Runner</title>

</head><body>

<div id="top">
	
	<h1>
		<a href="/">
			Furious Paul
			<span>-</span>
			<small>Hardcore Gamer & Speed Runner</small>
		</a>
	</h1>
	
	<ul id="socialLinks">
		<li class="youtube">
			<a href="http://www.youtube.com/user/FuriousPaul2">
				Youtube<i></i>
			</a>
		</li>
		<li class="facebook">
			<a href="https://www.facebook.com/furiouspaul1">
				Facebook<i></i>
			</a>
		</li>
		<li class="twitter">
			<a href="https://twitter.com/FuriousPaul_">
				Twitter<i></i>
			</a>
		</li>
		<li class="twitch">
			<a href="http://www.twitch.tv/FuriousPaul">
				Twitch<i></i>
			</a>
		</li>
	</ul>
	
	<ul id="mainMenu">
		<li><a href="/overwatch/">Overwatch</a></li>
		<li><a href="/about.html">About</a></li>
		<li><a href="/projects.html">My Projects</a></li>
		<li><a href="/terms.html">Terms</a></li>
		<li><a href="/contact.html">Contact</a></li>
		<li>
			<a
				href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=9WHKZYRJBHDKQ"
			>Donate</a>
		</li>
	</ul>
	
	<div id="contentWrapper"><div id="content">
	
		<hr><!-- remove if you add a proper H2 here -->
		
		<p>
			Mei is a Climatologist that specializes in using a variety of freeze attacks to slow, halt, and damage her enemies with. Her Endothermic Blaster is a very unique short range weapon in which it has the capability to freeze/stun her enemies with, giving her allies easy targets to shoot at. Alternatively she can shoot long range icicles (but doesn't induce slow effects). Although Mei's mobility isn't the greatest and is one of her main weaknesses, her Cryo-Freeze ability allows her to escape out of combat and heal up in a stationary ice shield. Her Ice Wall ability has a lot of uses on the battlefield, such as blocking shots from her enemies and trapping enemies in to prevent them from escaping, and many more as explained below in my guide. Her coolest ability of all is her ultimate Blizzard in which she deploys a huge area of effect that does damage over time along with slowing the movement of her enemies. If enemies stay in her Blizzard for too long they will freeze solid. I see Mei as more of a support hero that relies on her teammates to deal damage while she controls the game field via creating obstacles and freezing her enemies.i's weapon has some of the most unique properties of any basic weapon in Overwatch and at this time it's not fully understood exactly in the hardcore community. The range of her primary fire is only about 15 feet or so, it's not very
		</p><p>
			Mei is a Climatologist that specializes in using a variety of freeze attacks to slow, halt, and damage her enemies with. Her Endothermic Blaster is a very unique short range weapon in which it has the capability to freeze/stun her enemies with, giving her allies easy targets to shoot at. Alternatively she can shoot long range icicles (but doesn't induce slow effects). Although Mei's mobility isn't the greatest and is one of her main weaknesses, her Cryo-Freeze ability allows her to escape out of combat and heal up in a stationary ice shield. Her Ice Wall ability has a lot of uses on the battlefield, such as blocking shots from her enemies and trapping enemies in to prevent them from escaping, and many more as explained below in my guide. Her coolest ability of all is her ultimate Blizzard in which she deploys a huge area of effect that does damage over time along with slowing the movement of her enemies. If enemies stay in her Blizzard for too long they will freeze solid. I see Mei as more of a support hero that relies on her teammates to deal damage while she controls the game field via creating obstacles and freezing her enemies.
		</p><p>
			Mei is a Climatologist that specializes in using a variety of freeze attacks to slow, halt, and damage her enemies with. Her Endothermic Blaster is a very unique short range weapon in which it has the capability to freeze/stun her enemies with, giving her allies easy targets to shoot at. Alternatively she can shoot long range icicles (but doesn't induce slow effects). Although Mei's mobility isn't the greatest and is one of her main weaknesses, her Cryo-Freeze ability allows her to escape out of combat and heal up in a stationary ice shield. Her Ice Wall ability has a lot of uses on the battlefield, such as blocking shots from her enemies and trapping enemies in to prevent them from escaping, and many more as explained below in my guide. Her coolest ability of all is her ultimate Blizzard in which she deploys a huge area of effect that does damage over time along with slowing the movement of her enemies. If enemies stay in her Blizzard for too long they will freeze solid. I see Mei as more of a support hero that relies on her teammates to deal damage while she controls the game field via creating obstacles and freezing her enemies.
		</p>
	<!-- #content, #contentWrapper --></div></div>
	
	<div id="extras">
		
		<h2>Blizzard</h2>
		<ul>
			<li><a href="/overwatch/">Overwatch</a></li>
			<li><a href="/pc/wow/">World of Warcraft</a></li>
			<li><a href="/pc/starcraft2/">Starcraft 2</a></li>
		</ul>
		
		<h2>Castlevanias</h2>
		<ul>
			<li><a href="/snes/castlevania4/">Castlevania 4</a></li>
			<li><a href="/nes/castlevania2/">Castlevania 2</a></li>
		</ul>
		
		<h2>Other</h2>
		<ul>
			<li><a href="/nes/megaman3/">Mega Man 3</a></li>
			<li><a href="/pc/wolf3d/">Wolfenstein 3d</a></li>
		</ul>
		
		<h2>Articles</h2>
		<ul>
			<li><a href="/articles/" class="featured">My General Articles</a></li>
		</ul>
		
	<!-- #extras --></div>
	
	<hr>
	
	<div id="footer">
		&copy; FuriousPaul,  All rights reserved.
	<!-- #footer --></div>
	
<!-- #top --></div>

</body></html>
    Code (markup):
    EVERYTHING else going on belongs in an external stylesheet. All those FONT and CENTER tags? ZERO business in ANY HTML written after 1997! (and really had ZERO business existing in the HTML specification at ANY time). Pretty much if you are saying what things look like instead of what things ARE, you're doing it all wrong!

    Gimme a few and I'll slap together the CSS to make that fly... though I've got to start thinking on dinner prep since a lady friend I've not seen in two years is popping by.
     
    deathshadow, Feb 15, 2016 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #10
    Ok, gonna be busy the rest of the evening, but tomorrow I'll belt out an explanation of this, for now, here's that rewrite:
    http://www.cutcodedown.com/for_others/furiousPaul/template.html

    as with all my examples the directory:
    http://www.cutcodedown.com/for_others/furiousPaul/

    ... is wide open for easy access to the gooey bits and pieces. It takes a good number of stylistic liberties, but reduces the image count of the theme so you can put that towards content. Dynamic fonts, semi-fluid layout, and responsive swapping out layout styles based on available width, and I tossed a retina/HDX trigger in there for good measure. (kindle fire HDX can be a real bitch if you don't plan for it)

    I also swapped out the middle paragraph for a video embed so you can indeed see the video is reponsive, as is the rest of the layout stripping off columns and floats and so forth as needed. Many of the changes in design were directly influenced by the needs of the user, or just common sense bits like "why is your menu at the bottom?"

    I'll get to a writeup of the how/what/why tomorrow so you can understand what I've done and why.
     
    deathshadow, Feb 15, 2016 IP
  11. jasonwilks

    jasonwilks Well-Known Member

    Messages:
    65
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    111
    #11
    Wow thanks a lot! This will help me get started with everything better. I appreciate helping me with this, it means a lot to me!

    There's a few things that I would like to be different though. I want those horizontal links at the top to be on the footer at the bottom of the page. Im trying to make things simpler with less clutter and I felt like some of those links belong only in the footer. I actually remade the template right here that also includes some elements from different pages, such as the "News/Updates" homepage, and the "Other Articles" navigation. You can see it here:

    http://www.furiouspaul.com/new-template.htm

    If I can get the rest of that stuff in the template it would basically be complete then.

    I also have two more questions. Is it possible to indent the FuriousPaul logo at the top so it starts above the "Content" section, instead of all the way to the left (like how I have it now throughout my site)?

    And lastly, instead of dropping the side navigation to the bottom of the page when the screen width shrinks, can you just make it disappear instead?
     
    jasonwilks, Feb 15, 2016 IP
  12. jasonwilks

    jasonwilks Well-Known Member

    Messages:
    65
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    111
    #12
    Ok I have managed to get some other template related stuff into my new template myself:

    http://www.furiouspaul.com/new-template.htm

    My current issues are:

    I need the code to make it so when the left navigation moves to the bottom after shrinking the screen width to make it dissapear instead, but then have it show up as that vertical links menu Deathshadow made me.

    Also some things are not lining up correctly when I shrink the width of the screen. Mostly the "Type of Page Here" part.

    I can probably handle everything else for now.

    I am continuing to add more stuff to my template over time and you can check it out anytime as i improve it. If anyone wants to give me tips, suggestions, or better code, let me know. Sorry im slow at this!
     
    Last edited: Feb 16, 2016
    jasonwilks, Feb 16, 2016 IP
  13. jasonwilks

    jasonwilks Well-Known Member

    Messages:
    65
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    111
    #13
    Mission accomplished! After 155 hours of work I have transferred all my pages throughout my whole site into the new format, there was about 75 pages I had to go through.

    http://www.furiouspaul.com/

    I learned a lot in the process. I used NotePad++ to do all the editing. I got rid of all the old HTML tags and replaced them with CSS. I turned a lot of tables into DIVs. Divs is something I am new to as I have been using tables forever. Divs are cool how they can slide around on top of other divs, gives more opportunities for responsiveness that I was not aware of.

    Anyways, thanks Deathshadow for getting me started and thanks to the rest of you for steering me in the right direrction. If you see anything else wrong with the site or anyway I can improve anything, let me know!
     
    Last edited: Feb 27, 2016
    jasonwilks, Feb 27, 2016 IP