Basics of Responsive WordPress Design

How we configure WordPress SEO plugin by Yoast
March 18, 2015
Show all

Basics of Responsive WordPress Design

Responsive Web Design by Nice & Easy Web Design

History

When I first started in web design we would code our sites in tables and use fix widths for each attribute. There was a time where if we wanted rounded corners it would require 1 table 3 trs and 9 tds to have rounded edges. We have come along way since then, today “border-radius:” does that for us. In the mid 2000s the industry shifted from table to table-less, div based websites. This allowed for websites to be faster, more reactive to css, and in short order div based websites became the standard. The first time I heard about responsive websites was in 2007 when a coworker was playing with widths, floats and clears. It didn’t really sink in. It wasn’t until I got my first smartphone that had a decent screen size that I understood the need if not the concept of responsive web design.

Whats the Point?

Well the point of responsive web design is write the code once, and for it to respond to and look different on screen sizes.

So how does responsive web design work?

Example: The follow code sets the width of the to 90%, removes the float, and centers the div if the document is smaller than 300 pixels wide:

/* Desktop */


#container
{
max-width:1200px;
margin:0 auto;
}

#header{
width:100%;
margin:15px 0 0 0;
}

#content {
width:69%;
margin:0 1% 0 0;
float:left;
}

#sidebar{
width:30%;
float:left;
}

#footer{
width:100%%;
margin:0 0 15px 0;
}

/* 320px Responsive */

@media screen and (max-width: 320px) {
#container
{
max-width:90%;
margin:0 auto;
}

#header{
width:100%;
margin:15px 0 0 0;
}

#content {
width:100%;
float:none;
}

#sidebar{
width:100%;
float:none;
}

#footer{
width:100%%;
margin:0 0 15px 0;
}

}

Responsive WordPress Design

So how does this concept apply to WordPress? Well in my opinion one of the greatest thing about WordPress is the consistency it has added to websites. It’s safe to say that most WordPress sites are made up of 5 sections: Container, Header, Content, Sidebar and Footer. We hope these tips help you better understand Responsive WordPress Web Design. If you have an existing website and are looking for help with Responsive WordPress Web Design project then we would love to talk to you. Nice & Easy Web Design has a lot of experience with both converting existing websites to be responsive and with ground up responsive web design projects. Contact us if you have any responsive web design questions, or if you are ready to start your project today!

Tips for Responsive WordPress Web Design.

  • Container

    container

    Container Section – Your container section will contain all 4 of the other sections. This div is normally where we set the max-width of the website, traditionally 960 was used as a width but 1200 has become popular with the increase in desktop screen size. This is also where we set the margin for the top and bottoms of the page. If done correctly this should be the only layout dependent fixed width div on the website.

  • Header

    header

    Header – Your header section is going to contain at least 3 things, your logo, navigation and contact information. Its important that you make sure your logo scales properly and isn’t distorted on mobile sizes, your phone number’s font size, if left stock, will probably be small on mobile devices and should be brought up.

  • Content

    main-content

    Main Content Section – The Main Content section will contain the editable sections from within WordPress. If the page contains a sidebar most likely it will be between 60% and 80%. If you are converting a non responsive to responsive web design make sure that you don’t get caught use both percentages and fix widths. A common mistake I see is a dev will mark the content section at 60% and then give it a padding of 15px or 20px, This normally looks great on the desktop but messes up on mobile. A better solution is to do something like width:79% and margin-right:1%.

  • Sidebar

    sidebar

    Sidebar Section – Your sidebar / aside section normally contains supporting content, things like contact forms, address and sidebar navigation to help prioritize relevant pages. Somewhere between 40% and 15% wide your side bar, if set up properly and scaled down will show up underneath your main content on mobile. Common things to look out for are contact forms and phone numbers breaking lines when shrunk down.

  • Footer

    footer

    Footer Section – Your footer will normally contain several columns that when broken down will expand to full width. Common things to look out for are maps, search bars, and addresses. Maps tend to get stuck on the screen if you don’t give people a way to scroll around them when they hit the main section. Search forms tend to have a min-width on them and are best set to 90%. Addresses tend to get shushed and loose their formatting when shrunk down.



Responsive Web Design by Nice & Easy Web Design


About Nice & Easy Web Design

Nice & Easy Web Design Logo

Nice and Easy Web Design is a Web Design and Search Engine Optimization company located in Washington but practices all over the US. We have been making websites for the last 8 years and throughout that time we have been happy to see both the Web Design and Search Engine Optimization worlds evolve into the flourishing industries they are today.

*Our goal is to make beautiful, SEO Friendly, and Responsive websites.

Contact us to get started today!