Responsive Website Design

Consistent Veiwing On All Devices

Responsive Website Design

Consistent Veiwing On All Devices





With the ever-increasing use of mobile devices, it has become necessary to design on-line content that appears on multiple screen sizes and a myriad of devices with varying form factors. The challenge involves designing sites that adapt to fit a variety of different resolutions and use the available screen real estate effectively. Previously, these goals have proven to be time-consuming. Hand-coded media queries and complex mathematical calculations were often required to deliver on-line presentations with fluid layouts to reach the widest audiences.

CSS3 media queries - now a standard specification in HTML5 allow designers to dynamically alter the design and layout of a web page in order to deliver an optimal user experience from a single set of HTML, CSS and JavaScript files. The techniques involve in leveraging this powerful capability of CSS also facilitate the change of images, altering navigation style and a whole lot more dynamically.

Adobe Dreamweaver CS6 (2012) introduces the Fluid Grid Layout feature to help make designing for multiple screens easier. Prior to Adobe CS6 release, an open-source toolkit (framework) called Bootstrap from Twitter has been widely used to facilitate the creation of responsive wed design. Within the design and development communities Twitter Bootstrap is considered the most watched and forked repository in GitHub. A wide variety of websites and mobile apps use this framework. rwd



Responsive web design is essentially based on a fluid grid layout. All containers on the page have their widths defined in percentages - meaning that they are completely based on the viewport rather than the initial containing block. A liquid layout will move in and out when you resize your browser window. Thus, all siblings or nested entities within the container are adjusted correspondingly.


The Stakeholder

If you're an owner or stakeholder in a website that still employs separate code base for various connecting devices (smart-phone, tablet,desktop, TV etc.etc.) you have a decision to make about your entire website strategy. It's no longer a question of if you need a redesign, but how soon to redeploy your current site implementing RWD. Thus leverage the new specifications in HTML5 and CSS3 to render consistently across various devices. Creating separate website templates and code for phones, smart phones and tablets is completely unnecessary, unproductive notwithstanding cumbersome. Responsive Web Design (RWD) allows your website to respond and display nicely on the device that it is being displayed on. Consequently ending up with a site that provides the same user experience across devices, screen resolutions and varying form factors.


It Is The Future


If the aforementioned is not convincing enough how about this fact - there are over 6 billion( and counting) mobile users out there and current trend suggests that smaller screen devices are going to be the browsing 'norm' within the next 2-3 years! Doing nothing is not an option.



The main features of Responsive Web Design (RWD) are:

  • Optimized Display on All Smart Phones
  • Optimized Display on Tablet Devices
  • Optimized Display on Desktops
  • Optimized User Experience
  • Manage the Same Code Base Files for all Devices

Why you should not ignore Responsive Web Design (RWD) :

As of last Tuesday 21st April 2015, Google started using mobile-friendliness as a ranking attribute in their search engine results, rewarding web sites that are fully optimized for mobile platforms - i.e have been designed using responsive design construct in their implementation.
Google says the effect of this change will be profound. It is therefore very important for any business owner with a web site to respond accordingly. These changes will make it easier for mobile users to find relevant, high-quality search results that are optimized for their devices, creating a better search experience.

    If you don't know whether your website is mobile friendly or not, here is what you need to do:
  • Take the Mobile-Friendly Test to see how your website stacks up here
  • Check out Google’s guide to mobile-friendly websites here


Google recommends responsive web design as the industry best practice for websites. A responsive website seamlessly adapts itself to whichever device it is being viewed from. If your web site isn't responsive you could find that it has already started to fall down Google's rankings.





Our Most Recent Projects

Please do note that the clients listed below all came to us as a result of personal recommendations. They very much new nothing about the web let alone the fundamental technologies involved. One thing the knew for certain was that it is where everything is happening. They needed someone to take their ideas and make it happened so to speak on the web - And that's what we do here at ToromeTech.

Click on the vertical tabs on each client 's section to see how the sites were designed

Website Design - Project1

    Salient Features: Click on tabs to see content:

Ezeogu Publication

Preserving Igbo Heritage

Their Objectives:

We are here to take you on a journey to discover and appreciate not only the Igbo language but also the culture to which it gives expression

  • To contribute our bit to the crusade for the preservation of Igbo language and culture
  • To bring the Igbo language to all Igbo children growing up in the Diaspora who are eager to connect with their heritage language
  • To provide a tool and to be of assistance to anyone (Igbo and non-Igbo alike) who has a genuine desire and interest in learning to read, write and speak the Igbo language
  • To create awareness on the current state of the Igbo language and the need to preserve it for the future generations

The Brief

A Complete Responsive Design

General theme should exude subtle colours and large expanse of margins and paddings that depict an uncluttered interface

  • Published Books will be sold on site
  • An interactive flash design game will be played on the site on a subscription basis
  • A dynamic content page showing Igbo phrases and their English equivalent
  • A dynamic picture gallery page

The Design Process

From Wire-frames To HTML5

In the design process, the business imperative as narrated by the client is of the essence. This is why they've come to us. Our design methodology is encapsulated in these four phases: Discovery - Design - Deployment - Delivery. Each of these consulting phases, defines a clear step in the process of taking the solution of a business problem from concept into production. The client is alway in tune with what is going on. This facilitate a smooth transfer of control after completion.

  • A wire-frame mock-up of the interface is the starting point
  • Basic graphic assets are added into mocked design to improve visual for client to get a handle
  • intended graphic assets from client are then modified and edited in Photoshop to attain proper dimensions and resolution as per design
  • Responsive design is implemented with a skeleton backbone of components from Bootstrap framework
  • Various CSS3 style sheets are created to render the HTML pages with the desire effects
  • Java-script files are created to drive the front-end interactions
  • PHP script files are created to power the back-end applications

Progressive Development

Client's Input At All stages

To effectively bring the client in to the design and development processes, a common venue had to be established. The most convenient and suitable location was the internet. thus, a private area was setup where client can log in and see how development was progressing. More importantly here,they could query issues they were not happy with and the development team can respond for them to see the immediate effect of their suggestions -

    Advantages
  • Very convenient for both parties
  • Significantly reduce glitches and typos
  • improved client satisfaction

Delivery

Deployment

This final stage of the design cycle was rather straight forward because it is invariably dependent on the preceding phases. Thus it was merely transferring the entire package from it testing platform on to a production one. Here, the databases for managing both the on-line book selling functionality and administering access to the on line Interactive Audio Application were implemented and tested. Paypal was the obvious choice for completing the e-commerce section due to it simple and intuitive modules.

Final Features

  • Site with interface as envisaged by client and then some
  • Java-script providing intuitive interactive elements at the front-end
  • Publish Book can be bought on site
  • Interactive - Audio Media can be played on site with access control
  • Client has total control of back-end activities













Website Design - Project2

    Salient Features: Click on tabs to see content:

Fabu Publishers

Publishing Books With Moral Values

Their Objectives:

Fabu Publishers is a Foundational Publishing house based in London. We have developed into a leading publisher of historical, cultural, educational and religious publications to name but a few. Our books focus particularly on fostering a better world order and promoting self-transformation. Our themes are Self-awakening irrespective of your denomination. Foundational thoughts are not merely academic but real food for thought for the discerning.

The Brief

A Complete Responsive Design & Branding

General theme should exude a bright colour specified by client

  • A dynamic book display gallery on home page
  • E- commerce integration
  • Published Books will be sold on site
  • A means of subscribing to weekly news letter from home page
  • A dynamic detailed content page showing main attributes for each book
  • A blog and news section

The Design Process

From Wireframes To HTML5

Our design methodology is encapsulated in these four phases: Discovery - Design - Deployment - Delivery. Each of these consulting phases, defines a clear step in the process of taking the solution of a business problem from concept into production. The client is alway in tune with what is going on. This facilitate a smooth transfer of control after completion.

  • Mapping - A wire-frame mockup of the interface is the starting point
  • Mapping is very subjective due to the fact that your personal feelings (emotions) and experiences are the driving force. It starts from your brain where you envisage how everything will be positioned in a given time - space disposition.
  • The transfer of these brain concept on to paper (mockup) is the starting block for the interface to come into realization
  • Basic graphic assets are added into mocked design to improve visual for client to get a better visualization

Progressive Development

Client's Input At All stages

To effectively bring the client in to the design and development processes, a common venue had to be established. The most convenient and suitable location was the internet. thus, a private area was setup where client can log in and see how development was progressing. More importantly here,they could query issues they were not happy with and the development team can respond for them to see the immediate effect of their suggestions -

    Advantages
  • Very convenient for both parties
  • Significantly reduce glitches and typos
  • improved client satisfaction

Delivery

Deployment

This final stage of the design cycle was rather straight forward because it is invariably dependent on the preceding phases. Thus it was merely transferring the entire package from it testing platform on to a production one. Here, the databases for managing the on-line book selling functionality , contact form , newsletter, blog and news functionalities were implemented and tested. Paypal was the obvious choice for completing the e-commerce section due to it simple and intuitive modules.

Final Features

  • Site with interface as envisaged by client and then some
  • Java-script providing intuitive interactive elements at the front-end
  • Publish Book can be bought on site
  • A blog section
  • A news section
  • A news-letter section
  • Company stationery consistent with wed interface
  • Client has total control of back-end activities









Website Design - Project3

    Salient Features: Click on tabs to see content:

The Nigerian Community

Joining The Motion

Their Objectives:

The Nigerian Community Waltham Forest (NICOWF) is a charitable organisation born out of the necessity to foster and strengthen the bonds among Nigerians living in the borough

  • Strengthening Capacity For Self-Help
  • Providing Economic Opportunity
  • Delivering Relief In Emergencies
  • Influencing Policy Decisions At All Levels
  • Addressing Discrimination In All Its Forms

The Brief

A Complete Responsive Design

The general theme should reflect the national colours (GREEN-WHITE-GREEN ) with large expanses of margin and padding that depicts an uncluttered interface

  • Lots of videos will be shown on site
  • Lots of pictures will be shown on site
  • Details of Nigerian embassies in the diaspora
  • Useful public information from the The High Commissioner s Office in London
  • A dynamic blog and news section
  • An opened architecture for accommodating new features

The Design Process

From Wire-frames To CSS3

There are multitude of different screen sizes across phones, tablets, desktops and TVs,. Screen sizes will always be changing, so it’s important that your site can adapt to any screen size, today or in the future. Responsive web design, responds to the needs of the users and the devices they’re using. The layout changes based on the size and capabilities of the device. For example, on a smart-phone, users would see content shown in a single column view where as a tablet might show the same content in two columns.

The fundamentals of the responsive design concept is based on a grid structure made of columns. A maximum of 12 will be utilized to display content for a typical desktop and anything bigger (TV). Tablets , smart-phones and smaller screen devices will use progressively less. The magic in rendering the same content for devises of varying screen resolution and sizes is in the css file (CSS - Cascading Style Sheet)

  • Mapping - A wire-frame mockup of the interface is the starting point
  • Mapping is very subjective due to the fact that your personal feelings (emotions) and experiences are the driving force. It starts from your brain where you envisage how everything will be positioned in a given time - space disposition.
  • The transfer of these brain concept on to paper (mockup) is the starting block for the interface to come into realization
  • Basic graphic assets are added into mocked design to improve visual for client to get a better visualization

Progressive Development

Client's Input At All stages

To effectively bring the client in to the design and development processes, a common venue had to be established. The most convenient and suitable location was the internet. thus, a private area was setup where client can log in and see how development was progressing. More importantly here,they could query issues they were not happy with and the development team can respond for them to see the immediate effect of their suggestions -

    Advantages
  • Very convenient for both parties
  • Significantly reduce glitches and typos
  • improved client satisfaction

Delivery

Deployment

Final Features

  • Site with interface as envisaged by client (based on the Nigerian Flag)
  • Java-script providing intuitive interactive elements at the front-end
  • Dynamic Photo Album
  • Dynamic Video Player
  • A Blogging Section
  • A News Section
  • Client has total control of back-end activities















Be Properly Informed

 

Publishing no more a privileged few

The main broadsheet and television to a certain extent have always argued that the principle of reviewing books that are only published through well-renowned publishers had inbuilt quality control they could not do without. It now seems the quality control factor was merely a smoke screen for maintaining the old school boy network. This hitherto sacrosanct principle is now being reviewed,revised or ditched completely. There now seems to be a change in the wind - or to put it bluntly a revolution in the making. As more self-published authors hit the big time, that reputation (of vanity,flagrant ego etc,etc.) is definitely beginning to diminish. Self-published authors are now thought of as entrepreneurs, energetic souls determined to forge their own identity and destiny in the cultural landscape.


Anyone can get published

Here at Torome Tech, we have the expertise to help you bring your dreams to fruition. it is generally said that, everyone has got a book in their head. Be it fiction or non fiction. The problem has always been the expense in getting it published. Well to a certain extent that obstacle has been rendered obsolete. Not because of the caprices of the big publishing houses but due to innovation in technology and the increasing power designers and programmers have in affecting how information is presented and consumed on the Internet platform. Thus you do not have to have a physical book so to speak(i.e printed) . Your book will reside on the internet to be consumed in a digital format only. That is to say people can read it online on their chosen platform (Tv,desktop,laptop,tablet, or smartphone). You can give it gratis or incorporate a charging scheme of your choice.This by and large, will be on a pay-access basis. Just in case you are one of those averse to digital books, the tangeable option can easily be realised from this juncture. You just have to say the number of copies you want and it get send to the printers - and that is it. You only need to have your story out of your head and we will do the rest. Interested - talk to us.


Blog Posts On Site Design