Responsive web design is slowly becoming a standard rather than an option. Most analysts will tell you that mobile traffic is overtaking desktop traffic, so your company should cater to smaller screens and slower bandwidth or lose business to competitors. If you’re looking to upgrade your site to the latest responsive design, here are some tips for your development team.
Twitter Bootstrap (sometimes referred to as just “Bootstrap”) makes layout for web development easier than starting from scratch. Bootstrap is a CSS file you can freely download and implement on your site. The CSS file gives you pre-made grids, tables, fonts, and even sprites for any web design. With Bootstrap version three, responsive design is built into its core. Using a meta tag, you can default to a mobile-first design with little coding. The following tag is added to the head section of your HTML:
Web design goes through seasonal trends just like other artistic outlets. Smaller font sizes work with desktop websites, but they don’t work well with smaller screens. With desktop designs, you can use 10-point or 12-point fonts. However, these fonts are too small on smaller screens such as smartphones. In today’s responsive design, you should use 14-point fonts. The smallest size should be a 13-point font style.
Upgrade to HTML5
If you haven’t already taken advantage of HTML 5 and you’re upgrading your site, it’s time to move to the latest in coding. HTML 5 has several new tags that make it much easier to work with mobile phones as well as desktop browsers. For instance, HTML 5 has header and footer tags that automatically denote the top and bottom of your site. HTML 5 also has video and audio tags for media. Overall, HTML 5 makes it much easier to work with structure and layout, which are the basis of site design.
CSS3 Media Queries
While Bootstrap makes it easy for basic responsive design, you might still need some CSS media queries. Media queries are the latest in sizing layouts based on the reader’s screen. Media queries perform a lookup on the screen’s size and apply styles to your elements automatically. You’ll probably need a query for each screen, which means you need more coding, but it’s necessary when you need to work with responsive designs for multiple devices. The following code is an example of a CSS3 media query using Bootstrap styles:
@media (min-width: @screen-sm-min) /* your styles go here */
You can also set your own width using pixel sizes for your screens. The following example is a media query for 800 pixels:
@media screen and (min-width: 600px) /* your styles go here */
Simple Web Design and Less Clutter
Small screens can only fit so many images and text. Simple web design gives users exactly what they want without all the clutter. One trend for responsive web design is minimalistic layouts with few distractions that draw attention away from product or the site’s message. Some sites even use a simple white background with an image or text on the screen. Most site owners include designs just to have a design on the page. With mobile sites, it’s better to have minimal images and add-ons to speed up load times.
Each time the user has to load a new page, you run the risk of losing that reader due to slow performance. With mobile designs, you want as much content on the page without forcing the reader to load the next page. Infinite scroll can be used with both desktop and mobile versions. Infinite scroll loads the next page in the background while the user reads the current page. The user can then scroll down and see a “bottomless” web page that runs faster than clicking “next page” through your content.
If you’re looking for a site redesign, ask your web design guy/gal about these trends and if he uses any of these techniques for your pages. While not all of them are necessary, they do help your site align with the latest in responsive technology and they make it easier to work with code.
It’s not what you sell; it’s how you sell it. Danny Todd, the Cleveland SEO Guy understands that sometimes the best brands get left behind because their web design and SEO has become outdated. The Internet is always changing! Google and the other search engines are always adapting! Keep your brand current and reach Google’s #1 spot.