You always want your site to really shine with those JS animations and includes, great graphics, and extras that showcase your skills. Of course, in a nice desktop environment it looks great. But never lose what it feels like, or looks like on your mobile viewer's end.
Not only is most user mobile data tracked and limited, but mobile phones themselves have far less memory allocations than desktops. Of course. So, you have some pretty neat graphical layouts, but you want the mobile experience to load fast, make sense, and scroll fast, as mobile users usually just want the facts.
Now, you may have purchased or got hold of a "responsive" theme. It should adapt to phone use efficiently you may think. Not so, even some of the best template / starter houses judge their responsiveness on just shrinking down the browser on their desktop to see adaptability. Sometimes they do not consider the whole mobile environment in terms of processing power, memory, and what java scripts will load, and how. I see it all the time. New site uploaded, looks wonky on a phone, supporting scripts don't load, layout goes inline, and makes even less sense.
So, there's an easy fix. It's time for keeping the bells, and losing the whistles. Enter media query dropouts. If you're not a coding veteran, don't worry, it's all quite easy. Just watch where you place your start and end div tags. Make sure they completely encapsulate what you want removed on the phone environment.
Now, two code snippets needed: The CSS with the @media query, and the HTML to surround the item to make dropout.
@media (max-width: 767px) { #mobilehide { display: none; } }
Should be placed in the responsive, bootstrap, or CSS style sheet. This reads as: @media= test the viewing device media, if it has a maximum width of only 767 pixels, then anything id'd as "#mobilehide" should not display at all.
<div id="mobilehide">BigBulkyGraphicAndAnimationsOfDancingMice</div>
This is the code that surrounds your item you want dropped out on in mobile viewing. On any screen, mobile or not, that is less than 767 pixels wide, BigBulkyGraphicAndAnimationsOfDancingMice won't show up at all, as your script just brings up the following code right behind it.
Also to remember is that while the display: none; command completely omits the nested div item, the visibility: none; command also hides the content, but still leaves its area blank, open, unused, as if the content was there, just not visible. That may come in handy if your layout depends on whitespace or a background to be visible.
If you have several sections that need to be dropped out instead of just one, then something like a
@media (max-width: 767px) { wrapper.mobilehider { display: none; } }
the in the HTML, wrap it in:
<wrapper class="mobilehider">BigGraphicOfDancingMice</wrapper>
This you can use throughout the site, being a reuseable class declaration, as opposed to a single-use id.
Of course you can dig all this up on W3 Schools, but visitors may just want to see it quickly explained out that may not be familiar.
Using this wisely will allow your viewers to have faster load times, less data usage, cleaner layouts, and smoother scrolling and navigation.
A very useful tool.
Now, for a picture of my first Easter Lambcake I ever made... ...looks more like an albino wookie...
