Recently I started testing how proportional scaling of bigger layouts would work in reality and if it makes any sense. It’s possible when using EM units and then changing body’s font-size when viewport’s height grows above certain point. Basically that means, that I have to change only one or two css properties between @media queries which are targeting larger screen sizes.
The reason why I started doing this, is that I wanted to rethink my current approach to responsive design and try something which would make the process at least a bit easier.
Warning: You’ll need to view my demo on at least 24" or 27" monitor with 1920×1200 resolution or bigger. Otherwise you won’t see this method in full effect and it might be harder to understand the benefits.
There seems to be some confusion about these terms and what they mean, so here’s my thoughts on the subject and few links to back them up. I’m usually not very keen when it comes to debating over what something is called, but this time I wanted to make it clear, as I hear this question quite often.
Resposive design is a subset of adaptive design. Responsive design is fluid layout only, while adaptive design is fluid layout combined with progressive enhancement.
“Responsive design” is a subset of a larger concept which is called “Adaptive design.” When talking about responsive we refer to the layout only (Ethan Marcotte, fluid grids, flexible images & media queries).
“Adaptive design” on the other hand includes much more than just fluid layout. In practice it means the same thing as progressive enhancement, which means in short, that we aim to deliver the best possible experience to the widest possible audience. Also: “Adaptive design” shouldn’t be mixed with “Adaptive layout” which is a completely different thing.
I have been intrigued by the idea of making a typographic scale out of a musical scale that would not only be very readable, but also aesthetically pleasing. This whole idea started after the launch of my new site. At first, I ignored to see it, but weeks later I started to notice that the textual content of the site is actually pretty harsh for the eyes and the reading experience isn’t that great.
You can read it—I’m quite sure of that—but the longer you browse the content, the more your eyes start to hurt. Literally. One reason for this is the contrast between the text and the background, but there’s also more to it than just that, so I started wondering:
How could I improve it?
How to make building of responsive typography easier?
Can typography look good and be readable on so wide range of devices?
Are there any patterns where I could base my decisions on?
I created another responsive jQuery plugin during the Christmas holidays. It’s called TinyNav and it can convert <ul> or <ol> based navigation to a dropdown for small screen.
TinyNav.js is a tiny jQuery plugin (304 bytes minified and gzipped) that converts <ul> and <ol> navigations to a select dropdowns for small screen. It also automatically selects the current page and adds selected="selected" for that item.”
While you can find two dozen blog posts and articles about various image replacement techniques using Google, I couldn’t find any article that would help when you want the replacement to be fluid.
If the term “image replacement” is unknown to you, it basically means that we replace some content on a page—usually text—with an image.
I’m not a huge fan of using image replacements in the first place, but it’s often necessary to do so. One quite popular example is a logo. Logos—when used on a Web page—are usually images that have text inside them. If we want that text content to be visible to search engines, screen readers and text based browsers (Elinks, Lynx, ...) we need to use some kind of image replacement technique.
I created this plugin while I were developing my own site and decided few days ago to release it as an open source version. Its basic function is to create responsive slideshow using images inside a container. The interesting thing is, that this is actually the very first JavaScript plugin I’ve done and that’s why I thought that I should write down some notes while I’m at it.
Since you are here, you have probably noticed that there’s a new design which I have been working on for some time now. I wanted to focus on the content and make something much more simple. I also wanted my site to work with various devices from smartphones to TV’s. That’s why I used the so called “Mobile First” technique and made the whole site responsive from about 240px and up.
Designing mobile first forces you to think more about the content. It’s also easier to get the site working on large number of devices, even on those that don’t support Media Queries.
As a starting point for the work I used the 320 and up boilerplate, but I ended up changing almost everything to suit my own way of working (if you don’t know, the 320 and up is a boilerplate that prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point). I’m still using small parts of it like the folder structure, print styles and JavaScript helpers for iPhone, but that’s about it.
When you are using tiny screen’s stylesheet as the starting point you have to design the mobile version first and build up from there progressively. The best thing in that approach is that it’s relatively easy to get the site working with large number of devices, even on devices that don’t support Media Queries. This “reversed” approach also forces you to think more about the content.
