I know sufficient color contrast between text and its background is important for usability, but how can I test for this? Specifically I have tabs and the title of tabs that aren't selected are greyed out but should still be readable.
Currently the site im working on looks fine to me but is there a rule of thumb for people with mild vision impairments (im assuming people with more severe vision impairments would use screen readers, etc).
Thanks
This toolbar for firefox will give warning & Fails when the color contrast is under a specific amount -
Accessibility Evaluation Toolbar
Related
When I create a site there's a lot of white space around a section. That's the only section and I'd like to have very little margin.
Is ti possible to change the margin / padding?
It helps to distinguish between classic and new Google Sites when asking questions, as the answer is not always the same for each.
Assuming you mean new Google Sites then as far as your question is concerned, the answer is no.
New Google Sites is pretty good at automatically configuring the output for different sizes, and orientation, of screens to support monitors, tablets, and phones. The trade off for that is that you loose some control over how the content is displayed; including margins and padding.
You can embed your own HTML, and have far more control of what happens with that section of display. But not outside of it.
I am working on windows 10 mobile app. If I design an UI for 5' device, it doesn't look good on 5.2' device. Also on emulators of different screen size show messed up UI. Is there any work around this? Or do I have to design it for every screen size?
Usually, please avoid to have fixed Width/Height for your controls. With a Grid layout, you can set columns/rows and place your controls inside each cells. This is a first level to adapt properly your interface. In addition, UWP provides AdaptiveTriggers if you want to adapt the layout based on the screen resolution (cf. https://channel9.msdn.com/Series/A-Developers-Guide-to-Windows-10/07) for additional information. Last but not least, please check Design&UI documention on https://developer.microsoft.com/en-us/windows/design.
The trick is with UWP that you can design for every screensize at once. It's just a responsive design you use (either HTML/CSS or XAML). But you have to use the right controls and settings.
Some guidance on how to design for various sizes can be found at the MSDN design page.
To create a dynamic layout with XAML, see this article. There are various panel-types you can use to do the layout (see this article). But if you really want to build a responsive UI (or change it dramatically in various sizes) RelativePanel is your friend.
I am trying to find the best method in order to create a horizontal website, full screen and if possible responsive, minimum width to be for tablets. The thing is that I need also the horizontal scrolling with the mousewheel, and I saw that fullPage.js doesn't support that or at least i couldn't manage to make it work on this plugin.
Anyway, I need an idea on building the template, with full screen sections displayed inline - I will be very grateful for any tip. Thanks.
Making horizontally responsive is bit tricky and requires a lot of effort.. There can be many many design approaches for making it responsive. It can't just be described with JSFiddle snippets..
However, I have something for you that will definitely get you started with "Horizontal Responsive Layout designing"..
This is must guide / tutorial for people who want to get started with Horizontal Responsive approach
http://tympanus.net/codrops/2012/04/02/responsive-horizontal-layout/
you could use one of the tools listed in the following links
http://www.cssdesignawards.com/articles/15-excellent-jquery-plugins-to-spice-up-your-sites/44/
http://jquery-plugins.net/scrollit-js-jquery-plugin-for-scrolling-pages
or you could also mix raw js/jquery with anchor links and add animations when clicked. in taht case you can scroll down using mouse wheel and also have fancy animations when a link is clicked
regarding responsiveness use css media queries
I have been looking for this for a while:
There are a ton of ruler extensions for all the common browsers but I can't find one that has a magnifying glass. Can anyone help me out please?
I'm talking about a magnifying glass like the Awesome Color Picker extension in Chrome:
The ruler extensions I've used really hurt my eyes when trying to measure anything to pixel precision.
Any browser is fine with me.
Note #1: This is not about seeing the width of elements through 'inspect element'. I need to find the precise number of pixels between any two points on a web page.
Note #2: Zooming in the browser doesn't do it either because some of the pixels change when I zoom.
Thanks in advance!
I am not sure if this is what you were looking for, but it might be worth checking out. It has zooming in on pixels, up to 3200%.
http://matthiasschuetz.com/pixelzoomer/
It's a FireFox add-on. I am not affiliated with the add-on at all.
Check out xScope from IconFactory. http://xscopeapp.com I use it all the time for development layouts. It's got several tools, including rulers, guides, a tool for dynamically measuring elements, and a loupe for viewing an enlarged part of your layouts. It's not a browser plugin, but I find that this makes it actually MORE useful.
I want to use After Disaster font on my website, but I can't achieve the same vertical position of displayed text in different browsers. Even more - it is dependent on system too. You may test this:
http://jsfiddle.net/z7rby/1/
On Linux Google Chrome displays text about one pixel higher than Firefox and Opera. On Windows Google Chrome displays it in the middle of background. What can I do with that?
There is no way to solve this problem. You have to accept that fonts will be rendered slightly differently on different systems, and find another way to achieve your visual goals.
You can control your layout via positioning CSS e.g. width, height but not font rendering.
If that level of control is not "good enough" then you can write browser-dependent CSS (tutorials exist online) to compensate for differences.
But please remember the goal in all computing is "good enough": Perfection is not cost-effective!
Once you have achieved a level where further improvements require a certain effort, but there are more important things to spend that effort on, that is the point when you have finished.