What is responsive web design really about?

A specific approach to modern web design is the so-called adaptive web design (RWD).

The term responsive web design means the creation of Internet content that is primarily easy to use, but also extremely suitable for use on different types of devices that have different screen sizes.

Responsive web design is a specific technique of creating a certain site which, as its name suggests, is adaptable to display. This adaptability primarily applies to screens of different sizes, so that the site created by this technique can be easily viewed on both desktop computers and laptops, and tablets and mobile phones, which have different screen sizes, and that the contents are equally viewed on each of these devices.

The content of the site, which is made using the responsive web design technique, is completely adapted to different screen dimensions with the help of so-called fluid grids (which are based on adequate proportions), as well as with flexible images and special technology that allows different CSS properties to be used equally well. on devices with different screen widths (CSS3 media queries).

The basic characteristics of responsive web design on mobile phones, in addition to the above, are JavaScript codes, which are unobtrusive, as well as progressive improvement. This actually means that some models of mobile phones, ie their browsers, do not actually understand JavaScript codes.

For this reason, it is recommended to first create a very simple website, which with adequate corrections is especially carefully and gradually adapted, ie improved to the needs of all models of mobile phones, ie desktops, laptops and tablets.

In a fluid grid system, it is very important that it is necessary that the dimensions of all the elements of a particular page are not expressed in pixels (absolute unit), as is usually the case, but in percentages (relative unit). This applies, of course, to photographs, which also need to be expressed as a percentage, because this prevents the possibility of photos being displayed outside the content of a particular element within which they are, or as the jargon says that the site does not spoil. The term CSS media queries implies the use of different CSS styles, in accordance with the different dimensions of the device for which a particular website is intended to be displayed. In this way, they adjust, for example, the margins or font size within the text, in order to achieve the most optimal visibility of web content on devices of different dimensions.

When it comes to the need for a particular website to be visible on mobile devices, even when they do not recognize JavaScript, or do not support JavaScript codes, it is necessary to perform browser detection in the first place, but also the detection of the mobile device itself . In this way, it is found out whether a certain mobile device supports the properties of HTML or SCC or not. And in order for these methods to be truly reliable, it is necessary to adequately combine them with the possibilities offered by the Database.

In case there is no support for certain devices, ie they do not support HTML and CSS properties, there are numerous internet tools that are there to enable that support. It should certainly be borne in mind that each of the mentioned verification functions is not completely reliable for detection. Fortunately, various add-ons are also available today within the Internet browser, which offers quick and easy flexibility testing.

The Development Process

We break the process up into logical steps. You can choose to finance your website with our zero-interest financing or pay as each step is completed.

Step 1. Research and Planning

Before we begin the website design process, it is important that we understand what makes your company better than the competition and what you want to accomplish with your website.

While one website can accomplish many goals, each page on your website can only accomplish one goal. We help you determine which goals you want to focus on with your website, setting realistic expectations for performance, and the design components needed to get the job done.

Step 2. Graphic Design

Once we know what pages will be required and what they are designed to do, we hand that information to our graphic designers.

Some of our clients have a detailed idea of what they want their website to look like and others ask our designers to develop a look and feel for them.

We will ask questions like what colors your customers will respond to, if you have a logo, and if you have any ideas to get the process started.

Once we have that information, our designers will develop a unique template for your website. At each step along the way we will present a design proposal, ask for your feedback, tweak it and ask again. You get unlimited revisions until you approve the final design.

Step 3. Coding

Once we have a graphic design approved, that design goes to our coders where it is transformed into a functional website.

We will create pages and insert the text, images, and video that you supply or ask us to create. We organize and optimize the content to give you the best possible chances of achieving a high search engine ranking.

Step 4. Launch

Once you have approved the final website, we will “launch” the website on the Internet. This means your clients, customers, friends and family (and more importantly Google) can begin to view and rank your content.

We also do a few things to make sure your website gets the attention it deserves.

We pay to have your website featured on a top local radio station
We brag about you in our portfolio
We post links to your new website to help drive traffic
Depending on your goals, the level of local competition and the content of your website this may be enough to get you the search engine ranking you are looking for.

While no one can guarantee you a position in a search engine (anyone who does is a danger to your website) we can perform additional services if needed to help elevate your position so when people search for the key words you targeted they find your website.

Two important factors for good site – design & links

Design – Layout

Use photos, graphics, text, colors and positioning that pleasing to the eye and attract attention

When looking randomly at a page, the eye first travels to the area that contrasts the most with the rest of the page. For example; if everything is generally dark on a page, the eye will immediately seek an area of light. Other things being equal, points of interest are usually in the center of one of the four quadrants in a page. If you divide the page in half, both horizontally and vertically, you will have four rectangles. Good composition would place your key stuff in the center of any of those rectangles.

Pictures of people and your business or office are important to display on your entry page. Your site now becomes more personal to visitors and will generate a degree of trust that is instilled in them when they can see your face or business. The use of graphics can play a big part in creating an attractive web page, but there is a downside to them.

First, they load slowly and if there are a large amount of graphics, even small in size, it may take a long time for the complete page to be displayed. With that in mind, always save your files in the format that will give you the smallest file size. Usually that is a .jpg or .gif. Whenever possible, I would recommend using photos in a ‘thumbnail’ size and let the viewer click on the picture for a full size view.

Secondly, GoogleBot does not recognize any type or text embedded in a graphic. So, if your logo, for example is a .jpg you must complete the alt tag with a good description of the graphic. Many viewers, especially those on a dial-up connection will turn off graphics so the pages will load faster. They read the alt tags for the information needed.

Navigation is another issue. Your internal links to other pages on your site should always be located in the same physical space on each page. Usually at the top of the page or along the left border of the page. Try to make your links from text rather than graphics for the reason explained above. Links commonly are colored in blue. A mouse-over effect that changes the color is alright to use. We do that on these pages.

When naming the various pages on your website, do not run the words in the name together. Break up the words with hyphens or underscores. Also add a brief description to the page name. Ex: “portfolio-website-content.htm”. Bots will read those words and understand them. When you run the words together, the Bot sees it as a new word. The name then acts like a ‘key phrase’ and is helpful in the Search Engine descriptions of your site.

Link Exchange

Links may be the most important item for good PR

We strongly recommend that every page of your website should have links to all the other pages. GoogleBot needs to be able to navigate and crawl your site easily. Links to external sites, many times are embedded in the text on the page. The color of the link (usually blue) should be different than the normal text color, so link identification is easy. Search Engines believe that the quantity of websites on the Internet that link to you is an indication of the importance of your website. As a result of this, Link Exchange programs were started where you can send a message to another website that says you will publish their link if they publish yours.

Links to other sites may raise your Page Ranking with many Search Engines, however, the links should be useful to you and your target audience. Don’t publish a lot of links just to improve your page ranking. Look for other websites that might be of interest to your target audience. And beware of ‘Link Farms’. Your PR may plummet to zero with the wrong links on your site. The accepted practice is to only link with site that have a Google PR greater than zero, or as high or higher than you own PR. This means that you will probably have to build a positive PR before attempting any link exchanges. That means careful study using all the above criteria as guidelines for your website development.

More on the topic of SEO

 

Website Title

The web crawler’s first introduction to your identity. Make it good!
The title of a website should be the first item in the head section of your source code and accurately state the purpose and represent the content of the website’s pages. The title should then be followed by text rich in keywords that you use in your body copy that give more substance to the title. For example: Tom Smith owns a shoe store.

The store’s name is Smith Shoes. Tom wants to use that for his website title.

Following our own advice, we expand that to Smith Shoes – All Types from Sneakers to Dress Shoes to Work Boots. Or something similar in nature. But using this example, we must be sure that keywords like Types, Sneakers, Dress Shoes, Work Boots all show up in various places in the body of text on the opening page. We describe the title then, as being rich in keyword content.

Your title tag is placed at the top of your source code and would then look something like this:

<html>
<head>
<title>Smith Shoes - All Types from Sneakers to Dress Shoes to Work Boots</title>

Website Description Not only describing the site, but assisting bots with rich keywords for successful searches.
The Site Description is the next item in your source code listing. It is believed that GoogleBot gives a higher measure of importance to what it perceives first. The same rules apply for the description as it did for the title. You would want to expand the description with rich key phrases also found in abundance in the body text. So again we say, Smith Shoes the store for hard to fit feet. We carry many styles and colors in all sizes that are sure to fit your feet well. Or something in this nature that would describe what you can and will do.

Your source code will now look like this:

<html>
<head>
<title>Smith Shoes - All Types from Sneakers to Dress Shoes to Work Boots</title>
<meta name="description" content="smith shoes the store for hard to fit feet - we carry many styles and colors in all sizes that are sure to fit your feet well">
<meta name="keywords" content="....

Another issue is how you write the text and at what level of understanding is your audience supposed to have. Good newspaper journalism says to write as if your audience is at a 7th grade level. Do not use many esoteric words that confound a viewers perception. This last sentence is a good example of what not to do. Keep it simple.

Keywords and Key Phrases

These play an important part in relaying information to a web crawler.
Keywords and Key Phrases carry the same type of content and we will lump them together in our SEO description. Both of these items appear in “meta tags” like the description tag listed below the title tag. All these tags in the head section of your source code are invisible to the general public but is very descriptive to the web crawlers searching your site. In HTML (Hyper Text Markup Language) code the first thing that shows on your screen is what is inside the “body” tag.

Your keywords should reflect the one or two word combinations that you feel people would use as a search item looking for the product you have available and shown on your website. Keywords are shown in your source code like this:

<meta name="keywords" content="shoes, boots, shoe sizes, shoe colors, work boots, etc..">

Key phrases usually contain a complete phrase of words describing a type of element of the body text. Key Phrases look like this:

<meta name=”key phrases” content=”shoes for hard to fit feet, shoe sizes from 5 to 13 and widths to EE, etc..”>

Some people write a bunch of relevant keywords and then try and compose the body copy text using as many as possible. I personally believe you should write your text, first, saying what you want to tell your target audience. This way, your text should flow well and get your message across easily. If done properly, you will have enough rich keywords and key phrases to conduct good searches.

I don’t believe it is necessary to separate keywords and key phrases, but some Search Engines may wish to see them as separate items. And after all, it’s only one more line of code.

Body Text – Copywriting

The art of composing text that will give a clear and concise understanding of your products.
Text on your home page plays a very important part in holding the interest of your site visitors. The structure of sentences should be geared towards the visitor, not yourself. Try not to use words like I, me, mine, etc. ‘You’ and ‘yours’ are good attention-getting words. More text means higher page ranking from Search Engines.

Bullets are another tool that play a very important part in design content. Copywriters don’t always realize this. Bullets (Orange Bullet) attract attention and if the bullet ‘points’ are brief, they’ll make excellent Meta Tag Key Phrases.

Another great word that viewers like is FREE . Highlight the word so it draws attention to itself. That word says, “No obligation! Read some more!” Give away something that will be of value to the reader. Trust me. You won’t go broke doing this. If you mention that the free item changes periodically, there is an incentive for the viewer to return. Repeated visits generate customers. Try offering something that is of value, but not related to the items you are trying to sell. A free bonus item of some worth is invaluable as a sales tool.

Be brief. It is important that statements can be read without having to scan several lines. Too much copy says, “Time to go somewhere else” but remember that descriptive phrases are what Search Engines show when your Website is displayed on their page. This may sound like a Catch-22, but make your statements as descriptive and as brief as possible.

The level of language used should apply to the audience you are trying to capture. Let a seventh grade reader understand what you are saying.

SEO Overview

A beautiful designed website is not enough. At least not if you are depending on a Search Engine to identify you as a source when someone institutes a search on a keyword or phrase. For a non-business site you may not care about Search Engine results. However, for a business site it can be the difference between success and failure. Following is a brief discussion on Search Engine Optimization (SEO).

The Search Engines, and there are thousands of them, all have algorithms they use to give a particular web page a value of importance. This is called Page Rank (PR). The algorithms are all different and the content of them are secret. Search Engines use Robots, sometimes called Bots, Spiders or Web Crawlers, and their only duty is to crawl all the sites on the Internet and log information into a data base about each website they visit.

The information is gathered not only from the displayed website pages, but also from the head section of the source code in your website. The “head” section is not displayed on your site’s pages, but does contain information in the form of “meta tags”, about your website and its development. The Search Engines then use their algorithms to give an importance factor on the data gathered and the result is your PR. To see an example of source code, right click on the white border of this page and then click on “View Source”. You will notice that only the code after the “<body” tag is visible on this page.

SEO is a necessary subject of study in designing successful websites. At this time, Google and their web crawler (called GoogleBot) processes about 83% of the searches of the billions of websites on the Internet, with all the other engines no higher than about 7%. So, the question, “What affects Google’s opinion of a website?” is the basis of our design tactics. Everyone is sure the following elements are of importance in terms of high PR, not necessarily in the order listed.

Services

As a provider of high quality internet solutions our recent work ranges from simple sites advertising a clients’ products & services, through to complex dynamic database-driven e-commerce sites for clients who wish to participate in e-business.

 

We are able to provide the following services :

    • Web Design
    • Web Integration
    • Databases
    • Content Management
    • E-Commerce
    • Consultancy
    • Project Management

We specialise in developing and delivering complex dynamic web sites integrated with relational databases with e-commerce payment and fulfilment systems. The success of such sites requires an excellent understanding of development processes involved. Our understanding of this process combined with the skills our staff possess ensures that we can deliver the solution that is right for your business.
Additionally the calibre of our staff means we are able to offer independent consultancy and project management for your Internet solution from project definition through to and beyond implementation.

Visit our portfolio of client sites to gain an understanding of the services we are able to offer and see the solutions we have delivered.

Approach

We believe that a structured approach to developing and executing solutions to complex business problems is the right way to deliver a successful solution on time and within a defined budget. To achieve this we have a process for understanding, planning and executing your solution whilst throughout keeping you informed of progress.

1 UNDERSTAND 2 SPECIFY 3 DESIGN 4 IMPLEMENT

Understand

We work with you to understand your immediate and long-term business objectives, clarify your operating and technical environments, and identify your potential audience. We also establish the project scope, budget and work plan

Specify

Working closely with you we specify and document the business, functional, technical and creative requirements. We build a prototype to demonstrate the concepts allowing you to refine the objectives

Design

We complete the functional, information, user-interface design whilst refining the technical architecture and, if necessary, develop site content. A working prototype offering you an opportunity to review and test the solution prior to implementation is delivered.

Implement

The final product is built. We test and quality assure the product before implementing the solution within your chosen environment. We provide appropriate level of documentation and training to ensure that you understand how to manage and maintain the product