I am trying to create an amazon webstore and the interface is just appalling.
I have seen a few companies that have made really decent stores but have no idea how they have accomplished this using the interface amazon give you as they make it near on impossible to customise a single thing.
Could someone please shed a light on what it is I need to do to create a fully customised design for my store?
Thanks in advance.
I have had luck in creating a custom layout... functionality is where I'm stuck. It seems we are FORCED to use their widgets, etc... though you can change the look of them quite easily.
I made my way by using Google Chrome's inspect element tool (F12). I was able to find the CSS that drives the different widgets for width, height, etc. Also, I was able to write my own CSS for, say, the search widget.
Your question is about 1.5 months old... so I assume you may have learned your way by now.
If you have any questions, I'd be happy to assist with what I know.
Related
I'm new to Sketch and Flinto but have come up to speed after prototyping fully functional designs in HTML, CSS and JS.
Q: If you build a prototype with Sketch and Flinto, how can you export or save it so that others without Sketch can view it? Is that even possible?
PS: Additionally, where could I find a good online course (free or paid) about "Sketch 4 from srcatch for beginners"? I have looked and googled, and I purchased the Udemy course (but even though they say it's OK for beginners, they jump right in, making a lot of assumptions about knowing Sketch already.
There are a lot of ways to share your Sketch project, it depends if you want to share your prototype with the client or hand your deliverable to the developer.
I recommend using Invision, it is an online tool, you don't have to download any software, you just share your project with a link. With a free account it allows just one active project at a time, but if you want to upload a new project you can just store the old one. Invision is a great tool for both clients and developers, who can see the interactive prototype with transitions and animations, make comments, and view the code with inspector.
Another great tool for handing the deliverables to developers is Zeplin.
About Flinto, to share your prototypes you can record the preview window and share the mov/gif file, or you can share the flinto file to a phone and open it with the Flinto viewer app.
There are a lot of transitions that can be done with Sketch plus the plugin Craft, maybe you don't even need to use another tool like Flinto.
To learn about Sketch there are a lot of youtube channels I can recommend: Sketch Together, Joseph from LearnSketch.com, Jesse Showalter, CharliMarieTV, The Futur.
Hope this was useful! Keep on learning!
I want to make a web app that uses a UI similar to Google Keep. I want to be able to have chips of the same size that can be dynamically added/removed that expand into larger cards with more options. What kind of layout should I use in Polymer?
Here are some quick sketches of what I want to accomplish.
There's likely a number of ways you can go, probably best you just try some things & find the approach you like. To help get started I think some of the core-animated-pages demos would help. Here are a couple that you may be able to leverage to get sort of close to your design:
https://www.eecs.berkeley.edu/~gongliang13/polymer/polymer-tutorial-master/components/core-animated-pages/demos/grid.html
https://www.eecs.berkeley.edu/~gongliang13/polymer/polymer-tutorial-master/components/core-animated-pages/demos/music.html
I need to work with the 3d model of some places. Google Earth has the 3d building layer with "Gray Buildings" in it. This would be exactly what I would require. Is there any way to get the 3d models that are used? Is there a Google Earth API (other than the Javascript stuff)? (I'm working in .net) that would help?
Or is there at least a manual solution how I can get these models, say, into Sketchup?
Thanks a lot!
While there still isn't support for getting building geometry from Google's APIs, OpenStreetMaps does expose some data you can use. Check out this guide here:
http://wiki.flightgear.org/OpenStreetMap_buildings
Making a request like
http://overpass-api.de/api/xapi?way[bbox=-74.02037,40.69704,-73.96922,40.73971][building=*][#meta]
Will return an XML with building's base outlines and (in some cases) heights. You can use this info to extrude some very simple buildings: http://i.imgur.com/ayNPB.png
To fill in the missing height values (and they're missing on most buildings), I try to use the area of the building's footprint to determine how tall it might be compared to nearby buildings. Unfortunately, until Google is able to make their models public, this will have to do.
There is currently no way to download models from within Google Earth. Also, even is there was - extracting data is against the TOS. Many of the models come from government or private sources so there are issues with licencing the data as a whole. It is worth noting however that a lot of the models in Google Earth are located on the Sketch up 3dwarehouse so maybe you could get that data you want from there?
Also, to work with the javascript api from managed code you might want to check this control library I have put together. Whilst the controls themselves may not be applicable, the ideas behind them should get you under way. http://code.google.com/p/winforms-geplugin-control-library/ essentially there are a series of wrappers and helpers that let you seamlessly integrate the plugin into a winforms application.
You can also read more about Cities in 3d (the name of the project that developed the low-res building layer) here: http://sketchup.google.com/3dwh/citiesin3d/
The web site that we're writing needs to be "Accessible". The trouble is, while we understand the general conepts (semantic latout, alt text on images, light on Javascript, etc etc), we don't really have much knowledge of what screen reader products or other accessible browser are actually on the market and/or in general use, nor how to test against them.
So the questions are:
What products do we need to know about?
Would it be sensible (or even useful) to get hold of them to test against?
Are there any QA processes we should be looking at to assist us (we do a lot of automated browser testing [Selenium] to ensure we don't break anything for regular users; can we/should we do the same for screen readers?)
Thanks in advance for any tips.
See this question
As the question implies if you want good screen reading testing you either need to hire someone to do the testing for you that has a lot of screen reader experience or invest the time in having developers and or QA learn a screen reader well. To my knolidge there is nothing like Selenium that can simulate how a screen reader handles a website. FOr general info on accessibility see
http://www.w3.org/WAI/gettingstarted/
This appears to have a lot of good information and covers all kinds of accessibility, not just blindness.
For a list of tools to check html accessibility see
http://www.w3.org/WAI/ER/tools/complete.html
Although these tools will help they are not a substitute for screen reading testing. For a discussion of some of the problems with relying only on automated tools see
http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/automated-tools.shtml
In addition to Jared's answer: For the non screen reader visual accessibility testing, I've found that a simple and easily available test tool is a gray scale printer. This will let you know (roughly) if you have enough contrast for those who have a form of color blindness or other issues with contrast, etc and whether you've snuck any images in that are relying too much on color for information. It's not the be all and end all, but it's an easy first test.
Since you're already using Selenium to test your site, you can easily integrate something like Continuum, which can scan a page for accessibility concerns that would be noticeable by someone using assistive technologies, into your existing test framework. There's API documentation if you'd like to roll your own solution, or free Java and JavaScript sample projects on webaccessibility.com you can use for inspiration.
As others have noted, automated accessibility testing isn't going to catch everything as nothing compares to manual testing done by experts, but it's a good idea to do some kind of automated testing just to cover your bases, and there are a wealth of technologies out there these days that can help you do that very easily.
I have a pretty simple app on the web (written in Flex) which is very straightforward to use once it has data inside it. The steps to get data inside it are themselves also pretty simple, but not at all obvious to my audience when they first log into my app.
I have been wrestling with how to communicate the data setup process to my users without referring them to a separate help. I also don't want to clog my lovely, elegant UI (which has uniformly been praised for its clarity from my current users and matches their processes very well) with wizards, or worse still an annoying animated paperclip.
I have a very rich set of tools available for the web UI but I am looking for inspiration and wondered if anyone had experienced good web-based, intuitive, unobtrusive, genuinely helpful process/usage instructions embedded in an application and could point me to a link so I can take a look for myself.
Failing that anyone got any bright ideas? There are about 5 steps involved each one visiting a different page of the existing app to enter/upload data.
Have you taken a look at:
http://www.askthecssguy.com/2007/03/form_field_hints_with_css_and.html
I believe there is a jquery or prototype or mootools or whatever framework that goes a couple steps beyond the above and walks a user through what to do. My google-fu isn't coming through right now so I can't seem to find it.
You could display the links to the data setup pages in a small strip on your main page like this (pardon the ugliness - this is just a usability idea):
alt text http://www.freeimagehosting.net/uploads/052b13acb7.jpg
The steps they've already completed are greyed out (I assume they don't have to complete these steps in sequence). When they mouse over a step they get a brief description, and then full details when they click through to the actual step page. You could have descriptive icons for each step instead of hyperlinks, of course.