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 touch-

first, 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.