Responsive web design techniques and best practices

Get Started
1

Hi reader,

I’m new to this forum and chose this forum in particular to hopefully call on some experts in responsive web design and HTML compatibility gurus.

I am studying a Master of Digital Design at the moment and am doing a short paper on reviewing Ethan Marcotte’s book on Responsive Web Design. When informing my course convenor about this, he said to be careful with responsive web design as it can have bloated images and be a problem for bandwidth / download times. He said to look into other techniques of responsive web design or alternatives.

After searching terms relating to responsive web design techniques, I found Steven Bradley’s article on 3 types of solutions for web images which lead me to [URL=“http://www.zeldman.com/2012/05/17/editor-vs-constituencies/”]Jeffery Zeldman’s article on the lightness of HTML5 and [URL=“http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/”]Mat Marquis’s article on responsive images. I can’t help think of the overall complexity of developing web sites currently. As a teacher of web design and a self confessed ‘designer’ as opposed to a ‘developer’ - I might be considered a ‘front end developer’ however. I find the current state of HTML and CSS overly complex, convoluted and unnecessarily difficult to deal with (referring to versions and browser compatibility and not how to write mark-up and or syntax). How does one learn, let alone teach web design and coding without feeling confused as to what mark-up and CSS version to use? The further I look into versions, compatibility and best practice of web design and dev, I end up utterly dumbfounded as to what the future holds and where to focus developing my skills and knowledge. Should I stick to XHTML or move to HTML5? Is it too early to start establishing HTML5 for all projects? What CSS version is best for compatibility, 2 or 3? When will HTML5 be fully implemented? Why does IE have so many web standards and compatibility issues? Is responsive web design really the way to go for all web sites? What about device detection and using separate mobile sites – when should these be used?

I guess that my questions are being asked by a lot of other people and this is just how things are. I do believe however that web standards and web browsers are making things unnecessarily convoluted and complicated for web designers / developers. Surely things can be consolidated and simplified?

What I would like is perhaps some pointers to good books or articles relating to the issues I have said to hopefully save me endless hours of net surfing and to stop my head exploding.

Thanks for reading and I appreciate your help.
Zubanoid

2

Hi Zubanoid. Welcome to the forums. :slight_smile:

There are some good questions here.

You don’t have to get too caught up in the images issue. They are quite responsive if you give them % widths. The only issue is with download sizes for mobiles users, and to help with this, some people have come up with nice solutions (like those you linked to). But it’s still a developing area, so we have to “watch this space”, as they say.

I find the current state of HTML and CSS overly complex, convoluted and unnecessarily difficult to deal with (referring to versions and browser compatibility and not how to write mark-up and or syntax).

Actually, HTML and CSS are quite simple in nature, so don’t get too worried. They also have really good browser support these days in all latest browsers, so things are a lot better than they once were.

How does one learn, let alone teach web design and coding without feeling confused as to what mark-up and CSS version to use?

That’s easy. The current standards are HTML 4.01 (or XHTML, if you prefer) and CSS 2.1. Simple as that.

CSS3 and HTML5 are mostly still on the drawing board. Browsers are starting to implement bits of them, and so you can use these bits and pieces, while realizing that older browsers don’t support them or providing fallbacks of some sort. But really, you can do so much with CSS2 and HTML4 that all this concern over support for coming technologies is not a valid source of concern.

I end up utterly dumbfounded as to what the future holds and where to focus developing my skills and knowledge.

The future holds HTML5 and CSS3, but it will be a good many years before browsers fully support them. And before that happens, they need to be officially released. Play with them and learn about them, but the reliable tools for current use are CSS2 and HTML4, and these are well supported by all browsers.

When will HTML5 be fully implemented?

I believe it will be released officially in 2014, and will be “fully implemented” officially some time in the 2020s.

Why does IE have so many web standards and compatibility issues?

Because Microsoft fell asleep at the wheel 10 years ago and has never recovered from that. Their browser release policies still suck, and unfortunately we are stuck with that. Just urge people to switch to Chrome, and hopefully M$ will go out of business one day.

Is responsive web design really the way to go for all web sites?

No, not at all. Some sites—especially large ones—are better off with a separate mobile site. And responsive design is just a neat “new thing” that people are enjoying right now. Whether it will last or not is not yet known. Some mobile users prefer to see the desktop site on their browser. At least on the iPhone, it is easy to double tap a region to zoom in and out. So, while responsive design is kind of cool right now and a buzzword, it’s not necessary at all. Don’t be bullied into using it if you don’t want to. I find it fun, but on some sites I don’t bother, as it isn’t stricty needed.

What about device detection and using separate mobile sites – when should these be used?

Mainly on really big sites like news sites.

I do believe however that web standards and web browsers are making things unnecessarily convoluted and complicated for web designers / developers. Surely things can be consolidated and simplified?

I don’t think that’s really true. If you learn basic, good practices with HTML and CSS, you can be pretty confident that all modern browsers will render them nicely. The problems usually occur when people don’t know how to code properly or try to get way too fancy and push their designs beyond the current limits of HTML and CSS.

3

Thanks Ralph! You just clarified quite a lot for me. I guess I’m getting ahead of myself with some of these issues.

I am trying to basically predict or learn certain techniques and best practice that will be in place in about 2 years so that I’m not studying something now that will be somewhat irrelevant in the future… I guess because i’m focusing on HTML5 and CSS3 I’m probably not going to get anywhere until it’s close to implementation.

Could you recommend any good books on web design/development? I am after something that addresses issues of selecting the best methods for making websites. For example: static or CMS, open source CMS or commercial CMS, jQuery or not, responsive or mobile site… and so on. I have tried having a look but there are so many and I don’t want to waste time and money on finding something worth reading.

Thanks again Ralph. By the way, I’m up in Brisbane (the backwards state)
Cheers
Bill

4

The thing about HTML5 and CSS3 is that they really are additions to the current strains of HTML and CSS, rather than a revolution. The current technologies will be around for the forseeable future, so it’s a good idea to be well grounded in them. So anything you learn about them won’t go out of date. :slight_smile:

I am after something that addresses issues of selecting the best methods for making websites. For example: static or CMS, open source CMS or commercial CMS, jQuery or not, responsive or mobile site… and so on. I have tried having a look but there are so many and I don’t want to waste time and money on finding something worth reading.

Those are pretty wide-ranging topics for a book. You’ll find a lot of discussions on those kinds of issues in forums. My take on them would be:

  1. static or CMS? It depends on the site. CMSes are very handy these days, allowing clients to manage their own sites. But many clients aren’t interested in doing that, so I still think there’s a place for static sites—such as little brochure sites that don’t need to change often.

  2. open source CMS or commercial CMS? Again, there’s no right answer. It’s up to you, really. If an open source CMS does what you need, then it may be silly to pay for one. But then again, if the open source one is harder to learn and/or more work to set up, there’s a good reason to buy one instead. For example, I prefer to use ExpressionEngine (which costs money) because it’s easy to work with, and the time saved in working with the code might actually make the project cheaper for the client in the end (who will have to pay for the extra time you spend working on the open source CMS). That’s just an example …

  3. jQuery or not? Again, it depends. jQuery is very handy, but sometimes it’s huge overkill for a small effect here or there. Remember that it requires a significant download, which slows page load and may chew up user bandwidth, so use it only where it’s really necessary. But sometimes it is necessary (unless you are a JS wizz and can write leaner code yourself).

  4. responsive or mobile site? Or neither. :slight_smile: Again, it depend, and no one can answer that for you, because it depends on the project. It takes extra work to do these, so the first consideration is whether or not the client is willing to pay for them. My experience so far has been that most of them don’t … but in a few years that may change.

I’m up in Brisbane (the backwards state)

Aw, Brisbane’s a loverly place. :slight_smile: Melbourne is too cold for me. :frowning:

5

I guess me having never studied web coding before and basically just using whatever seems to work hasn’t really taught me much other than there are a lot of methods and technology available to build websites. From my point of view, more of a designer than coder I look at finding efficient and simple ways of doing things. The immediacy of using Illustrator or Photoshop to knock up a design has led me to think that the code side of making a site should be just as straight forward and I keep questioning that, but maybe that’s just the nature of programming?

I have found over the past few years things changing too quickly for me to keep up and half the time students will find things and ask how to do something when I haven’t seen that method before. Other web designers would say, ah use Joomla, it’s great, so I will go and use Joomla to make sites only to find designing then making templates a nightmare then, to add to it realising Joomla needs to be updated regularly or it will get hacked (which has happened to me) and then plug ins won’t work on the new version and so on… Then it’s onto Wordpress which has similar issues… I then think, well sod it, I’m just going to use an existing template! But then that’s a cop-out for a designer to use a template!? What would the client know I think, but then would I seriously put the site on my resume or examples for freelance work, probably not. I also had a go at Textpattern, which is straight forward enough but it has it’s limitations. I have also mucked around with JQuery slider and parallax scrolling which has issues of download size and compatibility…

Now I have come across responsive web design and Ethan Marcotte’s book is great and there are some good ideas and techniques to be learnt from him but he is using HTML5! So… right now I feel like I’m going around in circles. I am learning a lot but web code just seems like pandoras box to me. Perhaps this is just a learning curve I am going through! Ah… I hope that clarity comes soon!

I am tempted to buy some A Book Apart books but afraid I will just get even more confused! The joys of study…

Melbourne should move itself up to Brisbane I think!

6

It sounds to me like you aren’t going about this in a systematic enough way, but diving in mid stream without a plan. For all the options out there, the web starts with HTML, which is very simple. It’s a simple markup language to tell a browser what’s a heading and what’s a paragraph, for example. So learn about those basic element tags and what they’re for. Then find out about how CSS can be used to organize and style those elements. Then find out a bit about how JS can add a layer of functionality to your page, and how PHP and other server side languages can add more functionality. Without knowing a bit about what’s behind websites, it’s not surprising that it’s all a cloud of confusion and unknowing.

It’s like wanting to fix your car yourself. Unless you study how the machine works, you’ll be resorting to any old tool to do any old thing, use sticky tape to fix things up, throw in some sugar and salt to see what happens, and then wonder why the car blows black smoke and lurches to the end of the street before dying. There are no shortcuts, I’m afraid. If you don’t want to learn code, then team up with people who have. That’s my approach now. Stick to what you’re good at. There is a rhyme and reason to all this code and the various technologies on offer. they all have their place, but they have to be learned. :slight_smile:

7

Hehe… I know what you mean! Just like me to just dive in and expect things to be intuitive and easy… pfft. I think I might stick to design :slight_smile:

I do think as a designer it’s important to know about various methods of building websites so that in the design phase you can know what can and can’t be done. Otherwise the designer will be stuck in the familiar formats. For example, I am looking at a designers approach to starting a website design by looking at screen sizes and determining the main or most used device for the website by looking at the target audience. So far, from Ethan Marcotte’s book I have the following list of screen sizes:

320 pixels: For small screen devices, like phones, held in portrait mode.
480 pixels: For small screen devices, like phones, held in landscape mode.
600 pixels: Smaller tablets, like the Amazon Kindle (600×800) and Barnes & Noble Nook (600×1024), held in portrait mode.
768 pixels: Ten-inch tablets like the iPad (768×1024) held in portrait mode.
1024 pixels: Tablets like the iPad (1024×768) held in landscape mode, as well as certain laptop, netbook, and desktop displays.
1200 pixels: For widescreen displays, primarily laptop and desktop browsers.

This list is good but doesn’t take into account browser safe areas. I have yet to find a definitive list of screen sizes that includes browser safe area which is frustrating. I mean, 960 is pretty common what about mobile device safe areas and all the other tablets around now…

My theory for starting a website design begins at the base screen size, the adapted to other sizes - depending on the method used for building the site: responsive, fixed, sub-domain etc. You can then choose other key screen sizes to adapt the initial design to suit the other sizes. I’m also trying to teach people how to present a design to a developer so the developer doesn’t have to spend ages fixing the design to make it work… What do you think?

Sorry for asking so many questions! I do appreciate your help :slight_smile: I’ll come to Melb and buy you a beer some day!

8

Definitely agree there. It can be a real problem if a graphic designer doesn’t understand the nature of the web and coding considerations.

My theory for starting a website design begins at the base screen size, the adapted to other sizes - depending on the method used for building the site: responsive, fixed, sub-domain etc…

Rather than worry about the sizes of various devices, I prefer to focus on the site layout itself, and decide at what point the layout needs to change based on the content. For example, if you have a video with text floated beside it, at some point the text beside will get too narrow and it’s better to drop it underneath. So I set just a few @media rules for situations like that, rather than try to plan a different layout for each device. Seems much more practical to me.

PS: ask as many questions as you like! And thanks for the beer offer. :slight_smile: (I won’t hold you to it, though.)

9

For me I always learn best by example and practice. Those books only help as a reference, but nowadays you can find what you want on-line and in great forums such as this one. I started coded responsive, because it’s a big selling point on the websites I produce. I love coding. I terms of learning, practice makes perfect and you should not concern yourself with too many things.

Take a look at Adaptive Images, and a [URL=“http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/”]Responsive Drop down menu’s. It’s all pretty neat. I hate to say it, but like @ralph_m; mentioned, you’d find yourself using jQuery snippets and various code segments to do your work. The best way is to learn JS and do it the right way, but as this is a complicated process many overlook it.

Get your hands dirty and enjoy the cool ride!