I am trying to write examples of how a truly resolution independent website would be written if you only had to worry about modern, standards-compliant browsers.
This is a grid calendar that collapses into a list when the browser window shrinks beyond a certain point. The idea is to create (without javascript if possible) a usable calendar that is usable from a 23″ LCD panel to an iPhone/iPod Touch without changing the HTML. Webkit and Gecko based mobile browsers are powerful enough today to be able to run full web pages, so there is no really good reason to code a separate website for them. Part of the theory is to make these webpages usable on old (640×480 or 800×600) screens as a nice side effect (ignoring the fact that most computers running these older screens don’t have compatible modern browsers for them).
My list of issues with this demo:
- I hate those spacer divs at the beginning. Is there a way to align the first row of divs (CSS table cells) to the right?
- There are double borders on all of the inner gridlines. I haven’t found a good way to remove those.
- When you expand the browser window past a certain point (I have a 1920×1080 display and it is just before full screen) the grid stops expanding. Not sure why. Not a huge issue, but one that bugs me.
- If a user were looking at the list version of the page, they would probably expect it to start at the current date. I don’t see any good way to do this outside of javascript, although this is probably a fine place to use it. I am using the time HTML5 tag with the datetime attribute, so it would be pretty simple javascript. I don’t think it is possible, but it would be awesome if you could use a css selector that would look for the time tag with the datetime attribute that contained the current date.
- This doesn’t work in IE. I didn’t expect it to work in < IE8, but I was disappointed to see that IE9 does not support the media queries fully yet. Hopefully this will be fixed before final release.
- I am not sure my usage of HTML5 tags is the way they were intended, especially the header and time tags. If anyone can point me to something that corrects my usage, I would appreciate it.
Update:
In my theme redesign, I used media queries to make it scalable from a desktop widescreen to an iPhone.
What’s wrong with good ol’ HTML tables for tabular data? You know, you can go backwards for small screen sizes with
table, tbody, tr, td { display: block; }
just as easy, and you don’t throw away the semantics of a calendar table for nothing. In this situation, you also don’t have “empty spacer divs” but empty table cells that are there for a purpose.
I thought, that the grid stoping expanding was a feature, before I read the remark. Actually, having the content stop scaling at some large point (e.g., via max-width) is a good idea for almost all data. (Of course, if you start to add *more months* for screens above, say, 1600px width, that’s a different topic.)
your table stops growing because a table only uses as much space as it needs … try a longer event description – as you can see the table will grow
media-query for iphone will not work in this way because iOS on iphone4 still uses a browser resolution of “480x320px” but in higher density and so the “new” iPad does still 1024×768
you can test it here: http://www.webkrauts.de/beispiele/advent2011/lauke/demo/test1-ohne-meta.html
May be there might be a solution with mod_rewrite to add an anchor or doing some server side stuff.but with css only there is no opinion.
May be there might be a solution with mod_rewrite to add an anchor or doing some server side stuff.but with css only there is no opinion.
This is in essence a 7 column grid.
And in that essence you could use a push-x (1-6) (and pull-x) class on the first of elements to define where it should go.
To fix your width problem, you can add {margin:auto; width:100%;} to the calendar div, then you could still set a max width if you wanted as suggested above.
As for use of HTML 5 tags, instead of using header you should probably use an h1 (as it’s within an article). It’s only really worth using a header when there’s something else pre-article-body to go in the header (such as meta-data)
For going to todays date in list view, you could always ID it (server-side) and have a jump-to link at the top that’s hidden in full view
Hope this helps, I really like the idea here, will be interested to see it progress.
Feel free to ask for any more help, tweet me @mstrutt_co_uk
Wow, it looks like this page got linked to by Smashing Magazine’s Twitter feed. This was an experiment in my spare time from two years ago, so it is more of a way to see what might be done rather than a best practice.
@Manuel Strehl: In relation to using table tags vs. divs, I suppose it comes down to how you want to handle the semantic part of this. My thought is that the date information is not by its nature tabular, but rather linear. As such, it might be best to express it as such in the html. However, this is just my perspective, and I can totally understand going another way on it.
@Andreas Prietzel: Thanks for the clarification on table behavior. The iPhone 4 with the Retinal display was released a month after I wrote this demo, so it certainly could use some updating in that regard.
@Gerrit: Server-side could be a solution, however this was intended as a purely client-side solution, preferably only using CSS. If I were trying to implement this for a client, I would certainly use server-side or Javascript.
@Michael Strutt: Thanks for the comments. When I implemented this two years ago, I was quite unclear on how HTML5 tags ought to be used. I appreciate the clarification.
Thanks for the comments! I hope that they help others in implementing similar solutions.
Any thoughts about making this into a WordPress plugin?
I haven’t used wordpress enough to know how this might be applicable in such a case. This was more designed as a tech demo — an idea as to how a responsive calendar might be designed — rather than a specific implementation. If you (or someone else) puts together such a plugin, please leave a comment with a link and I will link to the page.
Nice solution. I really like how it changes format when the view narrows to a phone width.
To remove the double grid lines, you can set the border for only the top and left side of each day. If you desire to add the missing border back in on the right side, you can add it to #Calendar. Doesn’t prevent double-grid lines in the way you intended, but it works and looks nice.