It
is a new year, and time once again to tackle on a new project. This time, I
will be taking on a larger, more long-term project regarding Responsive User
Interface Design of a webpage. Now, what is Responsive User Interface Design
(or Responsive Web Design), you ask? According to this article, it
is "the concept of developing a website design in a manner, that helps the
layout to get changed according to the user’s computer screen resolution."
Why, you ask? Well, if you think about it, just a few years ago, the only thing
that webpages were being viewed on were computer screens, and although screens
came in various sizes, even the smallest ones were at least 11 or 12 inches in
length (this is before netbooks became popular). But within the past decade,
portability has become a major desirability in consumer electronics, and the
smartphones and netbooks were born as answers to this distress call. In even more
recent history, just two years ago in 2010, the first iPad was launched,
bringing another portable electronic product type to the market-- tablets. It's
difficult to fathom that the iPad has only been around for two years, given its
enormous popularity today, which is shared by countless other tablets out
there. Casting a large shadow over its similarly-sized, underpowered, and less
portable counterpart the netbook, tablet computers have dominated the market of
mid-sized computing devices with its 7- to 10-inch screen size range. Therefore
we can say that the three largest markets for computers-- and therefore website
viewing-- are desktops/laptops, tablets, and smartphones. Now, these three
categories of computers all have extremely different screen sizes, from small
(2-4 inches on smartphones) to medium (7-10 inches on tablets) to large (12-27+
inches on desktops/laptops). Viewing the same webpage on different screen sizes
is bound to be difficult if they are laid out the same way across all of them.
Users would have to do a lot of scrolling and zooming on smartphones and so
forth in order to navigate around the page-- and this is what people do
have to do on most webpages, because the pages aren't designed with Responsive
Web Design. Oh, what a pain!
But
that is why my team and I will be exploring and implementing Responsive User
Interfaces for our webpages, and hopefully you will begin to do so too! Just
look at the examples shown in the article linked to above, and visit those
sites and play around with the width of your browser to watch the magic of
Responsive Web Design as the layout automatically shifts around nicely. Try
them on your tablet or smartphone, if you've got one, and compare it to all the
sites that aren't using Responsive Web Design. You'll wish that all sites would
use it!
To
get started with Responsive Web Design, there are two things that you will need
to incorporate with your web site: HTML5 and CSS3. HTML is the language from
which the core of all webpage structures are built upon, and HTML5 is the
latest version. The following four links are those that I found the most useful
in learning about and using HTML5.
The first is an
indispensable reference for website building-- the W3Schools site for HTML5.
This site has everything from detailed descriptions, tutorials, examples, and
even sandboxes for trying out the various components.
This next
link provides a concise and visual explanation to what HTML5 is, and what it's
all about. It is very useful as a reference as well as a starting point for
beginners of HTML5.
Next
comes an intro to some of the new features of HTML5, and is a good starting
point to learning what things are possible with HTML5. It also has some
examples and provides links to other sites, which can be used to learn more
about the topic.
Finally,
a very handy resource with any programming language is a cheat sheet, and HTML5
is no exception. This cheat sheet is one that I find to be concise and
sufficient. Paired with the W3Schools resource, using HTML5 is easy, as well as
efficient.
The
other essential component for building websites is styling, and the standard
way of doing that is with Cascading Style Sheets, or CSS. As with HTML,
standards and features of CSS have changed over the years, and the latest
standard for CSS is CSS3.
As with HTML5, my
main reference of choice for CSS3 is the W3Schools site, providing useful
explanations, examples, and opportunities to test-drive features.
To get started with
learning about and using CSS3, the following site provides a couple of simple
examples to walk you through some basic features of CSS3. A good place to get a
feel for CSS3.
The next site
provides 10 techniques using CSS3. Some of these techniques are a bit advanced,
but if you are looking to spruce up your website and really make it look
professional, you will probably need to use these features.
Finally-- as you can
probably guess-- is a cheat sheet for CSS3. Now, there are a lot of CSS3 cheat
sheets out there, but most of them are lengthy, hard to understand, and
basically, I would not be able to use them. However, this cheat sheet is an
interesting one (it's actually a "Click Chart") as it provides visual
examples (along with the code for it), clear descriptions, and includes only
the features of CSS3 that you are likely to (or want to) use.
With
HTML5 and CSS3 covered, the only thing left to learn about is-- well, the
Responsive Web Design, of course. The following web sites offer introductions,
examples, and tutorials to get you on your way to creating Responsive User
Interfaces for your web site.
The first site
provides a "beginner's guide" to learning about Responsive Web
Design, giving a rather in-depth look inside. The article is lengthy, but gives
a very good overview of the subject.
The next two sites go
hand-in-hand, the former describing three essential components for Responsive
Design, and the latter going in detail on one of these components, Media
Queries, which is a CSS3 feature. This is what allows the page to figure out
what size the browser is, therefore allowing the layout to be set and scaled
accordingly.
The last link is to
another article detailing in great depth the concept of Responsive Web Design,
how it works, and gives tips on how to design a Responsive site. It also
provides MANY example sites and explains the features that make them work
nicely. Lengthy, but a very good read.
These
twelve web sites are sure to give you an overview of not only Responsive Web
Design, but also HTML5 and CSS3, which are essential core elements for creating
a Responsively Designed web page. Read through these articles and use these
references, and you'll be cranking out awesome webpages in no time!
No comments:
Post a Comment