Skip to content

5 Tips for Building Modern, Responsive Websites

Designing and building modern websites with jQuery, fixed headers and responsive layouts can be quite daunting. Here are five tips to get you started or possibly out of a jam.

Most of the web development I do is in and for WordPress-based systems. So, a lot of this comes from WordPress theme work. However, the principles translate to other content management systems (CMS) and custom-developed sites.

1. Design it to be mobile first

If you are starting from scratch, rather than modifying an existing theme or website layout, consider a mobile-first responsive design. The principle is quite simple. Rather than designing the site for the desktop first, start with the smallest mobile device, instead. Then, build on that simple CSS with the styling needed by larger and larger devices until you end up with the desktop design.

Why is a mobile-first approach better? First, it’s easier and faster to start with what little CSS is needed to make a page look good on a small screen.  Second, by adding to the CSS complexity as the screen real estate and, typically, device capability increases, you minimize the memory and processor load on those small devices. Why send the full desktop CSS with even more rules to a tiny phone?

Of course, there is a caveat about this methodology. If you have to support old browsers such as Internet Explorer 6, 7 or 8, that do not understand CSS3 media selectors, then you will need to supplement them with the missing functionality via JavaScript such as Respond.js. If that does not work, then it may be too early to go mobile first.

If you are ready to dive into building a site mobile first, check out Rachel McCollin’s article for more details.

2. Leverage an existing instance of jQuery

Many CMS, including WordPress, use jQuery, a JavaScript library that provides easy-to-use functions for working with HTML content, events, animations, etc. without having to worry about browser-specific differences. In order to realize some of the features seen in modern website design, jQuery is a good choice. If your CMS already uses, you may as well join in since it will already be loaded in the browser.

However, you may run into a problem where you are unable to access the jQuery object. This is a common occurrence when trying to use the jQuery alias ‘$( )’ to access an HTML element while working with WordPress themes, for example. You end up receiving an error such as “$ is not a function”.

Two ways to work around what appears to be WordPress hijacking jQuery is to either reference jQuery( ) directly, instead of using $( ) or wrapping the whole thing. I use the latter so that the JavaScript code inside still looks like normal jQuery.

In your script block, use the following function for all of your jQuery code:

jQuery( function($) {
  // Your code goes here and can use $( ) in the expected manner

} );

The function above provides the ‘$’ shortcut to all the code within it, so you can use that shortcut normally.

3. Make scrolling more obvious when using a fixed header

Having a fixed header for the site logo, navigation, search box and other elements is a good improvement to overall web design. However, a fixed header can make it less obvious to the reader if or when the page has been scrolled. This is especially true if the header is the same color as the main part of the page.

One site that Jill and I worked on was of the latter scenario. In order to have a really clean look, the main background of the page is white, including the fixed header. This looks great when the page is short or when it first loads. However, if the reader scrolls the page and stops between lines of text, it is really difficult to tell how far down you are. This problem is even worse on mobile systems, and even some desktop systems nowadays, that don’t display scroll bars or make them disappear after a short period of time.

An elegant hint that can be added to help with this issue is to have a drop shadow appear whenever the page has been scrolled any distance from the top.

To do this, first give your header an ID, such as “masthead” in the example below.

<header id="masthead">
	// Your header and navigation elements go here
</header>

Style it as follows:

#masthead {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999; /* Keep it above the rest of the page */
	width: 100%;
	min-height: 70px; /* Set to your desired header height */
	/* Add any other styles you want for your header */
}

Then, add the following function to check the scroll position of the page when it is loaded as well as when it is scrolled by the reader. Both situations must be covered because the page could scroll itself by way of a local anchor in the URL (e.g., to jump to a subsection of the page when it is loaded).

jQuery( function($) {
	window.onload = function() {
		// Check the position when the page loads
		checkWindowPos();
		// Hook into the scroll event too
		$( window ).scroll( checkWindowPos );
	};

	function checkWindowPos() {
		if( $( window ).scrollTop() > 0 )
			$( '#masthead' ).addClass( 'has-scrolled' );
		else
			$( '#masthead' ).removeClass( 'has-scrolled' );
	}
} );

The last step is to add the styling for when the page has been scrolled. As can be seen in the checkWindowPos function, the header will have the style “has-scrolled” added to it when the page is scrolled. Here is an example of how you can style it for the drop shadow. Adjust to your taste.

#masthead.has-scrolled {
	border-bottom: solid 1px #f0f0f0;
	-moz-box-shadow: 0 0 10px #f0f0f0;
	-webkit-box-shadow: 0 0 10px #f0f0f0;
	box-shadow: 0 0 10px #ccc;
}

We added a bottom border to the header as a backup of sorts for those old browsers that do not understand any of the box shadow properties.

You can see this effect in action at the Temnos site.

4. Offset local anchors when using a fixed header

Another hurdle to using a fixed header is that the browser is not aware of its impact to the vertical spacing of things on the page. This becomes an issue when using local anchors such as <a name=”jump-here”>. For example, you might want to be able to jump to a particular headings within the page.

Normally, when the page scrolls down to the local anchor, the position of the anchor will be at the top of the viewable area, called the view port. However, if your fixed header is 100 pixels high, the local anchor will likely end up completely underneath the header.

To rectify this, we need a little workaround that provides some padding above the elements that will act as local anchors, but not create extraneous visual white space. In other words, we need some space that does not appear to be space. Here is the CSS hack for that.

h2[id], h3[id] {
	margin-top: -80px;
	padding-top: 80px;
}

This will add some otherwise-invisible space above h2 and h3 headings that contain an ID. Adjust the selector to fix the elements that you will be using as local anchors and change the pixel values so that the anchor will appear comfortably below your fixed header.

You can see this in action when jumping down to the Authoring & Curation Platforms section of the Temnos solution page.

5. Test responsive designs with Firefox

I have seen more than my share of poorly-executed responsive design. Don’t become a part of this statistic. Testing your design is very easy. In fact, Firefox already has a built-in tool to see what your page will look like at various dimensions. To access it, go to the Tools menu, then the Web Developer submenu and select Responsive Design View.

The drop down list at the top contains a few dimensions to get started with. Select different ones and see how your page responds. Click the Rotate button to transition between portrait and landscape orientations.

You can grab the sides of the frame to change it to arbitrary dimensions. The name in the drop down list will change to “Custom” and, if you open the list, you can click on “Add Preset” to save it to the list. I have added a couple dozen different dimensions this way to cover various smartphones and tablets.

 

Have more tips and tools for responsive design? Share them in the comments.

(Featured image credit: infocux Technologies/Flickr)

Comments

Tell us what you're thinking. Leave a comment.

There are no comments on this post.

Add a Comment

Fill in the form and submit it. Comments are moderated and may not appear to everyone immediately.

Bear