Web Designing Tips - iprismtech.com

1
Web Design Responsive Web Design Tips

• www.iprismtech.com

2
Web Designing Tips
Designing a website is not as easy as getting
into print publishing. Each website that is live
on the net displays a certain information on a
web page. A website is somewhat akin to a book,
just like the web pages as to the pages of a
book. But there is one difference between a
website and a book, the web designer will have no
idea as to the shape and size of every web page
while a print designer will know as to the size
and the number of pages that need to be
printed. Design is the process of collecting
ideas, and aesthetically arranging and
implementing them, guided by certain principles
for a specific purpose. Web design is a similar
process of creation, with the intention of
presenting the content on electronic web pages,
which the end-users can access through the
internet with the help of a web browser.
3
Web Designing Tips
Elements of Web Design Layout This is the way
the graphics, ads and text are arranged. In the
web world, a key goal is to help the view find
the information they seek at a glance. This
includes maintaining the balance, consistency,
and integrity of the design. Colour The choice
of colours depends on the purpose and clientele
it could be simple black-and-white to
multi-coloured design, conveying the personality
of a person or the brand of an organization,
using web-safe colours. Graphics Graphics can
include logos, photos, clipart or icons, all of
which enhance the web design. For user
friendliness, these need to be placed
appropriately, working with the colour and
content of the web page, while not making it too
congested or slow to load. Fonts The use of
various fonts can enhance a website design. Most
web browsers can only read a select number of
fonts, known as web-safe fonts, so your
designer will generally work within this widely
accepted group.
4
Web Designing Tips
Creating User-Friendly Web Design Navigation
Site architecture, menus and other navigation
tools in the web design must be created with
consideration of how users browse and search. The
goal is to help the user to move around the site
with ease, efficiently finding the information
they require. Compatibility Design the webpage,
to perform equally well on different browsers and
operating systems, to increase its
viewing. Technology Advancements in technology
give designers the freedom to add movement and
innovation, allowing for web design that is
always fresh, dynamic and professional.
5
Web Designing Tips
Responsive Web Design Responsive web design is
a great solution to our multi-screen problem, but
getting into it from the print perspective is
difficult. No fixed page size, no millimetres or
inches, no physical constraints to fight against.
Designing in pixels for Desktop and Mobile only
is also the past, as more and more gadgets can
open up a website. Therefore, let's clarify some
basic principles of responsive web design here to
embrace the fluid web, instead of fighting it.
6
Web Designing Tips
Responsive vs Adaptive web design It might seem
the same but it isn't. Both approaches complement
each other, so there is no right or wrong way to
do it. The flow As screen sizes become
smaller, content starts to take up more vertical
space and anything below will be pushed down,
it's called the flow. That might be tricky to
grasp if you are used to design with pixels and
points, but makes total sense when you get used
to it. Relative units The canvas can be a
desktop, mobile screen or anything in between.
Pixel density can also vary, so we need units
that are flexible and work everywhere. That's
where relative units like percents come in handy.
So making something 50 wide means it will always
take half of the screen (or viewport, which is
the size of the opened browser window).
7
Web Designing Tips
Breakpoints Breakpoints allow the layout to
change at predefined points, i.e. having 3
columns on a desktop, but only 1 column on a
mobile device. Most CSS properties can be changed
from one breakpoint to another. Usually where you
put one depends on the content. If a sentence
breaks, you might need to add a breakpoint. But
use them with caution it can get messy quickly
when it's difficult to understand what is
influencing what. Max and Min
values Sometimes it's great that content takes
up the whole width of a screen, like on a mobile
device, but having the same content stretching to
the whole width of your TV screen often makes
less sense. This is why Min/Max values help. For
example having width of 100 and Max width of
1000px would mean that content will fill the
screen, but don't go over 1000px.
8
Web Designing Tips
Visit www.iprismtech.com Whatsapp/Call
8885617929 Like facebook.com/iprismtech Tweet
Twitter.com/iprismtech
9
Web Designing Tips
Thank You For Watching