I have been looking into responsive design using Omega subthemes. It seems very powerful when combined with the context and delta modules. However, I am having difficulty understanding how to selectively remove parts of a page in a responsive website. When I say remove, I don't mean hide, but actually prevent the specified content from rendering (that way a mobile browser doesn't have to waste time downloading content which is never displayed).
Omega provides the ability to apply different CSS to a page based on browser size (by using media query tags). Delta and context modules to be used to change the arrangement of page elements, or even remove page elements, based on certain conditions. However, I have not been able to work out how to combine the two.
For example, is it possible to, not only apply different CSS at different browser window sizes, but also prevent certain page content being rendered at the same time?
I have not been able to find any information on this. I am guessing since page content is rendered on the server side and media queries work on the client side, that it is probably not possible. I would be interested to know if anyone has any ideas on how I could achieve this.
You should take a look at the Context Breakpoint module. It allows you to set Context conditions based on the end-users browser size, aspect ratio and resolution.
http://drupal.org/project/context_breakpoint
Not sure if works for you but when I do a display: none - everything disappears and the surrounding divs shuffle nicely:
#include breakpoint($phone){
.l-header_search {
display:none;
}
}
Related
I am building this form: http://codepen.io/anon/pen/gFoIG/
and so far I am satisfied. Unfortunately I have some issue that I seem not able to fix.
First of all, I want to enforce the label positions beside their respective inputs. Now the form breaks down easily (with the opera emulator for smartphone and tablet, the privacy label goes below the check, but I want that it stays beside it)
The other issue that I have is that I want it to fall back gracefully when there are small screens, like placing the second image below the first and placing the input controls one below the other and take the full screen width to be bigger and easier to interact with, but so far I only was able to break the layout with my tests.
This issue: the the form layout breaks, the internal control (input, button, etc) go outside the container div. How do I enforce the container to keep everything inside? I've experimented with blocks, floats and whatever, but if the layout breaks, the input boxes usually go outside the gray rectangle.
Last issue: If I insert this form inside an existing website (for example, a page in wordpress) the layout get completely destroyed because influences from the theme style. How do I enforce my style on my form, keeping it isolated from the other styles? I can think of the iframe as a solution, but it is the only one? It is a good practice?
Anyone can help me with that?
You might want to take a look here. Its a site I just set up to explain an approach to responsive using a jQuery plugin to manage redoing layout. I think it could work for your example quite easily. Also because it can target a container div at any depth in a web page, it could be helpful in the scenario where the layout you want to reflow is inside a 3rd party container (as long as you can run script on the page).
I am a newby to design and looking now into the use of background instead of foreground images, which is a common practice.
I look at the techniques used, and see that:
you usually need to explicitly state the dimensions of the image (and set the foreground element to these dimensions)
you need to make the foreground element to somehow disappear with css tricks.
All this looks really hackish. So, I wonder, why on earth do all this instead of just using the native element? I am sure there is a good answer
(I did go through this When to use IMG vs. CSS background-image? , and could not figure out a clear answer)
One thing to consider as a benefit to using CSS for images is that you can load all your design images (images for UI elements, etc) with one http request rather than an http request for each individual image using a sprite. One large image that contains a grid of all your images.
As its been stated before, content images should use the img tag which also helps for people using various accessibility options when visiting your site/app. For example, if they are using a screenreader, the screenreader knows its an image and can read the img alt name or title, but if its just a div with a background image they get nothing.
The main difference is that in the img tag the image is hardcoded.
With CSS you can create different designs, switch between them, redesign the page, without altering the source code. To see the power of CSS, check http://www.csszengarden.com/, all the pages use the same HTML source, but with different CSS layout.
As #Shmiddty noted, if img is for embedded images (actual content, for example a gallery, or a picture for an article), and CSS is for design.
Also, the question you referred to, has nice list of all the use-cases: When to use CSS background-image.
The goal is to separate content from presentation. HTML should contain just content, and all presentation should be moved to the CSS. Once you achieve that, you gain a few useful side effects:
The CSS (presentational code) is cached by the user's browser, and each HTML file requested is smaller. This also has some SEO benefits (decreased code fluff).
Screen readers have to muddle through less when interpreting your page for visually impaired users. Making sure your HTML contains just content means visually impaired users reach what they're looking for much quicker.
CSS makes it possible to display the same content in different visual configurations, which is the cornerstone of the responsive web design movement. Properly delineating your content and presentation means being able to use the same HTML files across multiple platforms (desktop, tablet, smartphone).
However, there are times when images are content on a specific page. In those cases, you want to use an IMG tag, and moving the image to the CSS is actually a wrong move. A great discussion of when and where to use text to image replacement is at When to use IMG vs. CSS background-image? Basically, my personal litmus test is something like: Is this image going to be used multiple times on the site? If it is, it's probably part of the design. Once-off images are generally content.
If you're looking to move your design images to the CSS, congratulations :-p You've adopted a healthy amount of work, but started doing something worthwhile to the long-term health of your website as part of the web ecosystem. I would highly recommend looking into using the SASS/Compass system to manage your design images as sprites (see A List Apart:CSS Sprites and Spriting with Compass).
One of the main points of image replacement is to use your site title in a h1 tag for good SEO, and then hiding the text and replacing it with a custom logo.
This also makes your site more accessible. Say for example, your user has CSS disabled for whatever reason (screenreaders, maybe). They would still see the textual representation of your site title, whereas normal users would see the custom graphic.
I'm working on my first responsive site and have read numerous articles but can't find an explicit answer to my question.
I have created and coded 3 designs at this point. The overall site is has a fluid main column and a fixed sidebar. The header and footer are fluid. After a cutoff point it will go from 2 column to one, with some additional changes to go to smart phone size. I want one style sheet. Having read several pros and cons, since this is my first responsive site I will be making the desktop design the "default" and want to use media queries to change styles for smaller sizes.
I have several styles that won't change from size to size, and a handful of styles that do change.
Do I go ahead and do my entire style sheet for the desktop, then add the media queries at the bottom? (Before the print styles or after?) Or do I mix the media queries in throughout the style sheet, wherever the "default" style is?
Thanks!
I've been battling this about my head for a while, as well. Some of my sites have one big handheld- or print-only section at the bottom, some have the relevant media queries right after the selectors they affect. As far as I've seen, neither way has any impact on rendering performance one way or the other (if there is one, I haven't perceived it).
My answer is to just use whichever you feel is easier to read. If this is part of a bigger project, consult any team members who also work on the CSS and ask them which they prefer.
As monitor resolutions go up we are left with more and more of horizontal space (width) and less vertical space (most monitory nowadays are 16:9 or 16:10, some even 21:9). As such we require the ability to make long texts more suited for greater width. Newspaper like columns are a growing trend.
How to support those in CMS? I currently have an implementation where text is being put inside s and those divs are then decorated with certain classes for instance the Blueprint CSS system ones (span-5, span-8, etc.)
This works but doesn't offer great user experience. Most RTEs can't display those or required that site CSS is linked in. This brings in all other classes and CSS settings which is not optimal.
I've also implemented the option for the user to create a TEXT content item, which typically holds only one piece of text (one column for instance) and user can add those dynamically to the page (just like adding/removing widgets). The problem with this solution is that almost every paragraph becomes its own text content item the result being that the number of those texts grows and becomes unmanagable.
Please post your options as answers. I am actually looking for quite a comprehensive and innovative way of doing this because neither of the CMSs I tried had this solved (DotNetNuke, BlogEngine.net, Ruby's Refinery CMS, ...)
You have some options available to you without resorting to server-side implementations. Some browsers support a CSS3 directive to provide multiple columns.
#div {
column-count: 2;
}
Properties available via CSS are:
‘column-count’, to determine the number of columns into which the content of the element will flow.
‘column-width’, to describe the optimal width of each column.
‘column-gap’, to set the padding between columns.
‘column-rule’, to define a border between columns.
That's the easiest approach, but does not guarantee the same experience everywhere. There are also JavaScript solutions which can create columns based on text.
Here as an example of one: http://www.csscripting.com/css-multi-column/
So, my recommendation would be for a progressive enhancement approach. Use CSS3 options if availble, JavaScript if not, and fall back to a single wide column otherwise.
More information: http://www.alistapart.com/articles/css3multicolumn
This is definitely something that DotNetNuke can handle, especially with the changes coming in DNN 6.1. The changes are targeted a mobile devices, but that doesn't mean that you can't simply use that functionality to provide different views of content based on the width of the screen available.
I'm trying to present my notecards in a web app style.
I'm not worried about caching, or making it work offline.
I just want it render well in the iOS browser.
Here's the link: http://kaninepete.com/flashcard/review.php?Sec=3
I want it to look the same as if you re-size your browser window to 320x480.
The problem is, it always renders a huge amount of blank space off to the side.
I want to lock the scrolling to only the vertical axis (like flipping through notecards),
but also have the text at a readable size.
You can use CSS media queries to set your template on a certain width/height model. This works well and can adjust specifically for iPhone screens.
As for the font size issue you'll probably need to just spend time testing. With that it's going to require some type of virtual simulator or a real iPhone where you can test the site. I just loaded it up onto my iPhone 4 and I see what you mean about additional space - this is just because of your page size. Try messing with CSS media queries I think you'll find the answer in there.
Here is a very handy Google search to hopefully get you started on the right track. CSS3 has a lot of new features. Many of them geared towards mobile :)
Reading your question again, here's some suggestions based on what I think you're looking for.
Make sure your document is valid HTML before you continue. Safari on iOS supports HTML 5, so I'd suggest targeting that, unless your platform targets something different already.
If you just want it to run well in iOS Safari, then code for that. If you want it to look similarly in other browsers, however, then it may be necessary to look at styles targeting the iOS device (via width/height). See http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript (It seems hacky, but based on some research a week ago, this still seems to be the suggested route.)
You've got CSS that shouldn't be in there if you want to target multiple browsers. overflow:hidden and set pixel widths.
Generally, I'd say you'll want to tweak your markup as well. List items or headers would be much better than just simple breaks.
Maybe I'm just oversimplifying the question, but it looks to me like all you really need to do is wrap each notecard in a div, perhaps giving each div a <div class="notecard_wrapper">. then just attach a stylesheet that specifies the width and height you want for each card.
This page explains Safari's viewport and how to change it. It will probably fix the font size problem and maybe help with the page size.
Basically, Safari by default simulates a screen that's about 900px wide, when it's actually about 300px (so the page appears zoomed out). This makes pages designed for real computers render properly, but for a web app you usually don't want it to zoom the page at all. The viewport tag should let you control that.