{"id":3364,"date":"2013-04-08T16:33:52","date_gmt":"2013-04-08T16:33:52","guid":{"rendered":"http:\/\/www.crimsondesigns.com\/blog\/?p=3364"},"modified":"2025-03-05T18:47:18","modified_gmt":"2025-03-05T18:47:18","slug":"responsive-web-design-trickles-into-new-hampshire","status":"publish","type":"post","link":"https:\/\/www.crimsondesigns.com\/blog\/responsive-web-design-trickles-into-new-hampshire\/","title":{"rendered":"Responsive Web Design Trickles into New Hampshire"},"content":{"rendered":"<p>Are you a small business owner thinking about updating your website? Then you should consider utilizing <strong>Responsive Web Design<\/strong>.<\/p>\n<p><span class=\"special\">Responsive Web Design<\/span> is one of those hot web design topics right now. It is a web design approach used to provide an optimal viewing experience across a wide range of devices &#8211; from a <strong>desktop computer<\/strong> to a <strong>cell phone.<\/strong><\/p>\n<p class=\"centerAlign\"><a href=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/04\/computers-and-mobile-devices2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3367\" src=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/04\/computers-and-mobile-devices2.jpg\" alt=\"computers and mobile devices\" width=\"400\" height=\"235\" srcset=\"https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/04\/computers-and-mobile-devices2.jpg 400w, https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/04\/computers-and-mobile-devices2-300x176.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/a><\/p>\n<p>A <span class=\"special\">Responsive Website<\/span> automatically changes to fit the device you&#8217;re reading it on. If you&#8217;re reading this blog post on a desktop computer, you can see it in action. Simply adjust the size of\u00a0your <strong>web browser.<\/strong> You will see that the layout adapts to the new width of the browser.<br \/>\n<!--more--><\/p>\n<p>Having a website that adjusts its content automatically will likely enhance your visitors&#8217; experience. You don&#8217;t want mobile device users to have to pinch, zoom and scroll just to find out if they&#8217;ve come to the right place.<\/p>\n<h3>Responsive Websites in New Hampshire<\/h3>\n<p>Right now, it seems that responsive websites are still few and far between in New Hampshire so you still have plenty of time to decide if it is right for your business.<\/p>\n<p>Here are some examples<span class=\"special\">:<\/span><\/p>\n<ul>\n<li><a href=\"http:\/\/www.raggedmountainresort.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ragged Mountain Resort<\/a><\/li>\n<li><a href=\"http:\/\/www.seacoastrephotography.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Seacoast Real Estate Photography<\/a><\/li>\n<li><a href=\"http:\/\/law.unh.edu\/\" target=\"_blank\" rel=\"noopener noreferrer\">University of New Hampshire &#8211; School of Law<\/a><\/li>\n<\/ul>\n<p>In the examples below, you can see how the headers of the websites spread out to fill the space provided in wide browsers (such as on desktop computers).<\/p>\n<p><a href=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/04\/nh-responsive-web-design1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3384\" src=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/04\/nh-responsive-web-design1.jpg\" alt=\"NH Responsive web design examples\" width=\"550\" height=\"353\" srcset=\"https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/04\/nh-responsive-web-design1.jpg 550w, https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/04\/nh-responsive-web-design1-300x193.jpg 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><\/p>\n<p>Here&#8217;s how the top sections of the same three websites look when the browser space is reduced (such as on mobile phones):<\/p>\n<p><a href=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/04\/new-hampshire-responsive-web-design1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3385\" src=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/04\/new-hampshire-responsive-web-design1.jpg\" alt=\"New Hampshire responsive web design on mobile devices\" width=\"550\" height=\"248\" srcset=\"https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/04\/new-hampshire-responsive-web-design1.jpg 550w, https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/04\/new-hampshire-responsive-web-design1-300x135.jpg 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><\/p>\n<p>Each website becomes a long slim one where the visitor scrolls down to see the rest of the content. (Scrolling up and down is much easier for the mobile visitor than pinching and zooming.)\u00a0You can expect websites designed this way to become more and more popular, especially since more people are accessing the internet from\u00a0their mobile devices than from their desktops now.<\/p>\n<h3>Pros and Cons of Responsive Web Design<\/h3>\n<p>One of the main advantages of <span class=\"special\">Responsive Web Design<\/span> is that business owners no longer need to create a separate mobile website. Having one business website with a flexible layout is easier and less expensive to maintain.<\/p>\n<p>One of the disadvantages of <span class=\"special\">Responsive Web Design<\/span> is that it is a bit more complex and time-consuming to initially design.\u00a0Also, the website load time is increased slightly because this kind of programming generally requires more code.<\/p>\n<h3>Responsive Web Design Navigation<\/h3>\n<p>Navigation is probably the trickiest aspect to responsive design since\u00a0mobile users don&#8217;t have a clickable mouse to pinpoint tiny links. They must point to areas on the screen with their fingers or thumbs, which are much less precise.<\/p>\n<p><strong>Responsive Web Designers<\/strong> usually try to make navigation easier for mobile users by adding more space around menu links, or by replacing the links with buttons. You will also notice that <strong>Responsive Web Designers<\/strong> often change the navigation menu to a drop down menu for their mobile visitors (to accommodate other content on the screen). Mobile visitors can reveal the full menu by tapping on it with a finger.<\/p>\n<h4>UNH School of Law Website Navigation Example<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3373\" src=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/04\/navigation-menu.gif\" alt=\"navigation menu\" width=\"417\" height=\"71\" \/><\/p>\n<p>In the above example from the UNH School of Law website, the links on the far right of the navigation bar floated under the top row (creating two rows) when the size of the browser was reduced.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3374 alignright\" src=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2013\/04\/responsive-menu.gif\" alt=\"responsive menu\" width=\"200\" height=\"400\" \/><\/p>\n<p>In the example on the right, the navigation bar has changed into a drop down menu (for mobile phone users).<\/p>\n<p>These visitors can tap on the menu to see the list of links.<\/p>\n<p>As you can see, web designers and business owners alike have noticed that consumers are now using their cell phones for much more than talking. They are\u00a0moving toward mobile devices to access the internet and make purchases.<\/p>\n<p>See\u00a0<a href=\"http:\/\/conversionxl.com\/mobile-internet-users-and-their-shopping-behavior\/\" target=\"_blank\" rel=\"noopener noreferrer\">What You Need to Know About Mobile Internet Users and Their Shopping Behavior<\/a>\u00a0to learn more.<\/p>\n<p>If you are still unsure about whether a responsive website can make your website visitor&#8217;s experience more enjoyable and productive, grab an iPad or a cell phone and explore some of the responsive websites mentioned in this blog post. Then visit your own website and compare.\u00a0You may discover that responsive web design makes perfect sense for your next website.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you a small business owner thinking about updating your website? Then you should consider utilizing Responsive Web Design. It is a web design approach used to provide an optimal viewing experience across a wide range of<br \/>\ndevices \u2013 from a desktop computer to a cell phone. Right now, it seems that responsive websites are still few and far between in New Hampshire so you still have plenty of time to decide if it is right for your business.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,8,9],"tags":[136,139,140,145,182],"class_list":{"0":"post-3364","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-small-business","7":"category-web-browsers","8":"category-web-design","9":"tag-mobile-devices","10":"tag-mobile-friendly-web-design","11":"tag-mobile-internet-users","12":"tag-new-hampshire-small-business","13":"tag-responsive-web-design","14":"cat-3-id","15":"cat-8-id","16":"cat-9-id"},"_links":{"self":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=3364"}],"version-history":[{"count":1,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3364\/revisions"}],"predecessor-version":[{"id":7754,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3364\/revisions\/7754"}],"wp:attachment":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=3364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=3364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=3364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}