Website Design

The design of your website will be the most crucial component of all your website tasks and it will be possibly the most time consuming. You can have the best possible domain name and most feature rich service provider. But if your web site design is horrible or poorly designed, you will never get or keep visitors. Design and SEO will go hand in hand, but more on SEO-SEM section above.

Below are some tips to go through to help in your website success.

web design tips
  • Research
    My Image

    If you are on this website you are probably already in progress of your research phase of your website development. Typically your research will be broken down into the following categories and questions to answer.

    • What is your website purpose? i.e. Software sales, products, services, charity, shopping
    • What is the goal of your website? i.e. increase sales by 20%, 100% store front presence, capture 40% of competitors clients
    • Who is your target audience? i.e. Age, gender, income, likes or dislikes

    • What is your target locations? i.e. (local city(s), state(s), countries
    • Analyze your competition:
    1. Who is your competition?
    2. What is your competition doing with their websites?
    3. Exploit the design flaws in the competitor’s website, and focus on making your website better. Keep in mind sometimes less is more.
    • Find examples of websites that have the desired look and feel that you envision. This could be different components of a website, such as navigation bar, page layout, graphics, features / effects, and information content. Bookmark webpages that have aspects that you want to incorporate in your design. This can be a contradiction to SEO, as content is king when it comes to the search engines.
    • If you do not have graphics content for your website. Search the internet for commercial or free graphics that you would like to incorporate into your website. Commercial graphic stock is all over the internet, but the main players are Shutterstock, Dreamtime, and iStockPhoto. Commercial graphics are the easiest and fastest option, but can add up in costs.
    • If you are doing the web page design of the website. Look at the source code of the web page layouts you like. You may get a clue on the products that were used to develop the website in the first 20 lines of code and in the last 20 lines of code. Reading the source code of this page you will see it is a hybrid of products. You will see meta tags that state I am using Rapidweaver with the Foundation theme, some custom code and that i have dynamic references to Wordpress.
    • After gathering all this information you are now ready to start the planning phase.

  • Planning
    web design steps

    Now its time to pull together all the research that you have done and set a battle plan for how you are going to do this project. The biggest questions to ask yourself are:

    • Who will be doing the design work?
    • Who will be doing the graphic work?
    • What is your budget for all website elements?
    • Do you have all the technical resources needed to develop the website with all the elements you are wanting?
    • Set a realistic finished website date (i.e. 30 days, 90 days, 6 months)
    • How much will the design and graphics cost?
    • What is your branding / logo, and tagline going to be?
    • Will your website include components that are dynamically generated (i.e. databases, streaming videos, and searches / queries)?

  • Requirements

    Knowing the requirements goes a long way to truly knowing the costs, skill-set, and timeline needed to design a finished website. It will also helps you determine the service provider(s) needed based on the features your will be incorporating.

    Based on the your answers from the planning section, write a list of all your requirements and use that list to determine the qualifications of any service provider(s) you are selecting and any individual(s) that are doing work on your website. This may sound a little harsh, but it is your money. Selecting the wrong person and/or service provider will easily add more time and cost to your project, and possible cause the development to stall completely.

    The key elements to defining the requirements:

    • Can all the requested work be done with-in your specified budget?
    • Does the web designer have the technical expertise to complete all the elements on the website? i.e. (code, flash, java, css, wordpress, graphics)
    • Does the web designer have active website examples of previous work done that are similar to what your are looking for?
    • Is everyone committed to the timeline and finish by date?
    • If you are hiring a website development firm do your due diligence on the firm? i.e. bbb.org, Yelp, reference calls, and etc

  • Design

    I usually do static mock ups of the design I am looking for. I develop the look of the website in Photoshop, the great advantage is you can do many layers, move things around freely, turn layers on and off, add components such as graphics that your are considering. Nothing worse then writing a bunch of code, just to scrap it because you don’t like the layout. Photoshop allows me to have very little time invested in the design and a more finalized design decision before i write a single line of code. At a bare minimum, a paper sketch of your design concept will help express your ideas to everyone involved in the project.

    My Image

    If you have never used Photoshop or Rapidweaver then the learning curve can be very time consuming. Products like Balsamiq make creating website mock ups quickly and easily, with very little learning curve.

    This is were it gets technical. There are many methods of doing the design of your website. Examples are:

    • Raw html, css,php, java, ajax, and asp code
    • Visual Editors - KompoZer, RapidWeaver, Notepad++, Dreamweaver, Adobe Muse
    • cPanel / Plesk- Design Templates
    • Content Management Add-ons - Wordpress , Drupal, Joomla, Blogger
    • Graphic Design: Adobe Photoshop, Pixelmator

    All the examples above have their pros and cons.
    There is no need to reinvent the wheel. You can spend many hours trying to develop something from scratch that is blog like or utilizes a database to collect user information, but if it takes 6 months or longer to develop it may not be wise use of your time. By implementing a website hybrid with the technologies mentioned above, your can greatly reduce the time needed and possible the skillset needed for design and / or database intense applications. This is the most common reasons why you see a lot of hybrid sites that involve own code, templates, and Wordpress.

    Wordpress isn’t what is was 10 years ago. Most people think of blogs. But with the many plug-ins and themes (29,000 to be exact) that can be added to Wordpress site, you can remove any resemblance of Wordpress from your Wordpress site. And to my surprised belief, 1 in 10 websites you have been to are probably some type of Wordpress site.

    Design should be broken down into 2 parts:

    Front-end: This is what the users sees. You want the front-end design to be appealing with the write mix of text and graphics. The content should match your target audience. There should be a simple flow to the information on your website. More effort should be focused on the user friendliness of the home page as this page will be used as your template / theme for all other pages in your website. Too much content on the homepage has the potential of scary the website visitor away before they get to the main content of your site. So the homepage is a very important starting place.

    Back-end: This is the mechanics of your website. This can includes the code used on html or php pages, databases, java scripts, and support files such as software downloads, videos, and images. Website visitors do not necessarily see these component directly, but indirectly. The optimization section below explains more on this topic. If the back-end is not designed well or optimized your web site visitors will experience slow website performance, not ever find you in the search engines, or even error messages.

    There are many ways to accomplish the front-end design of your website. It’s really a matter of what your are most comfortable with and your technical experience. With the right tools even someone with zero experience in web design can build a website. Always keep in mind the users experience with your website. For me if i cannot find the information I am looking for or information that catches my interest in the first 8 seconds of seeing your website, I am probably going to click the back button and choose the next website on the search results.

  • Basic Optimization

    Optimization for many is a after thought, but is a necessary evil when you find page load times for DSL or mobile users is slow or Google doesn’t index your website properly, or you never find your website on any type of search results.

    There are 4 types of optimization:
    Basic Website Optimization
    Mobile / Tablet / Desktop Optimization
    SEO - Search Engine Optimization
    SMO - Social Media Optimization

    For the scope of this topic I will be limiting it to basic optimization. More on SEO and SMO in the SEO / SEM section.

    My Image

    Below are my tips for general optimization:

    • Any individual images that are over 150kb in size should be consider needing additional compression or changing the file type to and from jpg to gif or gif to jpg. Do not use tiff or bmp files on your website. PNG file have their purpose of you understand when to use them, in particular images which need to maintain transparency are sometimes smaller in file size then transparent gifs.
    • Vector graphics are ideal due to them being the same file size no mater how big or small they are on a page.
    • Remove orphaned or unused files from your website directories. Leaving things like this behind can become a nightmare a year from now. If you must keep the files create a archive folder for all your non-production content. This will keep your main directory structure clean and relevant to the current content that is needed.
    • Always try to develop the header and footer of your website in the CSS or page includes of your website. Otherwise you will have to update every single page in your website when your navigation bar, logo, or footer changes.
    • Confirm browser compatibility. In particular, make sure layout and forms work properly on Internet Explorer, Firefox, Chrome, and Safari
    • Confirm mobile and tablet compatibility. In particular, make sure layout and navigation works properly on iPhone, iPage, Android Phone, Android Tablet.
    • Meta tags are very important for search engines. There are 3 main meta tags are a very easy to write. At a minimum you should have Meta Title, Meta Description, Meta Keyword. Meta keywords is optional is the more popular search engines no longer use them. Meta tags are very easy to create, but you can create them online to get a sample at SEO Book.
    • A sitemap.xml tells the search engines all the pages your want to be indexed , their update interval. Although the search engines can index your website without a sitemap.xml file, Google has preference of this file and it has become best SEO practice. If you do not know how to create a sitemap.xml go to XML-Sitemaps to generate a sitemap online. Once you have downloaded place the file in the root of your website (same place as homepage).
    • A robots.txt file tells the search engines what to index and what to not index. This is a very simple file to create, and at the minimum your should have User-Agent: * . There are many logical reason to disallow content from being index, such as cgi or archive directories and anything that is not ready for primetime such as drafts or development work. Your can generate a robots.txt file online at SEO Book.
    • Image ALT tags tell the search engines what the image represents and they tell the user what the image is if graphics fails to load. graphic links can be difficult for search engines to interpret, were as using alt tags for all images insures that search engines know what the image represents. This is always best practice
    • Proper use of H1 and H2 headings. Every page should have 1 H1 header tag and multiple H2 header tags. This tells the search engines what the main topic is and what the sub topics are.
    • Minified CSS and Javascript - This is referring to consolidate the code used in your Javascripts and / or cascading style sheets. Due to all the possibilities on this topic your best bet is to use a generator to minimize it. For CSS goto Clean CSS and for Java goto Refresh-SF.
    • Once I have done all the above then I run my website through the following free test. I use this as my confirmation that all the basic optimization steps that I have taken are in effect and will show other potential issue before I start doing my SEO optimization
    • Test your website at http://www.webpagetest.org

    Once I believe I am done with all the tips / steps above, I use Screaming Frog SEO Spider to analyze and confirm all my pages are complete, with no duplicate titles, meta descriptions, meta keywords, H1 titles, and alt tags are in place. The free version of Screaming Frog works fine for me, the only drawback is you cannot save, so you have to scan your site every time. This tool also creates very good sitemaps.

    Basic optimization is not only optimization your websites performance, but also the very beginning steps to SEO. Without the basic optimization steps your SEO efforts will not be as successful. And the same goes for SEO, both steps are essential to one another. Click on SEO-SEM for the next chapter in your journey.

© 2015 Yoursimple.com