Responsive Design Begins with the URL

Responsive Design Begins with the URL

The BBC’s Programmes website which was released in 2007 , has pages for over 1.6 million episodes, including content, clips , galleries , character profiles ,episode guides and much more all rich in information, plus newly created responsive home pages which represent the brand as users are using mobile phones over tablet or desktops is considerably increasing.

So making pages responsive is the best way to improve the user experience.

URLs The basic foundation of creating a huge website that will last forever is to get the right information architecture in the right place. To achieve this first choose a name that relates to your business. Create a user friendly URL and determine its structure, Know your data objects hierarchy and how they fit together.

Remember trusted links are shareable and work forever also Cool URIs don’t change.

Let’s take an example of a clear information architecture that defines the URL scheme.

Where the black lines are direct links, while the red lines are shortcuts that we’ll add later.

Content is king The user journey should remains the same with each devices so hiding any piece on information on smaller screens is not acceptable.

Images Creating a responsive images is a challenge for all of us, so using a technique which saves a lot of bandwidth on initial page loading can greatly improves the response times for users.

Similar technique is used on BBC’s responsive News pages and is available in the open-source Imager.js.

CSS Maintain a large website requires a CSS strategy,you can follow the BEM methodology to create reusable blocks of CSS. All objects are built to be touchfirst, but not touch-dependent.

<div class="grid bpw2-thirteen-twentyfourths bpe-thirteen-twentyfourths grid-bounded"> Limitations Above all responsive design still has some limitations. We always looking for a native solution for element queries to fix a few minor icon-sizing issues without the need for polyfills.

Improvements such as CSS grid layout will enable us to interlace modules at different screen sizes.

Roughly same-sized images should ideally get the same-sized icons.

Conclusion Now when you have built a website with quality content, clear information architecture, well defined URL’s you can enjoy the benefits for free:     

Permanence Stability Optimization for search engines (linkability) Accessibility Shareability

So responsive website design and URL structure together can play an important role meeting your business goals. iMediadesign is an full- service web design and development agency placed at toronto, that helps brand create unique identity and successful marketing campaigns.