{"id":2007,"date":"2016-08-04T18:23:54","date_gmt":"2016-08-04T18:23:54","guid":{"rendered":"http:\/\/cssreset.com\/?p=2007"},"modified":"2016-08-04T18:23:54","modified_gmt":"2016-08-04T18:23:54","slug":"tips-for-flawless-responsive-design","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/tips-for-flawless-responsive-design\/","title":{"rendered":"Tips for Flawless Responsive Design"},"content":{"rendered":"

1. Start with a clean design<\/strong><\/p>\n

There’s not a lot of space on mobile devices for inessential or complicated features. Starting off with a clean design will help your users to make sure they can clearly understand and navigate the content of your site.<\/p>\n

2. Use a mobile-first design<\/strong><\/p>\n

Because mobile view ports have such limited real estate, it’s so much easier to design for them first and then work your way up to a desktop design rather than vice versa. It makes much more sense to smart small and expand your design than to start with a desktop design and have to figure out how to squeeze all of your content and HTML elements onto a 400px screen.<\/p>\n

3. Don’t overcomplicate your navigation<\/strong><\/p>\n

One of the trickiest things about designing for mobile is how to handle the navigation menu. Many designers choose to have the menu collapse into what’s called a “hamburger icon” (see below), which is great, but sometimes those can be glitchy or (especially if they use JavaScript) they can even slow down your site, so you want to to stick with a pure CSS solution<\/a> for your hamburger menu. Additionally, try to only include the essentials in your navigation menu — too many links will look cluttered on a tiny screen.<\/p>\n

\"hamburger\"<\/p>\n

Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

1. Start with a clean design<\/p>\n

There’s not a lot of space on mobile devices for inessential or complicated features. Starting off with a clean design will help your users to make sure they can clearly understand and navigate the content […]<\/p>\n

Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2007"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2007"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2007\/revisions"}],"predecessor-version":[{"id":2009,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2007\/revisions\/2009"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}