8 Tips to Create Responsive Web Design
There are various ways to make a website responsive and as this becomes more and more of a necessary practice, we at Mt Dog Media want to make sure we are aware of the most up to date techniques. This way we will always be able to provide our clients with a responsive site that adheres to all the technologies available.
What is Responsive Design?
The most basic idea is that a web site should conform and realign its content to the device that's accessing it. This then allows for a consistent look and design across multiple devices without making the users do any extra work or change their behavior to get to all of the content. Here is an example of how a website on a desktop stacks vertically for the mobile version:
Here are 8 tips to responsive design using a variety of tools!
1. Using Php
The Navigation and logo can be aligned in the header file by adding the following code to the functions.php file.
@meida only screen and (min-width: 768px)
float: left !important;
position: absolute !important; }
float: right !important;
margin-bottom:53m !important; }
2. Using HTML & CSS
Another way to align the nav bar and logo in the header and keep it responsive is as follows:
- Move nav bar into header section with logo (position to relative), remove width if set as this will now inherit from its parent element.
- Adjust padding, margin, height, width as needed for the navigation bar.
- Remove header height restrictions by changing to auto and adding a min-height and adjust the logo to overlap the menu so it is visible.
- Can make menu items hide at certain lengths and appear at certain lengths using hide show features.
Here are a couple ways to make certain elements within the header on your site more responsive:
- Attaching a click event to the mobile menu button using jQuery.
- Animating the height of the navigation by setting rules if it reaches a certain height.
- Removing the style attribute from the nav element.
4. WordPress Specific Options
When using WordPress there are 3 main routes to begin with to get your website set-up to be responsive:
- Use a responsive theme which has features hooked in for easier handling (must have WordPress 3.4). Here are some responsive themes to choose from: Spacious, Himalayas, Accelerate, ColorMag, Ample, Storefront, Vantage, GeneratePress, Fit Coach, Moesia, Sparkling, Zerif Lite,Gridsby, Onetone, Powen, and Stargazer.
- Use a theme switcher which serves up different themes depending on the device used. The pitfall here is that your website is not consistent across multiple devices since each device has a unique theme that fits the dimensions of the device. For example on a desktop you get one theme and when you're on a mobile device you get another theme.
- Use a plugin, such as WPTouch that will serve a custom experience for mobile users but again this will look slightly different than the main site.
5. Responsive Images
In order to ensure your images are responsive you can simply add this code whenever an image is being used:
6. Responsive Grids
Grids are a key component to the layout of your website and therefor making sure they are set-up correctly to be responsive is a must. Here is one way to this:
- Fluid grids are designed in terms of proportions and allow for a layout to be easily resized keeping all the elements in their correct dimensions when the layout is stretched or squeezed.
- Proportions can we calculated by dividing the target element by its context. See image below for how to calculate this.
7. Media Queries
Media queries are a simple way to specify the layout to match a particular width. This allows for layouts to be able to adjust and match every device.
- The most common widths are 480px, 600px, 768px, 900px, 1200px.
8. Things to Avoid
There are many more tricks and tips to use while developing a response site but is worth mentioning a couple things to avoid as they will cause more hassle then they are worth.
- Keep divs simple as overly complex divs can lead to code breaks or override responsive code.
- Only use absolute positioning when absolutely necessary.