How to make a responsive website? what princples need to follow to a design a website.

1. Ashu Tomar
ashu@knoldus.com
Principles of Site Design

2. Agenda
1. Home Page And site Navigation
2. Site Search
3. Commerce And Conversion
4. Form Entry
5. Usablity and Form Factor

3. Responsive Web Design Basics
The use of mobile devices to surf the web is growing
at an astronomical pace, but unfortunately much of
the web isn't optimized for those mobile devices.
Mobile devices are often constrained by display size
and require a different approach to how content is laid
out on screen.

4. Keep calls to action front and center
• It can be easy for mobile users to miss menu items, so always put your key
calls-to-action where you know users will see them.

5. Keep menus short and sweet
An extensive menu might work well
for your desktop site, but mobile
users won't have the patience to
scroll through a long list of options
to try and find what they want.
Consider how you can present
the fewest menu items possible.

6. Make it easy to get to the home page
When mobile users navigate through your site,
they want an easy way to get back to your initial
homepage.
For example, they may want to get back to do
another search or start a new browse experience.

7. Don't let promotions steal the show
• Promotions and ads can overshadow the content they're next to,
and make it harder for users to accomplish tasks.

8. Make site search visible
Users looking for specific information usually turn to search - so search should be one of
the first things mobile users see on your site, avoid hiding it behind a menu. In the study,
participants responded best to easily-visible, open text search boxes at the top of a page.

9. Ensure site search results are relevant
Search should be smart, providing users with the best and most relevant results so
they don’t have to swipe through multiple pages of results.

10. Implement filters to narrow results
Provide easy to use filters to help narrow the search results to more
relevant results for users.

11. Guide users to better site search results
For sites that serve diverse customer
segments, it can be helpful to ask users a
few questions before they search to
ensure they get results from the most
relevant content segment.

12. Let users explore before they commit
Requiring login or account creation too early in a site experience can be
detrimental to conversion.

13. Let users purchase as a guest
Offer the option to check out as a
guest, and encourage registration
with tangible benefits.
In a research study, participants
didn’t necessarily want to commit to
creating an account with the retailer.
Participants described the guest
checkout as “convenient”, “simple”,
and “easy [and] quick”. They were
annoyed at a site that required
registration to purchase, especially

14. Use existing information to maximize
convenience
Take advantage of information you already have, and/or use third-party
payment services to make conversion as easy as possible.
For your registered users, remember and pre-fill their preferences. For
new users, offer a third-party checkout service they may already use.
Several retail sites in the study offered third-party payment services as an
option, reducing purchasing friction for users of those services and
allowing the site to pre-fill shipping info.

15. Make it easy to finish on another View
Offer an easy way to save or
share information across
devices, for example provide a
way for users to share items
across social networks or to
email a link directly within the
site itself.

16. Choose the best input type
Users appreciate websites that automatically present number pads for
entering phone numbers, or automatically advance fields as they entered
them. Look for opportunities to eliminate wasted taps in your forms.
Url
For entering a URL. It must start
with a valid URI scheme, for
example http://, ftp:// or mailto:
email
For entering email addresses, and hints that the @ should be shown on the keyboard by default. You can add the multiple attribute if more than one email address will be provided.
email
For entering email addresses, and hints that the @ should be shown on the keyboard by default. You can add the multiple attribute if more than one email address will be provided.

17. Search
A text input field style
in a way that is consistent with
the platform's search field.
Number
For numeric input, can be any
rational integer or float value.

18. Provide visual calendars when selecting
dates
Users often need more context
when scheduling appointments
and travel dates, to make things
easier and prevent them from
leaving your site to check their
calendar app, provide a visual
calendar with clear labeling for
selecting start and end dates.

19. https://developers.google.com/web/fundamentals/principles/
References

20. Thanks