I am a web developer and created a non-JS social networking website where everything works perfectly for devices not employing JS, including form submission (lots of page refreshes).
Who is using non-JS devices in this day and age? A non-trivial chunk of my users.
Why are they using non-JS devices? Because they originate from a forward proxy that removes JavaScript. Or, some of them have non-smart feature phones where JS doesn't exist.
The navbar of my website currently looks like this:
I recently had it redesigned to this scrolling experience:
Is it possible to create an experience such that JS supporting devices see the latest navbar, whereas all other devices keep on seeing the old static navbar?
If so, how? Can someone give me a basic example of how to do this?
Note: I'm aware that pure CSS solutions exist too, in which case JS doesn't even enter the discussion. However, such a solution could still potentially exclude my most primitive device users. The best solution for me would definitely need some kind of a 'fallback' to the static navbar. Please advise accordingly.
Sure you can provide two different sites and use the noscript-tag to tell the user he or she should take the other page if javascript is not available.
The better way in my opinion is to build the switch inside the code and only show the content that is ideal for the current user.
The common way to achieve this is the following:
Add the css class no-js to the html-tag
Add a small javascript script portion that removes this css class (or replaces it with js
build your css like always but if you want to provide different stylings (or hide / show specific elements) prepend the css declaration with .no-js or .js
In your case you could have both navigations inside your html markup and display only the navigation that suits the current user.
This "trick" works btw with every switch you want to build (for css rules). If you want to build a cool font effect and set the color to the background color and add a shadow it's realy bad if the shadow is not visible because the users browser is not able to understand the text-shadow css rule. So you can build it with a fallback like this:
.cool-font-effect {
color:black;
}
.textshadow .cool-font-effect {
color:white;
text-shadow: 2px 2px silver;
}
and use js to detect if the users browser can use text-shadow:
var isTextShadowSupported = ()=>document.createElement("detect").style.textShadow==="";
if(isTextShadowSupported())
document.querySelector('html').classList.add('textshadow');
BTW: This is the way Modernizr works. If you like that and don't want to build all the tests yourself take a look at it. Th tests are fast and you can test against nearly every feature in html, css and javascript.
Related
Should I change HTML layouts with JS or CSS?
I see a lot of use of CSS display hiding or showing elements dependent on media queries. Maybe hidden duplicate HTML that appears in a different location on mobile. A hidden mobile menu. Etc etc
But with JS i can have one layout that "morphs" dependent of screen width. No hidden duplicate markup, just moving HTML around.
Is this not a good idea?
Programatic changes on the layout will depend on the robustness and performance of your JS code.
CSS changes depends of the browser's and it's more efficient for sure.
About the enviroment's measure you can act upon them with css media-querys.
You should not forget, that some browsers/users disable JavaScript for security-reasons.
You should use CSS where it is possible. So your Website can be viewed in all Browsers.
If you have to change some styling dynamically, and there are no CSS-alternatives, javascrpit might be the right choice.
It really depends on what you want to do, if it's basic animations, then css is here for you, if it's more advanced animations, then you should use JS, as other users said, keep in mind that some users disable JavaScript for security reasons, but i think they don't exeed 5% of the users , here's some links to help you find out what's best for your use of css or JS :
Myth Busting: CSS Animations vs. JavaScript
CSS Versus JavaScript Animations
For media queries, here's an answer that respond to your question. With the media queries, you won't have to hide anything, you will use a different CSS code for the same part of the HTML, but with different CSS attributes only for mobile/responsive use
For the SEO, here's and experiment that shows that googleBots crawl the Js without problem.
Edit : if you're able to use some server side language(php, asp...), use CSS for the design part, and the server side language for the other things, and only Javascript when you find it usefull. if you can do something with the CSS instead of JS, then do it with the CSS.
I have a website that I need to convert to HTML5. I need advice and whether it can truly be converted to an HTML5.
Please tell me, how I should start? Should I just start using HTML5 code in lieu of existing HTML4.
I will need to later add video content and a image scroller. Also if need be, should I redesign the site from scratch? I dont think this should be a problem.
Also the site is not friendly with form factors other than deskop/laptop.
It does not work well with mobile small display for which case HTML5 is anyways needed.
Do not hesitate or think too much. I need to know what you guys have in mind before I take a major step. I need to do this in under a month, I cannot afford to waste anymore time on it.
I have used gimp to make the icons for this website, but i dont think much of those icons will be needed with the new code.
Also, should I make a design prototype in gimp for my website. Later on I can add the css/html5. Do you think its worth the extra time or should I use one of the ready made templates?
Yes any site can be converted in HTML5. It is simple process, first you have to change doctype from old to new which is very short doctype. Please change your doc type statement on top of site to following.
<!DOCTYPE html>
Meta coding also another thing you need to change from old version to latest which is following.
<meta charset="utf-8">
After changing your meta coding now see all div and change them to Semantics div. In past we used mostly div to separate part or to design our layout. Now try to see if some div have any specific meaning like header, footer, article, section and convert them accordingly. Only remaining div should for design purpose but all other who have specific meaning should be converted to tags which are provided by HTML5.
Now another thing need to be done is Nav, where ever you see navigation please put it in tag as html5 uses this tag to specify list of links.
When you do all this there is possibility that old browser would not support so to bring support back use add Shiv a javascript that bring these special tags in previous version of html. Now change your css as all div you change require redefining tag instead of div in css too.
As for your part of Mobile version or sizing it is not of HTML5 but it is about CSS you have to use media queries in css to customise different styles for different size. Media query will let you know what size of display is and than you have to add styles and do changes some big parts break in linear format to give perfect view in Mobile and Menu be removed and a button is added.
Now add video and other media but remember that different video formats are supported by different browser so you have to provide multiple format to be used in html5 video. Also have to use for compatibility purpose old flash.
GIMP you can use if you want to redesign or change design of site otherwise for html5 I don't see its usage.
You don't have to use GIMP to design everything from scratch, follow the steps described here:
http://www.w3schools.com/Html/html5_migration.asp
they will guide you to convert your existing website to use HTML 5
I've built my mobile site using the jQuery Mobile UI but I now realize that I need some functionality to be different between it and my desktop site (datepicker dates should be longer on the desktop site, etc).
I've looked into Modernizr and matchMedia to help me load separate js files but I can't figure out a nice way for it to work responsively. Modernizr only works (unless I missed something in the doc) on the initial load and I'm having problems with matchMedia executing multiple times as it crosses the min/max-width threshold. It works sometimes but the trouble is in adding/removing the separate js files. On top of that (but not a huge issue - I don't think), Chrome fires off an error when loading scripts into the DOM from another script.
Would the best thing be to write one js file and then add a listener such as $.mobile.media("screen and (min-width: XXXpx)") to the body's width, changing my needed values?
I may be making this too hard for myself, or missing something obvious because I'm trying to keep HTTP requests and site size as small as possible, but I can't figure out a good solution for this.
Thank you!
Lightning Round Bonus Question: Is it good practice/proper to keep all of the jQuery Mobile styling (data-role data-id data-theme) after switching to the desktop site? It looks awfully .. awful for someone only viewing it on a larger screen.
IMHO, the best approach would be to introduce a couple of flags in your javascript, like "isMobile", "isTablet" or "isDesktop", that would be set within a method attached to the "pageinit" event of your webapp. Later on, you could check that flags to act accordingly with the proper version in the specific parts of your code.
The way you can check that flags depends on your architecture. In the project I am working right now, I extract that information from a class attached by the back-end on the body of the page, but that's because we have that info. You could try to use a library like Harvey to observe the media-queries that would be trigger, and set the flags accordingly. I don't think that your options ends here, but I am afraid I can't help you more!
I'm relatively new to client-side programming coming from the PHP/MySQL environment. I understand the roles both CSS and JavaScript can play in the browser environment, however, it appears CSS is irreversibly stagnant without JavaScript. I by no means want to create a debate but this is what the situation looks like to me, the "novice." So why not just use only JavaScript to set element attributes/properties? And if so, is this a common practice? (I'm sure CSS is much faster...)
Some general points:
CPU Cost
Running Javascript to apply styles to individual elements will incredibly slow. Javascript is synchronous, so it'll have to update one style at a time. Plus, as mentioned elsewhere, traversing the DOM is computationally expensive. More so if you're applying styles since you're forcing the browser to re-render the site each time you apply a change.
Brain Cost
It's also mentally expensive to try to write and maintain styles in Javascript. It's a functional language never intended to contains the rules of layouts. CSS is just a lot easier to read.
They Cascade!
CSS stands for Cascading Style Sheets. One of the great benefits styles can inherit properties from eachother. Consider the following:
a.nav { font-weight: bold; }
Now all your links with a class of "nav" are bold. But should you wish to further modify a link you'll still be able to:
li a.nav { color: red; }
Now all your a.nav links contained within a list item will be red and bold. It's possible to do this is javascript, but you'd have to force it and maintenance would be horrible.
If you use Javascript for styles your coworkers will beat you to death!
I think this one kind of speaks for itself
Css is for page layout and style.
Javascript is for behavior.
Even if it is possible to completely replace css with javascript, it's not considered standard practice and would be frowned upon severely by most web developers.
Good web development always assumes that a client may have javascript turned off and will provide for a graceful default setting. Replacing css with javascript may make this impossible.
It is far from a common practice, in fact it would probably be viewed as a bad practice!
CSS is used to set the styles of the page and it is rendered when the page loads. Javascript comes into play after the page loads and can manipulate the existing styles and page.
If you were to put it into all JS it would be hugely inefficient! DOM manipulation gets expensive if you do it a lot in JS, and doing all styles in javascript instead of CSS would be lots of manipulation. The load on the client would be ridiculous and there would probably be a noticeable lag in the client as it tried to make all those changes. Plus what happens if a client has javascript disabled? There goes your entire site's look and feel.
Think of CSS as defining how the page looks and should be rendered, and then think of JS as changing that page after it's done rendering. You shouldn't push anything into a javascript that you can do with a simple CSS style up-front.
The real problems with changing out your CSS for javascript would be maintainability and performance. CSS makes it very simple to find a single elements styling, and change it, without effecting the rest of your page. Javascript would become cumbersome at best for even a simple page, and completely unmanageable for a more complex page.
On the performance side, any time javascript is executing, your page will "freeze". Considering a page with 1000 elements needing laid out, your execution time might easily grow to a minute or more, depending on the complexity of the layout. CSS would handle this natively, and without any "freezing" of your browser. This would cause your page to be unusable for the first bit of time that a person visits, and (according to statistics) you only have 10 seconds to capture the attention of your viewer before they become disinterested in your page and leave, meaning you drive away all your new visitors.
The only time you should use JavaScript for setting style properties is when you need to change the style at runtime. You should always use CSS for styling where possible because:
CSS tends to be implemented a lot more consistently across browsers than JS
A user may have JS disabled
The "code" to do styling in CSS is a lot terser, and easier to read/write than the equivalent JS code
What is the "best practice" (accessibility/usability-wise) for resizing text with Javascript?
My current solution is that for when the user clicks the resize link it adds an extra class to the body tag.
It also sets a cookie and then when the page is loaded - onLoad() - it reads the cookie and reapplys the body class tag again if needs be.
The only thing not ideal is that it loads then applys - the previous solution was to edit the CSS file before the page loaded but that threw up security warnings if the CSS file was in a different directory.
So, essentially is my solution reasonable or is there a better way?
Adam
What is the "best practice"
(accessibility/usability-wise) for
resizing text with Javascript?
Best practise is "Don't".
Specify the font size in relative units and let the native browser controls change it if the user wishes.
Attempts to duplicate this functionality rarely give the font sizes that users need (and usually end up offering a choice atomic, microscopic and tiny). Yes, some users need 72pt text (or larger).
The built in browser controls work on most, if not all, sites. You don't need to use up canvas real estate duplicating them.
Your solution sounds fine, with one addition: you can read the cookie as the page loads and add the class to the body element while the markup is generated. Most server-side languages support this: PHP, JSP, RoR etc.
Other than that, you have a solid solution.
Adding a CSS style to HTML via JavaScript
I think your suggestion is an excellent way of doing it.
It means you have the flexibility of being able to add the CSS class to any sub element rather than the body so that you can change the text size of a specific element if you so desire.
Reading the cookie on page load
To get around the issue you describe I would look for the cookie in your server side language (php/asp/ruby etc) and display the content as specified by the cookie on page load.
In PHP your CSS class definition may look like this:
echo '<div class=\"'.($_COOKIE['text_size']!='' ? $_COOKIE['text_size'] : 'normal'). '\">';
What is the "best practice" (accessibility/usability-wise) for resizing text with Javascript?
"Web Accessibility Gone Wild" sums it up quite nicely imho:
If your default font size may be too small for site visitors, then make it an adequate size.
and,
All browsers allow the sizing or scaling of the page content - why duplicate this browser functionality?
Also, Care With Font Size:
The problem here is a basic usability and accessibility issue: a good design should look good without requiring the user to enlarge or reduce the text size.
However, if you have a valid reason - feel free to ignore this.