This semester, we've learned the nuts and bolts of web design: HTML, CSS, JavaScript, jQuery, AJAX, and more. You also recall that, early in the semester, we had a class discussion about about design-what makes good design, what makes bad design, and why. This falls generally under the umbrella of usability, or user-centered design, which means, according to usability.gov designing your website so that users can effectively, efficiently and satisfactorily achieve their goals. We return to that topic today, which is particularly important as we prepare for testing your websites.
Usability isn't an easy thing to master. There's no magical formula that you can follow to make your site user-friendly. There are, however, some guidelines that will make your site much easier for your users. These rules are based off of user interface design (such as interactive applications), but can easily be adapted to
Responsive web design is certainly one of those things that falls under the umbrella of usability, but is so important that it deserves its own section. Making a website "responsive" means designing your website so that it is adaptable and accessible to users on any device.
Think of the multitude of devices out there today: computers with large-screen monitors, big laptops, small laptops, tablets, e-readers, phones, and many more. If users from any of these devices cannot get the information or achieve the tasks they need, your website loses a lot of effectiveness. The below chart shows the growth of mobile phone use in accessing the Web.
And that's just phones.
Well, it's much easier to show what a non-responsive website looks like. For example, the CS110 Schedule page is not responsive:
You'll see that at smaller screen widths, the user cannot see the whole schedule at once, which is a problem in and of itself. But you'll also see that because the menu on the side is fixed, it overlaps the menu when you try to scroll sideways to see the rest of the schedule. The spigotdesign.com site, however, is designed to be responsive. Try visiting the site and re-sizing your browser. The following image shows what the site looks like on a computer, on a tablet, and on a mobile phone.
Elements have been adjusted in size, moved, and even taken away entirely to adapt for different screen sizes. There are really no hard-and-fast rules for making a website responsive. Much of the process of responsive web design involves designing for big screens, testing for different screen widths, and then adjusting your site accordingly. There are, however, some helpful guidelines for designing for smaller screens.
In order to adapt your website to different screen widths, you first must determine your screen's width, then apply certain rules to
your screen under those circumstances. This is done with a media query. A media query is like an if
statement in
JavaScript: if your screen is within a certain range, then apply the CSS rules.
Resize your brower window (by clicking and dragging with your mouse) to see the block change color.
.colorblock { width: 100%; max-width: 850px; height: 30px; background-color: red; } @media screen and (max-width: 700px) { .colorblock { background-color: blue; } } @media screen and (max-width: 500px) { .colorblock { background-color: green; } }
Notice that:
In the example above, 700px and 500px become special numbers. In the web design world, these are called breakpoints, since they are screen widths where things on the page change. In general, it is good to have as few breakpoints as possible - it can be confusing if things are constantly changing when you resize your screen, and difficult to maintain. Thereis a lot of debate in the web design world about the best breakpoints for your media queries, but, generally, safe bets are 768px and 480px, the screen widths of an iPad and an iPhone.
On another note, you'll notice that the div itself is responsive and resizes along with the screen. This is because we gave it a 100% width and a max-width of the largest pixel size we want our element to be. This is a great trick for making images responsive; if you check, you'll see that all the images on this page are. Percentage widths are one of your biggest tools in making a site responsive; instead of fixed-pixel widths, use percentages of the screen size. Other tricks include:
display: none
display: inline
or
display: inline-block
to display: block
Besides that, just try things! You'll never know what works until you spend some time finding out what doesn't first.
Here's a responsive version of the CS110 schedule. Try resizing your browser, then read the explanation.
Here's a fancier responsive version, which automatically generates day labels in the narrow version.
While shrinking your browser down to 768px and 480px will give you a pretty good idea of what your website will look like on an iPhone and iPad, it's not always a completely accurate representation. The best way to see how your site looks is to get your hands on one of these devices, or to use a simulator. The best iOS simulator is actually made by Apple, and comes with Xcode, Apple's free software development tool for Mac users. It can be found in the Mac App Store.
In order to use the Xcode device simulator, first launch the program. Then under Xcode > Open developer tool launch the iOS Simulator. This will bring up a simulation iPhone, which you can use exactly like a normal iPhone.
If you would like to see your website on an iPad or another iOS device, you can change it under Hardware > Device and select the device you wish.
You're probably thinking by now, Wow, this sounds like a lot of code! But don't be afraid! There are tons of frameworks on the Web that make creating responsive websites easy. Most of these are built on something called a fluid grid, which, in most cases, takes care of the responsiveness for you. One of my favorites, and an industry standard, is Bootstrap, a framework built by two software developers at Twitter. If you plan on continuing in web design after this class, or if you're just interested, check it out.