is a responsive
Have you asked yourself,
“What is responsive Web design?” Responsive Web design
is an approach whereby a designer creates a Web page
that “responds to” or resizes itself depending on the
type of device it is being seen through. That could be
an oversized desktop computer monitor, a laptop, a
10-inch tablet, a 7-inch tablet, or a 4-inch smartphone
Responsive Web design has become one of the hottest
trends in website design. This is due in part to the
growth of smartphones and other mobile devices. More
people are using smaller-screen devices to view Web
The purpose of responsive
design is to have one site, but with different elements
that respond differently when viewed on devices of
Let’s take a traditional
“fixed” website. When viewed on a desktop computer, for
instance, the website might show three columns. But when
you view that same layout on a smaller tablet, it might
force you to scroll horizontally, something users don’t
like. Or elements might be hidden from view or look
distorted. The impact is also complicated by the fact
that many tablets can be viewed either in portrait
orientation, or turned sideways for landscape view.
On a tiny smartphone screen, websites can be even more
challenging to see. Large images may “break” the layout.
Sites can be slow to load on smartphones if they are
However, if a site uses responsive design, the tablet
version might automatically adjust to display just two
columns. That way, the content is readable and easy to
navigate. On a smartphone, the content might appear as a
single column, perhaps stacked vertically. Or possibly
the user would have the ability to swipe over to view
other columns. Images will resize instead of distorting
the layout or getting cut off.
The point is: with responsive design, the website
automatically adjusts based on the device the viewer
sees it in.
Responsive sites use
fluid grids. All page elements are sized by proportion,
rather than pixels. So if you have three columns, you
wouldn’t say exactly how wide each should be, but rather
how wide they should be in relation to the other
columns. Column 1 should take up half the page, column 2
should take up 30%, and column 3 should take up 20%, for
Media such as images is also resized relatively. That
way an image can stay within its column or relative
What the heck is a retina
Part of a
Retina Display on an iPhone 4. The pixels
are not visible at viewing distance,
creating an impression of sharp print-like
Part of a
non-Retina Display on an iPhone 3GS. The
pixels are visible at viewing distance.
Retina Display is
a marketing term developed by Apple to refer to devices
and monitors that have a resolution and pixel density so high –
roughly 300 or more pixels per inch – that a person is
unable to discern the individual pixels at a normal
viewing distance. The goal of Retina Displays is to make
the display of text and images extremely crisp, so
pixels are not visible to the naked eye. This allows
displays to rival the smooth curves and sharpness of
printed text and immediacy of photographic prints.
These better quality
displays have been gradually released over a number of
years, and the term is now used for nearly all of Apple
products containing a screen, including the Apple Watch,
iPhone, iPod Touch, iPad, Macbook, MacBook Pro, and
iMac. Apple uses slightly different versions of the term
for these models, including Retina HD Display (iPhone 6
models), and Retina 5K Display, Retina HD Display or
Retina 4K/5K Display (iMac).
Apple's Retina Displays are not an absolute standard but
vary depending on the size of the display on the device,
and how close the user would typically be viewing the
screen. Where the user views the screen closer to them,
as on smaller devices with smaller displays, they have
higher PPI, while on larger devices with larger displays
where the user views the screen further away, have a
Later device versions have had additional
improvement, either counted by an increase in the screen
size (the iPhone 6 Plus) and/or by PPI (the iPhone 6 and
6 Plus, and iMac with Retina 4K/5K Display), thus Apple
using the name "Retina HD Display" or "Retina 4K/5K
How much does a website cost?
owner asked three website development companies to
submit a proposal to design her company website. She
supplied the developers with the same “requirements
document” that listed the website’s goals and functions.
A week later each of the three web developers came back
to the client with their estimates.
The first one had priced
the project at $3,000, the second had priced it at
$12,000 and the final web developer estimated the
project at $32,000... Can you believe it? $32,000!!
If you’re waiting for the "magic pill"... well, there isn’t
one. That’s because the joke is on the client who now
needs to figure out why these estimates are so wildly
different and which one represents the most realistic
and reasonable budget for their needs.
Believe it or not, I often hear stories like this. One
business owner actually sent us four proposals she had
received and asked us to explain the differences in
pricing. Unfortunately, most business owners have no way
of knowing which bids are unrealistically low, which are
outrageously inflated and which are in the right
Please note: When
we say “small business website” we are talking about an
informational website consisting of approximately 5 to
20 pages with some basic content management and social
Basic Website Components
On average, the following
figures can be applied to estimating the cost of a small
If you’d like a custom
estimate for your website, please contact me.
to $100 a year (depending on traffic and hosting
and Development Time
60 hours and up
$500 a year and up (depending on
number/type of updates required)
$500 a month and up
The most common question
I get is "how much will it cost for you to built us a
I've been answering that
question for 14 years now. Hopefully I can help you.
You are trying to get a quote for a new website for your
business so you Google a few terms you think will hit
the mark. Then you start making the phone calls. Now if
you are in the early days of planning your website and
you don't have some sort of brief to give to the web
design business on the other end of the phone you are
going to get a lot of variation in costs quoted for your
What you get quoted is dependent on the approach each
web designer takes when building a website. The amount
of time and attention to detail that goes into a website
is strongly influenced by how much time and energy you
(the client) is prepared to put into the project as well
as your budget.
The list below shows some of the steps
web designers go through when designing a site.
Designers will put more or less time into the various
steps and consequently this sets up some significant
Three "types" of
Cheapest - $500 - $1,000
In the cheapest scenario a stock template is used and
you are paying for the time to add content only. If you
are on a limited budget this approach can work well, but
your content must fit the template design. The standard
of stock templates is quite good but still best chosen
by your designer to match your content and business. If
the designer has to modify the template too much to fit
your content you might end up exceeding your budget on
variations and spend more that a custom design.
Most Common -
$1,000 - $2,000
Sometimes the client is organised with their content and
have a strong idea on what they want the site to look
like using other websites as examples. Sometimes the
lack of a planning phase occurs because the client has
not had time to gather or write sufficient content
because they are busy with the day to day running of
their business. It is difficult for the web designer to
collate and organise content into a website with a few
paragraphs of text in a word document.
Getting a custom design as opposed to using a template
is going to get a website that better fits your business
and the content you want to display. Another advantage
is that updates to your site will take less time when
the designer has coded the site rather than used a
More Expensive -
$2,000 - $5,000
When the designer puts time and energy into helping you
plan your website and lay out your content in a way that
will increase sales or enquiry conversions it takes time
in the planning, design and development phases. The
extra thought into designing 'mini ads' and 'calls to
action' that help draw the viewer to the most important
pages on the site can make a big difference to the
success of the site.
Some designers also put time into making your website
search engine friendly which means researching keywords
for your business and applying best practices while
building the site. This process does not guarantee you
magically land as the first result in Google but is a
valuable first step towards decent placement in search
How much should I spend on
a basic website?
This will depend on your budget and the goals
of your website. If your site is simply putting a business card online then
something simple might do. If you want your website to portray your business
and products/services in the best manner then a professionally designed and
organised website is the way to go. The time to build usually reflects upon
the quality of the final product.
do I know what I'm paying for?
The best way is to double check with the
Do you use a template
or is it a custom design?
Do you help me plan
and organise my content?
Can you show me
examples of what I might be getting?
Frequently Asked Questions