I want to design a system where user can give a specific font size from a settings and whole site will be changed and every writing would be of that font size. Now i think I have to develop a browser plugin. however, if any of you can suggest that without using browser plugin i can do that, then definitely I want to know that. [ here user will be able to modify the site from the browser ,user has nothing to do with the existing sites coding what so ever]
Please don't develop a plug-in just for that.
Unless you're working with really old browsers (IE6 and such) that would not scale fonts specified in certain units, all modern browsers have menu and keyboard settings to change the font size. Let the users use those.
You can also use a bit of Javascript to display "bigger/smaller" buttons somewhere and either replace a stylesheet file or adjust the default font size of the <body> element and have the rest of the elements derive percentages from it.
I don't know about other way to do it,but anyway plugin won't help you.
See this excellent article: http://colonelpanic.net/2010/08/browser-plugins-vs-extensions-the-difference/
You mean a browser extension. As you can see in the article- if you want to write an extension to IE use BHO. For Firefox see https://developer.mozilla.org/en/XUL_School
Related
Good day. I am creating a simple website that adds text to the canvas. But I want the user to upload their own custom fonts and use it in the site. How can do that? I have seen that before you can use the font you still need to be write it in css.
This may point you in the right direction...
http://www.w3schools.com/php/php_file_upload.asp
Also remember that google fonts is a large fonts database to you can direct your users to...
www.w3schools.com/js/js_htmldom_css.asp
If you mess around with this ^^^ than you may figure it out...
Remember though that many browsers allow you to turn off JavaScript...
Also there are ways to change css values with php...
The best thing to try is... assuming that the users font is in their fonts directory on their computer... you can direct the user to type in the exact name of the font and it SHOULD detect the font...
Just keep chugging on :D
I've never heard or seen that done before, even as a feature request lol.
How about maybe letting the user choose their own Google web font, that way you at least know what all the choices are.
Then you could either hardcode the font styles for a few Google web fonts, or have your app created new CSS files based on what font they choose.
Good luck!
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
We have website that was developed for desktops and now I've been blessed with a task of creating mobile version of it. The mobile design might be quite different from desktop version and the website is build on Wordpress. Now I'm not sure what would be best approach:
shall I stick to CSS changes only (as much as possible) and use media queries to target smaller screens? I'm worried about large images still being downloaded even if these are display:none. There is also quite a bit of JS happening on every page and this JS will not be used in mobile version of the site so I would have to build in additional checks possibly etc. Any other possbile problems with this approach?
server side code should detect if its mobile browser and should return custom html? Any other possbile problems with this approach?
mixture of two above?
any other options?
If anyone has experience with similar project and could point me to what proffered solution would be that would be great.
Use media queries as much as possible for layout changes.
For you JS, create yourself a small breakpoint handler that will trigger the js to run or stop.
I think a lot of people don't realize that a 2x image compressed is smaller than a 1x image compressed. So, if you use compression for you images, you will actually get a better network performance using just large images. How much of that image gets displayed is a potential issue that can cause negative performance, but I imagine that it's insignificant.
Are you using completely different UI for mobile than for desktop or is is just a different positioning of elements? If you have to support two templates then you will want o think about Adaptive(responsive from the server), where the server will determine based on the UserAgent which template to send to the client. UserAgent wont really get you much except for the type of Browser the client has. To figure out the dimensions of the device's screen you will need to know the dimensions or use a service like WURFL.
If you can do all of your UI change in one template using media queries then it might be best to start working on this from a Mobile First approach and basically start from scratch on your mobile look of the site and then figure out how you can re-position the elements on the page to match as close as possible to the current desktop look. Using the Responsive vs Adaptive approach will eliminate the need for UserAgent detection and you will only work with the width of the device.
Thinking of Responsive in "Mobile" vs "Desktop" is really limiting and causes a bit of confusion. Mobile should refer to devices that change location. Try using names like small, medium, and large to describe the layouts(breakpoints) for your Responsive Page.
Finally, there is not preferred way of doing "Responsive." Each site will have it's own requirements that need to be met. It is up to you to learn as much as possible and create the preferred way for your needs.
I am a big fan of the Responsive Theme Wordpress has. It is very customizable, and will allow you to use one site for both Mobile and Desktop.
https://wordpress.org/themes/responsive
You could always use:
<meta name = "viewport" content = "width = device-width">
in your header. Then the whole site will resize to fit the mobile device.
All your js should still work on mobile devices. It would just be 'flash' that wouldn't.
The site isn't "responsive" with this but, depending on the site and how much interaction etc the visitor needs, sometimes this is adequate and simple?
I am using Large fonts in my website at a few places and they don't appear anti-aliased or smooth... I was wondering if their is any way to show large anti-aliased fonts for browsers on windows OS which has anti-aliasing switched off as default... Similar to something they have on this website here
You can't control system anti-alias in CSS.
For that, you would have to use Flash text replacement, like sIFR (they are using h2swf)
If the user's OS or browser does not have anti-alias switched on, there's nothing you can do to force either to use it. You can use other rendering platforms like Flash, or using CCS to replace text with images, to allow fonts to be displayed with anti-aliasing, but it does seem like a kludge for something as simple as rendering text. Technologies like Flash will also alienate certain audiences, either whose devices have no support for them or they simply opt out of using them.
If your user does not have AA enabled, arguably they are displaying a preference or simply don't care about the particulars of how the font is rendered. At the end of the day, you simply cannot directly control the client your users will use to consume your website. On the web you will always be at the mercy of the client application. The best you can do is present it clearly and in such a way that it should be easy for users to get the best experience they can achieve with their client.
Don't lose any sleep over whether your pixels are slightly less pretty on one client.
Cufon is an alternative to sIFR. See comparison here:
http://net.tutsplus.com/tutorials/html-css-techniques/six-ways-to-improve-your-web-typography/
Good news : in IE9 (released 3/14/11) they seem to put much larger text as anti aliased by default. I have hardware acceleration disabled - so it probably has this effect for all users.
Warning: this is an exercise in futility but....
I did notice that the text-shadow css property seems to force anti aliasing in some browsers. Unfortunately I think only Chrome at this time...
Here's a sample...
(each heading is shown first normally - and then with a text shadow).
Best viewed in Chrome!
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.