Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
1st October 2012

Responsive design part 2

Responsive Design part 2 tackles navigation, typography, images and objects and CSS3 Media Queries.

Responsive design part 2

Read Responsive design part 1

Friendly Navigation

Navigation is arguably one of the most important elements of a webpage. With confusing or difficult navigation, the user may leave with a bad experience, or simply not even try. This is why it’s essential to make sure that navigation provides the best experience for those on large screens just as much as it does those on smaller ones.
On larger screens, navigation that lies out horizontally is most common for a reason: it’s a great space saver vertically, and is easy to scan. Vertical navigation is best for sub-navigation, whether in a sidebar or dropdown. As space becomes limited by width, we must alter the navigation so that it fits within a thinner area, but is also user-friendly. So, horizontal navigation will often collapse into stacked button-like navigation when a browser size becomes thinner. There are several other things to consider when collapsing and expanding navigation.
Many smaller screens may be touchscreens, so use more white space (more touch-friendly buttons) – or switch to a drop-down select menu.
Hover effects are often irrelevant in touchscreens or limited mobile devices, so be sure to rearrange drop-down navigation accordingly or simply navigation where possible. Also, no need for decorative hover effects on smaller devices either.
For both large and small screens, consider usability for various input devices when designing navigation. For instance, users may be using a remote control (eg TV) to navigate, or the tiniest buttons (eg feature phone).
Navigation can surely be creative, and creative solutions are needed for responsive design. Navigation should be fairly simple in terms of use, and effects limited for simpler devices. There’s no need to put extra strain on old or incapable devices just for visual effects.

Typography Size and Format

One big issue noticed early on in responsive design, and in just dealing with flexible designs in general, was the question of what the ‘perfect’ content width was. If a webpage with a large screen would have one piece of content span the entire width, it could surely become difficult to read quickly. On very small screens, we have the opposite issue, how few words per line can content have before legibility is sacrificed?
The ballpark figure for good readability on a screen is where text spans 10-15 words per line. Of course, depending on the actual content, language and so on, this number will vary, but the concept remains the same. For the modern computer screen size, this usually equates to about 600px in width, give or take. We cannot rely on exact numbers though, or on any particular formula for content width according to screen size. Instead, all we can do is what’s practical as possible and use techniques for maintaining the ‘content out’ practice.
Below are a few general guidelines and best practices that are already being implemented throughout the web-design community in terms of content design:

• Use legible typography, and allow extra white space for more detailed fonts, or for serif fonts. Follow basic typography best practices such as adhering to the baseline rhythm to help readability at any screen size
• Be creative with the use of drop-caps, intro or first-line text and so on. However, be sure that on smaller screens these added details do not interfere too much with readability within the limited space.

To make dealing with typography easier, there are a number of JavaScript and CSS techniques one can use to alter font details, size, and so on. However, be sure to consider compatibility with these extras if what’s being implemented is necessary for the user experience.

Responsive design part 2

The 51bits website beautifully demonstrates how typography should work in responsive design.

Images and Objects

Images have also received a lot of attention early on in the responsive design movement, and for good reason. They are a large part of our web experience, and just about any type of website relies on imagery. Likewise, the same applies to HTML objects – usually video.
We can make images and other block-level page elements responsive too. This doesn’t only apply to making sure they are flexible in width, but also to be able to auto-crop or change proportions when necessary. Shorter images may be best for smaller screens, while our larger screens can take advantage of more vertical space for taller images. Images relevant to content, icons for navigation, or even logo versions may need to be replaced with different versions, depending on the space available. Or, perhaps any website dependent on block-level elements (think a portfolio website based on imagery) will need to change the layout entirely.
Excess imagery or video may want to drop out altogether for smaller devices to save space and loading time (there may be less processing power in smaller devices, especially older ones). For the video, images or other media that is kept on the page, it’s a good idea to switch to lower-resolution versions based on screen size, or on detection of older devices as well.

Mobile Apps vs Responsive Websites

When in doubt, or otherwise when in need of inspiration, take a look through some of the mobile applications available. These are built initially for the mobile experience, and if we can create our responsive websites to collapse down to be as user-friendly as these, then we’ve made some real progress. One downside of apps is that the user has to download them separately, and while at times apps are very practical, most of the time it’d be far easier to be able to have the same experience while mobile web browsing.
This is why we should always be thinking of ways to adopt the UI design techniques of mobile applications into our webpages at smaller resolutions. This may mean using more icons, drawing inspiration for navigation, or using similar design and coding techniques for buttons, forms, content display, scrolling and so on.

CSS3 Media Queries

Figuring out the best layouts and design-related details may be the most challenging part of creating a responsive website, but when it’s finally done, all that’s left is making it all happen for the live site. Fortunately with some innovative thinking, most flexible and responsive design is possible with fully compatible HTML and CSS. The release of CSS3 media queries has had a huge impact on responsive design coding so far.
CSS3 media queries are what have made it to the forefront of what we as designers and developers can do to go beyond standard flexible designs with HTML and CSS, and add a whole new level of responsiveness to any website.
With CSS3 media queries, we can easily target specific devices such as tablets of smartphones, or better yet for responsive design, a range of widths and/or capabilities. Perhaps the most common use is declaring certain CSS rules for only a certain range in widths:

001 /* When the maximum viewing area is 600px; this CSS will only apply to viewing areas thinner than 600px. */
002 
003 @media screen and (max-width: 600px) { 004 body {
005 font-size: .85em;
006 } 
007 
008 .specificclass{
009 width: 100px;
010 float: left;
011 }
012 }
013 
014 /* When the minimum viewing area is 1200px; this CSS will only apply to viewing areas 1200px or wider. */
015 
016 @media screen and (min-width: 1200px) {
017 body {
018 font-size: 1.75em;
019 }
020 
021 .specificclass{
022 width: 250px;
023 float: left;
024 }
025 }
026 
027 /* It’s possible to set a range too; this CSS will only apply to viewing areas between 800px and 1200px. */
028 
029 @media screen and (min-width: 800px) and (max-width: 1200px) {
030 body {
031 font-size: 1em;
032 }
033 
034 .specificclass{
035 width: 200px;
036 float: left;
037 }
038 }

The syntax is pretty self-explanatory and easy to follow. Just begin with ‘@media’, specify screen or print, and include whatever other queries the styles should abide by. Then, plug in whatever CSS is normally applied for that range in size. Any CSS rule applied outside a media query can be used for any screen size; properties such as backgrounds, global font styles and so on shouldn’t be re-declared in specific media queries, but rather globally for code re-use. For a great beginner and more detailed guide on CSS3 media queries, check out bit.ly/hHglt0.

Below are a few more examples of queries that are useful for responsive design, with the same general syntax as above:

001 /* Layouts may change if screen is in landscape or portrait proportions. */
(orientation:portrait) or 
(orientation:landscape)
002 
003 /* Specify by the actual physical device screen width, rather than just the current browser size. */
004 (max-device-width: 768px) or (min- device-width: 240px)

Different stylesheets may also be referenced via CSS3 media queries, right within the link tag:

001 link rel=”stylesheet” media=”screen and (orientation:portrait)” href=”portrait.css”

While CSS3 media queries are definitely beneficial to use in responsive web design, we must always remember that some older browsers still don’t support them! We can use JavaScript to add this functionality to an extent, and create flexible layouts via CSS2.1 as much as possible, but ultimately we must also consider graceful degradation for responsive design too. Smashing Magazine has a great and in-depth article on just that: bit.ly/pOOqKZ.

Scripting for Added Features

It’s very important not to rely on JavaScript, or any other additional scripting to that extent, for the core functionality of a webpage, especially an adaptive one. Responsive design isn’t only about adjusting to various screen sizes, but also about adjusting for the capability of whatever device – be it desktop, tablet or smartphone – will be used to view the page. There are many scripts that, if the technology is supported, can increase usability and work as an aid to responsive design. However, for those devices that have browsers old enough that they don’t support JavaScript, or for device browsers that have it turned off, the webpage should still be 100 per cent user-friendly and adequately responsive.
However, there are a few ways we can use scripting on top of the core functionality of a responsive design, such as:

• Add further responsive/CSS3 compatibility for unsupported versions of browsers
• Help to alter content and media sizes, and to detect browser capabilities to add efficiency for less capable devices
• Add additional features that may be useful, just for fun, or provide visual bonuses for supported browsers on more capable devices.

Responsive design part 2

A jQuery plugin for gives flexibility to chnage the size of a font

There are plenty of scripts appearing all over the community that can add to our responsive designs and make implementing them a much easier aspect of our work.
Below are a few examples of scripts, complete with links that can be used to improve all of our responsive designs:

Response JS – A jQuery plug-in that allows for more flexible images, video and added efficiency based on device capabilities (bit.ly/off0ck)
FitText – A JavaScript for ‘inflating’ web type. Adds flexibility to content by changing font size depending on screen size (bit.ly/khGdEc)
css-mediaqueries.js – Helps make some versions of browsers that don’t support CSS3 natively work with it (bit.ly/b1CO5P
Convert Menu to Dropdown – A jQuery plug-in that converts any list menu into a select dropdown with smaller browser widths (bit.ly/z4CyDy)
Masonry – A jQuery plug-in that can help layouts by stacking block-level elements accordingly dependent on screen size (bit.ly/j3Z7le)
FitVid.js – A simple jQuery plug-in for responsive video embeds (bit.ly/nid1yz)
Elastislide – A jQuery plug-in for a responsive carousel (bit.ly/pYt151)
Responsive-Images – A JS script that automatically creates responsive images by adjusting not only proportion but controls download size and adds efficiency for less
capable browsers (bit.ly/g09bGo)

Conclusion

Responsive web design is the future of the web, there is no doubt about that, but it is also the ‘now’ of the web. We as designers must learn these techniques and begin implementing them today, whether that means starting with our own personal websites or our very next project. As much as it’s useful today to create a responsive website, it will be that much more necessary in just a few short years’ time, if not before.
With all of the resources available already though, responsive design doesn’t have to be time consuming, nor does it have to be frustrating. We have so many boilerplates, frameworks, scripts, snippets and tools at our fingertips that we can – and should – take complete advantage of. Beyond that, we can further innovate new trends and techniques ourselves with leading-edge creative thinking. This is just the beginning of responsive design; we can only imagine the new devices and technologies that will come about in years to come, and how this new strategy will evolve.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://www.masterkom.net Jasa Pembuatan Web

      Oh my goodness! Amazingarticle dude! Thank you|Thank you so much, However I am going through issues with your RSS. I don’t know why I am unable to subscribe to it. Is there anyone else getting identical RSS problems? Anyone who| knows the solution will you kindly respond? Thanks!!

    • http://www.webdesigner.uk.com Web Designer – Paul

      Responsive web design is the future for designers creating websites for clients and personal projects.
      I’m starting to include RWD techniques more and more in my projects, and find the Web Designer Mag a great place to learn and guide me through this process.
      Keep up the great work.