Responsive Web Design took a big step forward on June 19, when a highly influential W3C Working Group published a draft recommendation stating that an additional slate of media queries should be incorporated into web browsers. The CSS Working Group's proposal would enable browsers to render web design layouts in a much more flexible manner, based on factors such as screen size, color depth, and device orientation. Media queries consist of a media type (ex. screen or print), combined with defining...
We are going to continue on with our designing a responsive website tutorial where we have already learned about the background images, the site's navigation and the content. This week we’re going to work on adding a little more content to our homepage. At this point you should have a site that looks similar to this. You should have a full-screen background image that changes in size to match the viewers screen resolution, a main navigation bar, and a little blurb that will grab the attention of the viewer...
Now that we’ve got our background images squared away and set to break themselves down nicely across various devices and screen resolutions we can look in to populating our home page with some content. Let’s begin with our header. I always like using a separate file for all the things that will stay uniform throughout my site, header, logo, navigation, etc. That way if I need to make a minor edit down the road I just have to edit the header file, which is then pulled in to every page with a simple PHP include...
There was a time when Netscape and Internet Explorer were the only browsers a web developer had to worry about. But in those days, a website primarily consisted of some text, a few images and some hyperlinks. Remember, tables were still all the rage back then. Nowadays a user may have a few different browsers to choose from, multiple computers running different screen resolutions, a tablet device and a smartphone. And websites, they are a bit more complex than the good old static days. So to meet the needs...