How can I make a clickable progress bar like this (image) ?
I want to choose one part of progress bar when I clicked on that part !
Many implementations of progress trackers, rely on images for their appearance. Using images obviously works, but it does present some problems.
Performance. When a web page includes images, the web browser has to make separate requests to the web server to retrieve those images. Those requests take time, and they can slow down the performance of the page.
Quality. Standard resolution images can look terrible on high resolution displays (such as Apple's Retina). There are techniques to adapt images to high resolution displays, but they take time, effort and programming to implement.
Fluid Layouts. Fluid layouts require that web content dynamically adapt to the width of the browser window. If the page includes images, it either has to scale the images (which can reduce their quality), crop the image (which modifies the content), or change the relative proportion of image content to text (which may undesirably change the page's look and feel).
Note: standard progress trackers probably aren't appropriate for fully responsive designs that must support small screen devices. If a task has enough steps to warrant a progress tracker, those steps probably aren't going to fit in a standard, horizontally oriented tracker on a small display.
Tracking progress reference
You can work using some input radio, :checked pseudoclass and sibling (~) selector.
You can take a look here: http://codepen.io/anon/pen/gpBExG
The trick is input[type='radio']:checked ~ .checker
It's an incomplete example but I've implemented main logic. You should create better UI using images.
Related
I am making a responsive page and need to move a section of content to a different place in the DOM on mobile vs desktop screens.
My current solution is to have the content duplicated in both places but tag one with a show-on-mobile-only media query and the other with a show-on-desktop-only media query.
This is simple and works but I am wondering if there are any potential pitfalls with having some of my content repeated on the page in terms of page load speed, accessibility or SEO. Alternatively, I could try using JS to move the element, but that has its own issues.
I see that this is a similar question, however it did not fully answer my particular concerns.
I'd appreciate your thoughts.
Thanks.
In terms of accessibility, some people have css turned off so then it would still appear twice.
Unless there's a really special reason why you need to have specfic content for different device views, it would be far easier—and much more maintainable—to employ responsive web design (RWD). If you do that, your layouts would be controlled via CSS, and JavaScript would only be needed for items such as responsively served images and mobile menus.
Another added advantage of using RWD is semantic HTML markup, and makes your content much more accessibility—and SEO—compliant. It's good to keep in mind that changing visibility on elements can wreak havoc on screen readers—which can be quite challenging for disabled users.
I have troubles regarding a slider I have on my website.
Currently it's a slider with the <img> element. Problem I encounter now is that on mobile the large images get loaded as well. Now I want to load specific (smaller) images for mobile so that my website is faster on these devices.
A solution I had was using the media queries in combination with CSS background image. This is perfect to use because I can load the images with CSS and thus can use media queries to select the image based on screen size.
But the problem is is that I want to add the images to the SEO, they are essential for my website and I read everywhere that if you have such images, you need to use the <img> element. So that the SEO can work and include these images in the content. Also I cannot add ALT tags to background-image.
Another solution is rendering two sliders, one for mobile and one for desktop, and hiding the slider you don't want to see. Problem I have with this solution is that both of the sliders need to render, thus decreasing performance.
Is there a solution that I'm missing here? In my understanding you cannot change images in a <img> element with CSS media queries.
You can use the picture element. As the Mozilla Developer Network says, "[This element] serves as a container for zero or more elements and one element to provide versions of an image for different display device scenarios". I think it does the trick. Here you are another good article that explains how to use this element to achieve the result you need with your responsive images.
The picture element is a really nice modern solution. But if you want something more cross-browser, consider an approach with JavaScript. My solution for some websites was using sets of images with regular suffixes, for example image.jmg, image-medium.jpg, image-small.jpg, and a script checking the screen resolution. In the HTML only small images are included, but if the script finds the screen is big enough, it updates their src with corresponding suffixes.
I'm kind of sure this is not possible but I ask because it seems unbelievable.
I have some elements styled for reponsive design
img {max-width:100%;height:auto;}
but the images have to be different depending on the device (I won't load heavy wide screen images on a phone device).
Since media queries aren't supported inline, I could go for a css background solution, but background-size is not perfectly supported and honnestly it would look more like a hack.
Can anyone confirm that "widely supported device related responsive images" are not properly possible ?
Thanks
If I understand your question correctly, you are looking for a way to deliver a different image depending on the viewpoint.
Adaptive Images could be the solution you are looking for. Easy enough to setup and confirm.
A second possiblity which might give you even more control is Adapt.js . I've used it with good success on several sites. You load a small javascript file in the head of your document. This tests viewpoint width and then dependending on the results, it will send the appropriate CSS file. It has wider browser support than #media requests.
If you could live with using background images, then it would work well, and since you could specify different images for different viewpoints, you aren't up the creek with browsers that don't understand background image sizes.
Good luck!
You could try the Responsive Img jQuery plugin.
It's made to automatically create and swap in different-sized images at different breakpoints, based on the container's width.
If you already have different versions on your image created and on your server, the plugin will just swap those in at the right breakpoint sizes.
Therefore, you can create new images for all the different breakpoint sizes you want, and the plugin takes care of the rest.
It's not CSS, but it gets the job done.
2014 update
There is a nice and new technique here :
http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
It requires a small js, a 1x1px blank image, a few extra markup for img tags, and some .htaccess rules.
Seems to work fine so far.
Regardless of whether it is HTML, XHTML or HTML5 you find those annoying percentages littered throughout the place. Yet... I see an awful lot of websites dare not go near them. Yet I was always encouraged through uni to use them.
So which should I be using? Which would lead to better site design and why?
I'm aware to avoid the use of height although HTML5 really doesn't like me not specifying height if I want to use percentages.
Thanks for taking the time to read.
It really depends on what you do you want to build up.
Sometimes I need to build a website which could be read by people with certain disabilities. If for example also older people visit your site its good to use % so that they could zoom in your page and the layout still looks pretty.
Fixed Design Layouts Fixed design layouts have a specific width and do
not scale to fit the browser window. Websites that make use of it can
be aligned to the left, centre or even aligned to the right as and
when required.
Benefits of Fixed layouts: With fixed design layouts you have control
over the line length, flow and placement of the elements on the web
page. The designer has a fixed space to work with and the line lengths
of the text and the placement of images can be designated easily.
Drawbacks of Fixed layouts: Fixed design layouts tend to leave lots of
empty space on either side of the design when viewed on high screen
resolutions. This dwarfs the size of the web page and gives an
impression that it is floating on the screen.
Fluid Layout Fluid design layouts use percentages instead of pixels to
define their width and they fill the entire browser window. They are
also called fixed or dynamic designs.
Benefits of Fluid layouts: One of the major benefits of fluid design
layouts is their accessibility features. They cater to more number of
users. This is because, whatever may be the screen resolution or
device of the user, fixed design layouts adapt better. It makes use of
the entire browser window by spreading out. This maximizes the area
for the content to e displayed and more information can be seen at one
go. Therefore, there is no empty space on the window screen. This is a
better bet as compared to fixed layouts that leave a great deal of
empty space.
For fonts, you should use percentages (or em's, or rems) if you don't wish to fix the font size in Internet Explorer. If you use pixels, then users of Internet Explorer who change their default font size in their browser settings won't see the fonts increase/decrease. So this makes your text potentially less readable for users in that browser.
A great resource for this is the first chapter of Dan Cederholm's Bulletproof Web Design.
For layout, using percentages or em's will make your design more flexible to changing font sizes/localization etc. This is also covered in the book.
I'm making my first website, and I'm trying to make variable-sized buttons so they'll render correctly on low resolution (read: mobile) browsers. Currently I just have the usual rollover image solution (185 pixels wide by 37 tall if anybody cares), but when I preview the site in low resolution it looks, predictably enough, like complete crap (more specifically they don't have room so they arrange vertically instead of horizontally and take up a huge amount of screen real estate).
Semi-related, is there a way to overlay text on a button without saving separate images, each with the correct text? Just using a single template for buttons and then deciding what text goes on it as it's needed?
tl;dr: I'm trying to get a horizontal lineup of buttons for navigating my website, but I'm a noob and I can't do it right without your generous assistance.
You're picking a tough problem for your first website. Some issues you'll encounter:
There are a vast number of different mobile browsers out there (makes dealing with just Firefox, IE, Safair, Chrome trivial)
All these browsers have varying level of support for HTML. Some have poor support, they'll do different things with Tables.
A variety of screen sizes (although you can assume it will be one of 128, 176, 240, 320 or 480 px wide)
A difficulty in testing how your app looks on different browsers.
Varying support for java script (good on iPhone/Android/PalmPre, partial (and inconsistent) on BlackBerry/Sybian60 devices and poor on pretty much everything else)
A usual approach to these problems is to analyse the User Agent to identify the mobile browser type, and its capabilities. Then render the screen appropriately (e.g. for 128/176px wide screens, use small buttons). Look into http://wurfl.sourceforge.net/ or http://deviceatlas.com/ for tools on how to do this. You may also find some useful info at http://mobiforge.com/forum/Developing. And http://ready.mobi/launch.jsp?locale=en_EN is a fine online analysis tool of your mobile website (but don't get sucked into trying to get a 100% score on it).
If you're just developing static HTML, then things are a lot more limited. You could use User Agent based URL rewrites on apache to redirect to different versions of your HTML.
Good luck!