I am a student in Web Design and I would like to make a slider without javascript for a personal project. I would like to make a slyder like this in CSS only with a good accessibility.
Original website : https://www.synthesia.io/ (This is the section with the title 'Used by over 12,000 trainings'.)
I thought of using a checkbox hack and playing with display block and display none. But I think it's not optimal for accessibility. Do you have any ideas? Thank you for your future answers.
Related
So I have found a solution for CSS-only Pinterest style layout. I want to use CSS only because jQuery Masonry or whatever just seems less respectable.
I am a complete beginner who has bever coded anything, and I think it'll be easier to just stick to CSS for now and get good in it.
So I want to create a personal website, and I don't mind using JS elsewhere but for the layout I think I want to do it 'from scratch' without cheating with Masonry, and there is a tutorial for this with only a couple problems [cross browser issues and can't order the grids]. http://cssdeck.com/labs/css-only-pinterest-style-columns-layout
This is my question- how do I implement this into a full website?
I know the basic process of writing a website, but I really don't know where to start with making a website using this code. Can someone please give me a step-by-step on how to make a homepage that links to other pages in the website with this?
And how to customise the boxes so that they act as links to other sections of the website?
I want to do it like windows 8 style, where the homepage is made of tiles, you click on a square and it takes you to another section of the website.
HERE is an example of what I am trying to make- http://builtbybuffalo.com/
So in a sense I am asking for a step by step for beginners on how to code the website I just linked to.
Or where to find that info.
Cheers!
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am having a website and i have applied a WordPress theme to it. But it is not responsive and doesn't view properly on mobile and other handle held devices. So is there any way to make an existing applied theme responsive ? Thanks in advance.
Of course you can make it responsive.
But, it can be a little bit of work. You are retrofitting an existing building.
Here are some things I am doing:
Set up CSS breakpoints
See more here: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ > This basically sets up the ability to change the CSS at different screen widths that correspond to different device screen widths.
Basically you can do a ton of magic to the existing layout/appearance of a site, just by modifying the CSS.
Along with modifying layout, you could pull out fancy CSS3 stuff (decoration) from the basic stylesheet, only showing it at larger sizes.
There's a lot more that could be said about this. CSS is an art.
You can use the Responsive Page Tester plugin—this is really cool: http://wordpress.org/plugins/responsive-page-tester/
Make images responsive
Okay, there's been a ton of talk about this over the past few years—but this seems to work fo r me. Use http://responsiveimg.com/ (is there a WP plugin that uses this yet? Not sure.) You could take a look at http://wordpress.org/plugins/simple-responsive-images/ . I like http://responsiveimg.com/ because I can see that it really replaces the bloody images with the proper size.
You need to concern yourself not just with the appearance, but the page weight, as well.
If you need to change the image sizes to match the breakpoints you desire, you need to rebuild the images. This plugin is wonderful for both rebuilding images, and setting the sizes: http://wordpress.org/plugins/simple-image-sizes/
Selectively Hide or Show stuff
You could use this plugin, that lets you use shortcodes to hide or show things for mobile/desktop: http://wordpress.org/plugins/wp-mobile-detect/ . If you are more technical, loading this plugin lets you use https://code.google.com/p/php-mobile-detect/, and you can access all the functions there. (See http://www.lukew.com/ff/entry.asp?1392). Anyway, if you use the functions, you can hide/show at the template level, not just the edit window level.
Convert the menu to a mobile-friendly one at mobile sizes
At a certain breakpiont, you need to collapse the menu. This paid one might work for you: http://labs.sevenspark.com/UberMenu . You could also try this one: http://wordpress.org/plugins/responsive-select-menu/ . It's pretty darn nice.
Resizing videos
Here: http://wordpress.org/plugins/fitvids-for-wordpress/
Or, just serve a different theme altogether
WP Touch Pro is great — http://www.bravenewcode.com/wptouch/ . It has a tone of great defaults.
Pros:
Start from a mobile "scratch," instead of trying to retrofit a potentially heavy desktop site into your mobile
Fit in just the changes you need
Take advantage of a lot of mobile code and design that's been done for you
Cons:
It may have a totally different "look" than your current site
Custom features such as custom post types or special theme code will not be there, and would have to be recreated or left out
If the theme is not 'responsive' then there is no switch to make it responsive.
To make a theme 'responsive' requires general knowledge about what makes a theme responsive.
In general, a theme is classed as responsive if the format of the page can adapt according to the viewing window it has been given. This is either through a user resizing the browser, or the user viewing the page on different sized devices such as mobile phones.
To understand how to implement this in a general sense, and specifically for WordPress, would require a more specific question.
To make any changes to a WordPress theme, first you must learn about the WordPress theme structure, and WordPress Template Hierarchy.
Hope this helps to point you in the right direction.
One simple suggestion for making WordPress theme responsive:
First you may found out some responsive WordPress theme that matches your existing theme and then you may improve some changes that affected your look n feel due to application of new theme.
This is the first solution that you may try since it is simple than the second one. If it doesn't work out for you then you may proceed to change the CSS so as to make it responsive by creating a child theme.
Preconditions:
No CMS solution, i.e. no Wordpress etc.
No Javascript/Ajax, i.e. I want a "static" site.
No text shown as images, i.e. I want to be able to edit content myself.
With good UI/UX I mean dynamic user feedback, when a user interacts with the HTML widgets.
Example, http://www.rapha.cc/ is using CSS for menus (which highlight the currently selected). I guess I'm looking for good live examples...
Is it possible to create a good UI/UX using only CSS and no Javascript ?
Simple answer: Of course it is.
More complicated answer: Depending on what you want to do..... CSS can do some mighty funky things, but it does have limitations.
As per Karpie yes of course.
From your question though I think you ned to clarify if you want a good UI/UX or a good 'flashy/pretty' UI/UX, they are not the same thing.
The UX can be very good without having any 'pretty' effects.
How can i render an asp.net page in an order that i want. For example, in this Stackoverflow page you have Questions, Tags, users, Badges, Unanswered, ... at the top and then the question heading and the answers. If you view source for this, you will find that Questions, Tags are rendered from line 76, onwards. While the Question details start from line 97.
What if i want to have the Question details ( Main Content ) to start before line 76 in source ( Before the menu / header ).
any idea?
That's just a matter of styling/layout, which you control via CSS. Depending on the layout model you choose, you can render the items anywhere in the HTML, and put them anywhere you like visually.
-- Edit:
To provide slightly more details, you can use 'positioning' layouts, or floats, or tables (considered bad for layout-only purposes) or some combination thereof. A great website to learn about this, and the best ways to to it, regarding compatibility is Quirksmode. Some other people may reply with better sites.
I was listening to a recent episode of Hanselminutes where Scott Hanselman was discussing accessibility in web applications and it got me thinking about accessibility in my own applications.
We all understand the importance of semantic markup in our web applications as it relates to accessibility but what about other simple enhancements that can be made to improve the user experience for disabled users?
In the episode, there were a number of times where I slapped my forehead and said "Of course! Why haven't I done that?" In particular, Scott talked about a website that placed a hidden link at the top of a web page that said "skip to main content". The link will only be visible to people using screen readers and it allows their screen reader to jump past menus and other secondary content. It's such an obvious improvement yet it's easy not to think of it.
There is more to accessibility and the overall user experience than simply creating valid XHTML and calling it a day.
What are some of your simple tricks for improving the user experience for the vision impaired?
Creating accessible pages is something that is hard to think about if you have never done it. However, once you learn the basic concepts it is very easy to do in 95% of the cases. I will mostly be repeating what others have said, but:
Only use tables for tabular data
Make sure you use the semantic tools available to you via HTML. This means using TH with a scope attribute. Use <em> instead of <i> and <strong> instead of <b>. Use the acronym and abbrev tags. Use definition lists. I can expand on these things if anyone wishes.
One of the most important things is to use the label tag on input fields. For every input field, radio button, checkbox and textinput you should have:
<label for="username">Username:</label><input name="username" />
Add a "skip navigation" or "skip to navigation" depending on where big chunks of text are. If you are working on a government site this should be second nature that everything you're creating allows you to skip repetitive information.
Do not use colors for emphasis.
Ensure that all of your text is resizable. This pretty much means don't use "px" in your css.
I will re-emphasize this: create semantic pages. Use H tags for your titles. Use ul/li for navigation.
Use the alt attribute on all images. If you have a spacer gif... well.. don't. Otherwise, explain what the picture is of and what its significance is to the content it is associated with. don't use "a chart" as your alt tag. Use "Chart of YTD finances: $5,000 Q1, $4,000 Q2, $8,000 Q3" or something similar.
Provide closed captioning or transcripts for all audio and video components
The key here is to provide those with visual, hearing and motor impairments the same experience as those with standard physical capabilities. If you can't tab into a field, a screen reader can't either. If you can't click on the text next to a check box to select it, the screen reader doesn't know the text is related to the check box.
You should frequently view your site without stylesheets (ctrl-shift-s if you have Firefox and the Web Developer Toolbar) to see if the page makes sense. If it doesn't make sense to you as a sighted individual, it won't make sense to someone using a screen reader.
Check out Fangs
Fangs is an in-browser tool for Firefox that emulates what a screen reader “sees” when visiting a Web page. Its function is simple: to output a transcript of what a screen reader will read out to a user when a Web page is visited. It’s a helpful tool for quickly analyzing if you’ve structured your content effectively so that it’s understandable and usable by vision-impaired individuals, without forcing you to learn to use (and purchase) a screen-reader application such as JAWS or Windows Eyes.
It's been awhile since I've been at a job where we had to adhere to Section 508, but here's what I remember that hasn't been touched on by the other posters...
Only use tables for data. Do not use tables for layout if you can avoid it.
When using tables for data, your column headers should be nested in TH tags and you should use title and scope attributes. Your table tags should use the summary attribute.
Images should all have a value for the alt attribute that describes what's going on in the image and if the image serves no purpose (it's a shim image or something similar) then the alt attribute should be set to empty string.
Try using a text to speech reader and/or navigate only through the keyboard and/or turn off stylesheets. I believe you need to purchase JAWS, but I'm sure there are free screen readers out there. You need to experience a site through a screen reader to truly understand how difficult most web pages are to navigate without the cues that screen readers interpret.
"Vision impaired" includes colour-blindness. I used to work with someone who couldn't distinguish red from green too well, so any applications that used a traffic-light style interface was very difficult for him to use. In the industry we were working in, alerts in rows were colour-coded, so another form of display was useful for him, such as an extra column in the row with the text of the alert type ("emergency", "warning" etc).
Biggest problem with screen readers is usually tables to position things on your page. Screenreaders can't really handle those. Put stuff in div's in your html and put them in a sensible order. Then position the div's on your page with css. Use tables to display content that should be in a table.
The code for many web pages is structured as:
Header
Top Navigation
Left Navigation
Content
Footer
When structured this way, then the hidden link for "Skip to Main Content" is beneficial. However, with CSS layout, you may be able to reorder this so that you have:
Content
Header
Top Navigation
Left Navigation
Footer
You then use CSS positioning and floats to move these different elements around on the screen to make the page look the way you want it to look.
The main advantage to structuring a web page in this way is that if the browser doesn't support the CSS, then the content is first on the page. In addition to screen readers, this is beneficial for mobile devices and search engine spiders.
For partially partially sighted we need to make sure text is not excessivly small and contrasts the background color substantially. We should also make sure text is resizable by using relative sizing units such as em's rather than absolute units like px's (although, in my opinion, this is becoming less of an issue as browsers are increasingly favoring zooming over text resizing).
For users of screen readers, it's helpful to get a good idea of the way screen readers are actualy used. The following article presents guidlines based on observations of blind people browsing the web using screen readers; it's a little out of date now, but gives you a good feel for what will help screen reader users, and what won't:
http://redish.net/content/papers/interactions.html
Additionally, the American Foundation for the blind have a section of their website dedicated to advice for web developers on how to cater for vision impaired users.
In addition to the visually impared, we need to consider those with disabilities that prevent them from using a mouse, and also those with neurological disabilities. If anyone can provide resources giving advice on how to cater for those individuals, that would be great.