Upload
anthony-scoble
View
72
Download
0
Embed Size (px)
Citation preview
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.