Web Design | 6 Trends in Modern HTML5 Responsive Designs

No Comments

Responsive web design - Picture showing responsiveness and all devices.

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

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:

 

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

 

Bigger Fonts

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.

 

Infinite Scrolling

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.

Protected by Copyscape Web Plagiarism Check

Picture of the Cleveland Seo Guy - Danny ToddIt’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.

Subscribe to Our Newsletter!

Fields marked with an * are required

About us and this blog

We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

Request a free quote

We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

More from our blog

See all posts
 

Leave a Comment