1) SIMPLE LAYOUT – This may seem like a given, but keeping the layout and HTML code as simple as possible will go a long way. But what should you keep and what should go? Below is a few techniques you should keep and a few you should discard.
a. Keep
i. HTML5
ii. Reset stylesheet
iii. Simple and semantic layout
iv. Simple navigation and menus
b. Discard
i. Intricate divs
ii. Inline styles
iii. Flash
iv. Redundant content
2) CSS MEDIA QUERIES – My previous post explained what CSS Media Queries are, so if you’re unsure about these then you should probably read that post first by clicking here. Essentially, CSS media queries let you set unique styles for different sizes, so you might load an alternative stylesheet or add specific styles depending on the current width of the website.
3) DEFINE THE BREAKPOINTS – There are 6 breakpoints you should consider, but only 3 of these are essential. Below is my guide to the essential and non-essential breakpoints.
a. Essential
i. ii. 768px – Bigger tablets and desktops
b. Non-Essential (but nice to have)
i. 768px & 1024 – Wide desktop
4) LINEARISE – It is essential you set up a rule in your low resolutions style sheet to line up all your content in one column. This isn’t as hard as it sounds. Simply override the width of every column bloc in your mobile stylesheet , and if needed apply specific rules to fix the design part that may be broken.
5) REMOVE NON-ESSENTIAL CONTENT – Again, this is simpler than it actually sounds. All you need to do is apply a .not_mobile class to the websites non-essential elements. But what is essential and what is non-essential content?
a. Essential
i. Navigation
ii. Main content
iii. Contact form
b. Non-Essential
i. Ads
ii. Archives
iii. Related content
If you are still struggling getting to grips with responsive web design then simply complete the contact form on the right or contact us directly and we can help build you the responsive website you’re looking for.
