UI/UX

Our Clients

Our clients are individuals or Digital Agencies like ourselves who seek to collaborate with Accura–Tech in order to work on multiple projects.

Types of Sites

  • Build a new site
  • Restructure the existing site
  • Copy the existing site into a new platform without any differences
  • Modify the content and theme using an already developed template
  • Integrate one or a few sections into an existing site

Our Clients

Our clients are individuals or Digital Agencies like ourselves who seek to collaborate with Accura–Tech in order to work on multiple projects.

Types of Sites

  • Build a new site
  • Restructure the existing site
  • Copy the existing site into a new platform without any differences
  • Modify the content and theme using an already developed template
  • Integrate one or a few sections into an existing site
What we communicate

In order to deliver a high-quality product, understanding the project scope, and collaboration between Accura-Tech and the Client Digital Agency is very important.

  • Clarifications of client requirements
  • Technical limitations
  • Gather 100% scope
  • Technology preferences
  • Developer suggestions
  • Design issues
  • Technical support
Development progress of the projects

In order to deliver a high-quality product, understanding the project scope, and collaboration between Accura-Tech and the Client Digital Agency is very important.

  • The Project Manager in the Client Digital Agency will meet the Client and collect all the relevant information.
  • Their designers will prepare the design concept (PSD) for the website if a new design is required or else a readymade template can be used for a quick turnaround.
  • The Client Digital Agency Project Manager will create a case with all the relevant details using the Project Management Tool used to share the project details.
  • Accura-Tech developers will plan the structure of the site according to the designs and the project details provided.
  • After clarifying the requirements, the developers of Accura-Tech begin building the site.
Technologies

If the client doesn’t requires a CMS, we will do the development based on a framework such as Bootstrap.

  • We use CSS preprocessors such as LESS and SASS in order to create CSS codes.
  • We use ‘WinLess’ as a tool for compiling LESS codes.
  • Based on the client requirements, we develop websites by only using CSS or including JavaScript and JQuery. High site performance (Less load time) is one of the main reasons for clients to choose this option.
  • By using JavaScript and JQuery, we can develop the websites to be more dynamic and interactive.
  • We currently use CSS3 for the styling and HTML5 for markup.
  • As per the client requirements, we can use any modern technology, which is more suitable for the development.
  • Use of relative font sizes in CSS codes (e.g. 1.5em)
  • Writing CSS selectors according to the common order (e.g.: position, width, margin, padding, color, etc.). This will improve the readability of the code.
  • Optimizing the code for performance improvement. This includes reducing the lines of codes.
  • Optimizing images to reduce the loading time of the site.
  • Following W3C standards.
  • Minimizing accessibility issues for users.
Best practices
Links within the siteAlways include a “/” forward slash as part of the url when adding inks into block / page elements
Images within the siteKeep image file sizes as small as possible but optimised well
Text into the imagesOn the images, if possible include text into the images
Class of logged in / loggedDo not differentiate between the logged in / logged out states in the css, ie – adding a class of .logged-in, unless the design dictates or is absolutely necessary.
Floating left and Floating right used within the codeThis should only use used when you want an element to be to the left or right of another element. For example, when you want a block to sit next to another block.
Use ‘display: block;’ within the codeThe only time you should use ‘display: block;’ is when you want an inline element to act like a block element. One reason you may want to make an inline element act like a block is so you can apply widths, padding and other layout styles to it.
Repeated styles used within the code“For example, on the front page callouts, each anchor link is styled individually. This makes doing any changes take far longer. They should target the anchor link using a common class e.g. .front .callout .content a And then doing any unique styling afterwards”
WidthsRemove unnecessary widths from the code
Amount and quality of CSS
  • Simplify the CSS code
  • Use common classes
  • Use WinLess as a LESS compiler instead of Prepros
  • Structure of the css. It should go
    • Element position (position, top, left, bottom, right, z-index, Float) in this order
    • Size (Width, height, margin, padding) in this order
    • Element Styles (border, background-image,background-color etc) in this order
    • Font styles (color, size, family, weight, style.)
    • Text styles (text-transform, text-indent)
    • Any CSS 3 styles.
Site Content
  • Do not add any font size declarations (as an example, font-size: xx-small; ) via the WYSIWYG
  • Images need to be styled through the css. But if this is not possible due to the nature of the legacy site’s design then adding in inline styles via the WYSIWYG.
  • Do not need to have any unused legacy css being unnecessarily carried across to the new platform
  • Use ALT attributes for all img tags
  • Use corect heading structure (H1 to H6)
Home page Welcome textThe homepage text should be added to the home page content. Page title should be H1.
Home pageThere should be H1 tag in the home page
Code/site configuration cleanup
  • Remove redundant/unnecessary code
  • Remove redundant/unnecessary site configuration
Heading HierarchyHeading Hierarchy structure should be:
  • H1-Head
    • H2-Head
      • H3-Head
      • H3-Head
    • H2-Head
      • H3-Head
    • H2-Head
  • Testing is based on the specification of the functionality of the component or system.
  • The functions are “what” the system does:
    • They are typically defined or described in work products such as a requirements specification, use cases, or a functional specification
    • They may be undocumented
    • Functional tests are based on both explicit and implicit features and functions
    • They may occur at all test levels, e.g. tests for components may be based on a component specification
  • Functional testing focuses on the external behavior of the software (black-box testing).
  • Layout of the new site is compared with the PSD design using pixel level compatibility to match every detail.
  • Font style, color and size are tested for readability and typeface specifications.
  • Validation of links and heading hierarchy to ensure that the specified sequence is followed.
  • Validation of hover effects on links and images.
  • Responsiveness to ensure that all the elements adjust according to the screen size.
  • Browser compatibility to ensure the site looks identical on the main browsers; IE, Chrome, Firefox and Safari.
  • Device compatibility to ensure that the site looks good on all major devices.
  • Accura-Tech uses a range of physical devices and online tools to perform these tests.
  • All mandatory fields should be validated and indicated by the asterisk (*) symbol.
  • All error messages should be displayed in the same CSS style (e.g. using red color).
  • Validation error messages should be displayed properly at the correct position.
  • General confirmation messages should be displayed using CSS style rather than error messages style.
  • Delete functionality for any record on page should ask for confirmation.
  • Amount values should be displayed with correct currency symbols.
  • Default page sorting should be provided.
  • Check cookies used in an application.
  • Check if downloadable files are pointing to the correct file paths.
  • Application crash or unavailable pages should be redirected to the error page.
  • All fields on the page (e.g. text box, radio options, dropdown lists) should be aligned properly.
  • Enough space should be provided between field labels, columns, rows, error messages, etc.
  • Scroll bars should be enabled only when necessary.
  • Font size, style, color for headlines, texts, labels, infield data, and grid info should be as specified in the SRS.
  • Pages for broken images.
  • Broken links.
  • All pages should have a title.
  • Uploaded image path.
  • Image upload functionality for image files with different extensions (e.g. JPEG, PNG, BMP etc.)
  • Image upload functionality with images having a space or any other allowed special character in the filename.
  • Duplicate name image upload.
  • Validate if user is able to use/view the uploaded images.
  • What: a document describing the scope, approach, resources and schedule of intended testing activities; identifies test items, the features to be tested, the testing tasks, who will do each task, and any risks requiring contingency planning.
  • Risk Analysis:
    • It helps us choose the best test techniques
    • It helps us define the extent of the testing to be carried out
    • The higher the risk, the more focus given
    • It allows for the prioritization of the testing
    • Attempts to find the critical defects as early as possible
    • Evaluate if there are any non-testing activities that can be employed to reduce risk?
      E.g. provide training to inexperienced personnel
  • What: a set of inputs, execution preconditions and expected outcomes developed for a particular objective, such as exercising a particular program path or verifying compliance with a specific requirement
  • Five required elements of a Test Case:
    • ID – unique identifier of a test case
    • Features to be tested / steps / input values – what you need to do
    • Expected result / output values – what you are supposed to get from the application
    • Actual result – what you really get from the application
    • Pass / Fail
Test Case Format
  • Once the site achieves our quality standards, the QA team will be taking the latest backup, and the beta website will be sent to the Project Manager.
  • The Project Manager of Client Digital Agency demonstrates the site to their Client and passes the Client’s feedback to Accura-Tech.
  • After the required changes are completed, the finalized website will be sent to the Project Manager of Client Digital Agency, and once the client is satisfied with the website, it will go live.
Test Case Format
  • Once the amendments have been received, they will be incorporated, and the website will be sent back for approval. This process will be repeated until the Client is perfectly happy with the website.
  • The website is launched and goes live for public interaction.
  • Throughout the project process, Accura-Tech will communicate with the Project Manager of Client Digital Agency using Project Management tools and other mentioned methods.