Web Page 4 Less
Web Design Blog, Tips, Articles & Advice

Archive for the ‘Web Development’ Category


The three types of mobile web design

Posted in Web Development  by admin

There is a lot of debate in the community over the benefits of the different forms of design for mobile content. The primary options are responsive web design, adaptive design, or separate sites:

Adaptive design, also known as Dynamic serving, use the same URL as the main site but serves the visitor a different website based on the browser. When the web server detects a mobile browser, the end-user gets a mobile version of the web site.

Separate web sites for mobile and desktop browsers use different URL’s to distinguish between the two options. Much like adaptive, the server tries to determine the type of device using the browser identification tag. The difference here is that rather than serving a different page, the server redirects the visitor to another site, usually with a mobile prefix.

Responsive web design is the most popular form of mobile web design. With one single site, you can serve a multitude of screen sizes. The browser will render the page using a set of rules. A smartphone will render the page with smaller fonts, a hidden menu bar, and a small page width. A desktop browser will render the site with a different set of dimension.

Responsive design is also Google’s preference for the mobile web. Google prefers responsive design because it requires less work by the designer. However, there is no single better choice. The only real differences are the cost of implementation.


Three tips for making the most of a website redesign

Posted in Web Development  by admin

Most organizations refresh the design of their website once every two years. This update is both a blessing and a curse. It is an opportunity to improve the underperforming parts of your site, but at the same time present the potential for making things worse. Here are three tips for making sure your website redesign is an improvement:

What works

The first step is to gain a thorough understanding of what works on the current website. To preserve existing your SEO, you need to know what works and why. The only way to prevent losing years of SEO work and equity is a proper review of your current setup.

What doesn’t work

As part of the above review, you will also find gaps in your current SEO and structure that you can address as part of the redesign. Most of the gaps you find will exist because fixing them can be disruptive under normal conditions, so take this chance and fix anything you can.

Common issues

There are resources online that list out everything that can go wrong with a website redesign. Many others go through the same issues every year, and we can use that information to prevent making the same mistakes.

Detailed plan

Finally, you need a proper plan down to the last minute detail that shows everything that will change with the new design. The more detail you have, the faster you can fix any issues that come up when you relaunch.


Web designers: what to ask you, clients, before you start

Posted in Web Development  by admin

Modern web designers need to realize that even when it comes to site design, marketing comes first. Very few organizations maintain a presence online purely for informational purposes. With e-commerce and online sales growing, any website should base its construction with marketing as its primary focus. Here are some key points that any designer should clarify before starting work on the new design:


When you revamp an existing website, it is because there is something about it that requires attention. Find out what the three most pressing issues they have with the existing site. Not only will that prevent you from repeating the mistakes, but it will also give you a general idea of what the clients expect from the new site.


Often, the decision maker at an organization will already have an idea of what they consider a good looking website. Find out what sites the decision makers like and what elements of those sites they think could work for their own.


A lot of websites have contracts with SEO organizations that take care of their content and site optimization. Find out if there are any particular requires from the SEO team. Sometimes, entire sections of a website change because another team comes in later and asks for changes in the name of SEO.


Lastly, find out from the client what features, elements, components or design elements of competitor sites they find useful. This together with the frustrations listed above should paint a clear picture of what the client wants in their design.


Four mistakes to avoid on your website audit

Posted in Web Development  by admin

Ranking on search is unpredictable. Even with enough inbound links, a small change in the algorithm can move a page from the first page to the third. One of the ways to ensure that the site has done everything to ensure good ranking is to conduct an audit of the website. However, there are some common mistakes that people make when doing a website audit. Here are the four most common that you should avoid:


The first mistake many make is not conducting a complete crawl of the website. Often we make changes without thinking about the implications of those changes. Without a complete scan of the website, there is no way to know what repercussions might result from the changes. There is a lot of free software available that can do complete crawls.


There is a robots.txt file that indicates which files and folders a spider should crawl. Check that file to make sure that nothing important accidently falls into the Disallow section. This is one such example of where a complete crawl of the website will illustrate unintended consequences. It is also important to make sure that all unnecessary content is not visible to the search engine.


On-page ranking factors do not hold the same weight as inbound links. However, making sure the on page factors meet certain criteria ensures that the page does not fall below a certain standard. Some of those include a minimum word count, value of content to the user, optimized images, keywords, titles, etc.


Client-side scripting languages

Posted in Web Development  by admin

When it comes to web development, there are several layers of development languages. The two primary building blocks are HTML and CSS. Then there are server side scripting languages like PHP, Python etc. These power the dynamic web sites that we come across on the web every day. Another category is client-side scripting languages. These languages download along with the HTML and CSS, and execute locally. It is still a static page, like HTML/CSS, with additional interactivity. These are the most popular client-side scripting languages used today:


When you load a webpage and see animation, games or some form of interactivity, it is most likely to be JavaScript at work. After HTML and CSS, it is the most common scripting language you will see in use. The language works even without an internet connection, as long as the application supports local execution. Even complicated sites use JavaScript for applications thanks to the JavaScript engines of Chrome and Firefox. JavaScript is also popular due to the vast selection of libraries.


ActionScript is the scripting language used for Adobe Flash. There is something to be said for how far Flash spread, that even in its dying days, ActionScript remains one of the most used client-side scripting languages.

For a long time, there was a choice between the two. However, with the end of Adobe Flash in sight, JavaScript will be the predominant client-side scripting language.


Elements of a good landing page

Posted in Web Development  by admin

 photo images_zpscrra1zuf.jpg

Landing pages are have an important purpose in the overall success of a website. They look great, provides good communication and are often conducive to conversions. It makes perfect sense to get a nice landing page for your next project. But before, you might want to check out these points for a successful page.

A clear goal

A landing page should have one goal, and only one. This contrasts with traditional websites, where the goals could be multiple and diverse. However, for landing pages, you want one goal. Be it collect the user’s email, get the user to fill a form or simply sign up for your product.

Adapted for the audience

Once you know your audience, everything makes sense. Your landing page should reflect your lambda user. If you are targeting big companies, you would want to show certifications and testimonials. But if you were to target younger startup companies, then a catchy video might work better.

Clear communication

Your landing page should be in grammatically perfect. There shouldn’t be a single typo or mistake. These innocent errors play a big role in giving you an unreliable reputation. This is because, people often associate bad grammar to spam/scam websites.

Appealing design

This is the last point because it is so obvious. Landing pages are very different from traditional websites. Landing pages should be immaculate.

Landing pages are meant to convince the random Internet citizen to choose your product over another company’s. This means that the only way to judge your product is to judge your landing page.

This article was provided by Web Design Express. Web Design express provides WordPress based web design and ecommerce site design. They also offer landing page design and optimization services.

Tags: ,


3 Web Development Tips To Boost Skills

Posted in Web Development  by admin

 photo featured34_zpsnamaaaaz.jpg

Article provided by easy-website-solutions.com

There might be no substitute to experience and experimentation when it comes to web development. But there are some shortcuts that can be used to gain effectiveness in the work.

  1. Clearing Floating Elements

Floating elements need to be constantly taken out of the way and this is part of the daily grind of most web developers. However, there are some elements that would undeniably escape your loop. For instance, how can floated list elements be cleared with the setting of a height. By adding display: block;overflow: hidden; to any floated list, the height attribute would be automatically calculated and adjusted.

  1. Using Web Inspectors

The use of web inspectors has proven to considerably save time and some thought juice. The opinion of developers diverge in which is the best web inspector. Undeniably though, it was a real struggle before browsers had implemented them. On Chrome and Safari CSS changes can be previewed live with the “Inspect Element” feature. New elements and edits can also be made from the inspection pane. On Safari it is found in Preferences > Advanced > Show Develop.

  1. Single Responsibility Principle

Each object within your code should be able to have only one function. This applies to CSS as well. Putting all styles into a .button class should be avoided. It should instead be split into .button-face and .button-structure for example. The Single Responsibility Principle ensures that if something breaks, you would be able to easily find the problematic object and fix it rather than having to spend time tracing back through your code.



Less is More in web design

Posted in Web Development  by admin

Article provided by  web-marketing-tutorial.com.

One of the current trends in websites these days is minimalist design. There are a lot of websites out there that choose to have simple websites usually with a white background and some black text. This may seem rather bland but when done right, it can set your webpage from the rest.


The key to this minimalist design is the layout of your web page. Don’t just place everything as columns or simple boxes. You have to group things together in strategic parts of the page and pair it with simple but elegant design. Another aspect that will be very helpful in the design of your minimalist page is the font that you choose. Choosing a common and bland font like times new roman, arial, or helvetica can make your page seem boring. You could still use this font but try using variations of it.


Minimalist does not only mean simple and clean design, but also a light web page. Viewers are more encouraged to view your site if it loads fast. By taking out resources that are big and make load times longer, viewers can see your content quicker and thus see more content. This would also be great because we now view pages on several different platforms. We don’t just use desktops and laptops anymore, but we also view them on mobile phones that run on cellular data, which can be slow at times.


A simple, elegant, and light webpage can spell the difference between yours and your competitors.



Saving Money on Your Website

Posted in Web Development  by admin

Every business needs a website these days. Of course, plenty of people want websites for reasons completely unrelated to work. The problem is websites aren’t something most of us can just go out and build. That takes a specialist and, unfortunately, specialists cost money. For some easy ways to save money on your website, consider the following.

Content Management Systems are a great way to get a professional looking website without all the overheard. WordPress is probably the best example of this. The platform originally started out as an easy way for bloggers to get started without a lot of time and money invested. However, as time went on, WordPress eventually evolved into a platform that could just as easily be used for creating fully functioning websites. Today many of your favorite websites probably use WordPress.

Tumblr is another, similar platform that makes it easy to have a presence on the web. It works like one running webpage, but is a great option for people just getting started with having a website of their own. Like WordPress, it’s extremely customizable so you can get just the look you want without a lot of fuss.

Of course, you may decide you want a traditional website and that the above options simply won’t deliver. In that case, consider hiring a web designer to handle the process for you. One of the easiest routes is hiring a freelancer through a site like Elance or oDesk. You can get the website you need at the price you want.


3 CSS Techniques for Charting Data

Posted in Web Development  by admin

An excellent advantage of using CSS involves being able to chart numerical data instead of adding static images to your website. Not only will this add to the aesthetic value of your website but it will make your content more accessible.

So, with that said, here are 4 CSS techniques for charting data:

#1: Accessible/ Definition List Bar Chart

In this case, you can use an accessible bar chart which uses a table as the basic structure of the bar graph. CSS is used so as to stretch a background image to its appropriate width. You can also create definition list bar charts, as horizontal charts, whose width can adjusted using percentage units.

#2: Graphs using Percentage Background Images

With this technique, premade background images are made so as to shade in the appropriate data. The only problem with using this type of graph will be that there are limited number of premade background images, and you’ll have to create more of them in order to increase the number of classes. But that’s not all – your CSS and HTML file size will increase while the number of HTTP connections to render the page will also increase, thanks to these background images.

#3: CSS Scatter Plot

If you need to plot two-dimensional data, then a scatter plot is the best way to do so. When you use this in CSS, each data point is clickable. So, you can use a modal window which will display extra information about each data point.