HTML for mobile?

@codyhillAug 01.2019

Is there a way I could write HTML only for mobile?
I have a nav bar that I want to set as position absolute and to be relative to a container on desktop but on mobile I want it to be outside of that container and to be 100% of the view.
I also have a section where on mobile everything in that section is under buttons and organized and on the desktop I want to be a ul with flex and the content under the ul.

Is it good practice to display: none the desktop HTML on mobile and display: block on the desktop and reverse?

to post a comment

HTML

15 Comments(s) _↴

@tracknutAug 01.2019 — #Presuming you can define "mobile" in technical terms that can be written by CSS selectors, then yes all of those are possible. But that definition is usually more difficult than one would expect. In your example, your changes to the navbar can (should, IMO) be just made based on browser size and not whether a device is "mobile".

If you're going to write two completely different sites though, you should probably just have a page that determines "mobile" or not, then redirects to a separate page for each. That's not the current trend though. Better to have one page using standard media queries to make adjustments based on browser size, and then specific media queries (used sparingly) to modify things for specific devices that need it.

@codyhillauthorAug 02.2019 — #@tracknut#1607064 So there are other ways of making the "mobile" responsiveness?

I only need 2 questions to have different HTML and CSS and possibly the nav bar.

I guess now the question is, would make a big difference in load time?

@tracknutAug 02.2019 — #@RaulRogojan#1607074 Yes, two main ways:

1: Imagine your mobile and desktop versions are completely different, and the mobile one is very small in comparison. Having your index file determine whether the user is mobile (often by testing the http user agent string), and then calling a mobile-specific or a desktop-specific index file, is one way, and would allow the load time for the mobile file to be a lot faster. This way used to be the method used, and you would often when browsing a site see that you were in a folder called /mobile or /m. You don't need the mobile media queries in this version, as you are writing each version of the page for the specific type.

2. Alternatively, you just have a few differences, as you have said, and you keep one version of the files but have media queries doing all the determination of "mobile" or not. In that version, all html and css are loaded to the browser, and the browser makes the determination as to what parts of the page are presented. Download times are identical for mobile and not mobile. This is a more common implementation now. [This site](http://www.frenchbanknotes.com/) uses this method, if you want to take a look at how it works as you grow and shrink your browser window.

@codyhillauthorAug 02.2019 — #@tracknut#1607092 Got it!

I am writing my CSS for mobile-first and then for desktop with CSS media queries. I should mention that my site is only 1 page

The problem is that for only 1 specific section I need another functionality on the desktop version.

On mobile, I have multiple buttons that open a hidden section. All the buttons and the hidden sections are under the same div, each button with its own section.

On the desktop, I want an ul that is outside the hidden section. I was thinking that I can create the ul outside of the divs and hide it on mobile and display it on the desktop and hide the buttons on the desktop and display them on the mobile. And transfer the functionality of the buttons to the li.

The HTML involved in this is pretty large and I also have to add more js for the li and because I would do this I think that the web site would be slower.

If you don't understand what I am trying to say because my English is broken I will give you the files and the design.

@tracknutAug 02.2019 — #@RaulRogojan#1607093 Have you measured the speed with and without your extra ul and js, and can you see a measured difference? On that page I linked for example, the entire hamburger menu exists on the page in the desktop mode, but isn't visible. It is over a hundred lines of html, and I'm not concerned after seeing the specs from the google tools (of course someone will now tell me that it's slow :) ). I would remind you that one http network query can load thousands of bytes of html, it can load one image file (even if that image is a 10x10 pixel icon), one css file, or one JS file. I haven't seen the site, but I wonder if perhaps you're prioritizing optimizations in the wrong place.

@codyhillauthorAug 02.2019 — #@tracknut#1607094 That's a good question. I am coding for only coding from April and everyone told me to focus on the load time for now so I am trying to do my best :)).

Here is the web site. It is not finished yet. I let working on the desktop version and I let that part at the end.

@tracknutAug 02.2019 — #Focusing on load time, and performance in general, is a good thing to keep an eye on. It's just that the place to start looking is to measure the performance of your site, so you know what the slow parts are, rather than just taking a shotgun approach of "fix everything", which seems to be the common recommendation I see when folks ask about making web sites faster. I hope that translated ok for you. :)

I don't see the link for the site, could you post it again please.

@codyhillauthorAug 02.2019 — #@tracknut#1607100 Yeah, here it is: https://wonderful-jones-0b8d39.netlify.com/

@tracknutAug 02.2019 — #For starting in web development in April, I'm impressed. Nicely laid out code, and it looks like you're spending time on learning.

I ran the site through https://developers.google.com/speed/pagespeed/insights/ which is hopefully becoming your friend as you should use it, and the validator (https://validator.w3.org/nu/) regularly. Google says you're better (faster) than 100% of the pages on the internet! Before getting too excited, be aware that just being about the smallest page on the internet might be the reason :) In any event, it's still useful to look at their data. If you look at the request counts (how many http requests were made, and how big were they), you make 51 requests to load this page. 199kb and 42 requests are for external fonts, 210kb for the two images, and 3kb for your actual page content. So it would qualify to be called a "low content page", yes? Lots of fluff on fancy fonts and images, with very little actual content. I understand it's being built, so I'm not criticizing, just showing you how you can see what the page looks like to Google. So a focus on reducing html, while interesting from an academic perspective, has very little bearing on this page. The images and fonts are the vast majority of the page, and while it's a tiny page (in terms of bytes), if you really wanted to focus on speed, then reducing the number of requests, mainly due to those fonts, should be your focus. Obviously as you change and add to the page, you would re-run the tool and see a new changed profile.

I hope that helps. Again, I'm not trying to bash you, just trying to show you how you can start to actually look at your load times, and not have to just guess whether your site is fast or slow, or needs any attention at all.

@codyhillauthorAug 03.2019 — #@tracknut#1607103 I understand don't worry! Those are some stuff that I did not know before. I could fix the fonts as they are imported with every font-weight even tho I'm not using it. But with the imgs the problem is that this is a portfolio so I will need to upload quite a few more imgs. Around 50+ and the content that's pretty much all the content I need, plus the ul and the js that I did not add it yet. That would make the kb difference from imgs and content huge! Would that be a problem?

@tracknutAug 03.2019 — #Yes, 50 images on one page is pretty big. You could make them thumbnails to click on for the larger version, or you could use a "lazy load" technique to defer loading of them until/if necessary. Personally I'm not a big fan of these single-page sites that have everything all on one page, you will have a performance penalty if it continues to be that layout. I realize it's sort of a current trend though.

@codyhillauthorAug 03.2019 — #@tracknut#1607126 This is how it would work. : https://wonderful-jones-0b8d39.netlify.com/

Each category would have at leat 3 img that are thumbnails and for each img would be a modal with 3 or 4 other img.

Now I have some bugs both from mobile and desk that I don't know how to fix, I will have to make another post. But mainly this is the look and functionality.

I could add a lazy load for each category and for each modal, but I don't know how to make that either.

@codyhillauthorAug 03.2019 — #@RaulRogojan#1607135 I also should say that on the main page has 2 imgs, the ones that you can see. The background img with the line and in the circle and the black rectangle would be the other 2 imgs.

@hanifanzeAug 05.2019 — #I would remind you that one http network query can load thousands of bytes of html, it can load one image file (even if that image is a 10x10 pixel icon), one css file, or one JS file.

[url=https://downloadnox.onl/][color=#000000]Nox[/color][/url] [url=https://vidmate.vet/][color=#000000]Vidmate[/color][/url] [url=https://vlc.onl/][color=#000000]VLC[/color][/url]

@andrewwatsanMar 30.2022 — #Let me remind you that an http network query can load thousands of bytes of html, be it an image file (even if that image is a 10x10 pixel icon), a css file, or a js file.

https://vnvideoeditorpc.com/

Also in #HTML _↴

Free and best guide for beginners?This spacer is driving me nuts Removing data in an Iframe

Success!

Help @codyhill spread the word by sharing this article on Twitter...

Tweet This

HTML for mobile?

15 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

HTML for mobile?

15 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

15 Comments(s) _↴

Also in #HTML _↴