I have a web app that is showing a lot of customers private information.
When I show the app in speeches and presentations, I'm asked often to show the real and live app (give more confidence on the real use, has more users and real data than the demo etc). Because of the aforementioned privacy problem, this is something I'm not comfortable with.
Any idea?
it would be possible for example to change the default browser fonts with some "blurred" fonts?
Or any other smart idea that would not involve a huge global change in the application..
thanks
Related
I checked the pageinsights of "http://www.briddles.com/riddle/9-bodmas?l=333"
Most of these are thirdparty. How can i sove it ?
I see 3 important groups there:
Youtube
Google Ads or analytics
Facebook
Here is what I would do:
I see the youtube player is hidden by default, I would reserve some space for the player (maybe with a lightweight placeholder) and only append the iframe when the user clicks "view answer". This lite-youtube web component is awesome and might help you out. Trust me.
Normally Google ads is not something you want to get rid of. I would just make sure to load these scripts with the async attribute at least.
For the facebook comments I imagine 3 approaches:
3.1. Render a placeholder with a button saying "See comments" or something like that and only fetch the scripts when the user press that button.
3.2. Use the Intersection Observer API so when comments section scroll into view, fetch de scripts and render. (You will have to reserve some space to avoid CLS).
3.3. Remove the comments section (if there is almost no usage) or use a different provider that is optimized for web vitals. I don't know which one, but it's still an option.
Extra recommendations:
The main image is too heavy for mobile users, try to use a responsive image, compress the image and choose a lighter format like webp for browsers that support it. More info about image optimization here.
Reduce the amount of fonts you use and, if possible, host it by yourself and use a CDN. Google fonts is practical but to host your fonts is better for performance.
I am developing a responsive website. For each and every change I made in javascript, css & html file, I need to test it in all possible screen size in portrait and landscape mode. Normally we used to test it in 3 to 5 different browser window size, and in portrait & landscape. I felt changing screensize and orientation again and again is a tedious job. So planned to write a tool, which will open multiple browser windows in a different screen size with the given url loaded in it. Any idea, or advice how to start this?
PS. If you are voting for deleting this question, please consider commenting with some suggestion how I can start, or is there any free tool available for this.
Thanks in advance.
There are number of great tools and services for helping test a website in just about every possible OS/browser/size these days.
BrowserStack.com allows you to pull up your website on nearly every combination of OS/browser/size and use the site to see how elements and features perform. There are other many other services that do this.
Another option would be a browser extension/plugin like Chrome's Window Resizer. It allows you to quickly toggle between common (and custom) window sizes. This is the most manual of the three options here, and the only free option.
One final option is Adobe's Edge Inspect. This app allows you to connect several devices to your computer and simultaneously browse a site across each of the devices. It also allows you to remote inspection on each of the connected devices.
Tools like Selenium can drive browsers and resize them as needed. Depending on the language of your choice, google for something like: selenium resize browser (language of your choice)
I know that Apple products like the iPad or the iPhone have trouble with flash apps.
What web development tools should I use in order to avoid compatibility issues when creating a website? My only constraint is that the languages must provide for interactivity and animation - such as in jQuery.
HTML, CSS, and PHP are a few that I can think of that will behave on 99% of all internet enabled devices.
What tools & languages are available to use when creating a website intended to be viewed on any device's internet "explorer"?
Should I just stick to HTML, CSS, & PHP? I want a certain level of interactivity so that, for example, a user can hover over images and have pop-ups containing data to appear... or when an object is clicked, an action can happen without a page reload.
Can someone point me in the right direction and help me develop a list of languages that are all-device friendly?
I am familiar with programming in several web-focused languages, I'm just wondering which ones to stay away from. Certain ones will limit the devices that can view the site and besides that constraint, the site needs to be interactive and animated.
HTML, CSS, PHP, JQUERY are truly your best bet for developing for a wide range of devices. If the scope of devices is the main goal I would stay away from using HTML5 and CSS3. You still may run into problems using much jquery with IE7 below. Mobile browsers on the other hand are much more advanced or up to date with standards then desktop browsers. I would suggest creating two versions of your application. One dedicated to running on mobile devices and one for desktop browsers. It is a shame apple wouldn't support flash applications. If all you need is hoovers for interaction you won't even need jquery / but for the other it will be useful.
The "Web" is a name for the concept of having interlinked documents accessible over the internet. Therefore, to have a website you really only need a document able to link to other documents, namely HTML.
HTML is not really a programming language or a tool though, it is a document format.
If you want to make a website you need use HTML to Markup what you're writing. Then you use CSS to format different sections of the document you marked up.
PHP though, is completely separate from this, PHP is for creating dynamic HTML, or any document on the server side.
If you want to achieve a flash-effect on a site you use Javascript to modify the page content (HTML) and appearance (CSS).
If you need to learn HTML/CSS I would highly recommend http://htmldog.com/
As per the question, HTML CSS and Javascript are pretty much the only mobile-browser compatible method for website content as they don't need plugins.
What exactly are you trying to do?
I am developing a site that is tested only in Firefox and IE. Now I need to make the site accessible from mobile also.
So I need to know whether I need to calculate the time needed to shift the site. Is this created as a new application or the same application is modified?
When accessing stackoverflow.com from my mobile the design is entire changed. How is this done? Is it a separate application?
Thanks
Whether or not you need to create a new application for mobile depends on the site you have. The website at my workplace could not possibly fit on a mobile phone screen (too many frames), but other sites that have a more adjustment-friendly layout might just need a little tweak.
I would test your site on a mobile browser emulator, there are a bunch of them listed on this site.
Also, you might consider switching your firefox's user agent (here) so you can browse popular site's mobile versions, along with the source they used to lay it out.
Usually different CSS templates chosen using UA string matching. My phone has a fairly fully enabled web browser on it, so I get the whole of stackoverflow the same.
Some phone browser may also "mobile optimise" the layout, or in the case of opera mini, it does it on opera's proxy server and then sends modified data to the phone.
Javascript support is more of a problem, expect it to be minimal in most cases, although it is getting better.
We are programming a web application (not 'just' a web site, but functionality-wise a real application), and have the following discussion for the next release:
our UI designer wants to replace the browser's right-click context menu (showing our own menu where appropriate, or no menu at all) because he wants the web app to be more like our (existing) Windows app
our developers (and I) strongly object because this is bad practice, and simply something you do not do in a web application
Thus, I'm looking for "more solid" arguments - like best practice guidelines, any statements from reputable sources, coding arguments etc. - for the pros and cons of this issue, which I can hopefully use to resolve it once and for all...
You can't do that reliably anyway. In Firefox, go to Settings, Contents, JavaScript/Advanced (I'm guessing the captions, no English Firefox (; ) to override context menu behaviour and bang, your app doesn't work anymore. My online-banking application did this in their old version, so I couldn't do copy & paste with the mouse. I hated it, so I enabled the protection in Firefox and it worked. Kind of. Their new version doesn't do such bad things anymore.
Instead, use a little drop-down arrow where a context menu is needed, that can either be clicked or just hovered over to show the menu. JetBrains' TeamCity web app does that very well.
If your application is to run in an intranet, maybe the UI designer arguments are valid: as long as all of the users of the application are well known and you want to emulate some Windows application, I think it's ok to restrict the right-click or any other input, because it's just the requirements of this application, as it would be to any other app.
But if your application is to run in the internet, disabling or replacing right-click is a very bad idea, and these are only some of the arguments I reminded of:
First of all, changing the behavior of the user interface is aggressive and annoying -- no one wants to get used to "new controls" just to access your site, and generally people hate to leave their comfort area. I mean, I know what my right click does and I want it to do always the same thing.
People can understand the difference between Windows apps and web apps, so there's no need to "emulate Windows app behavior".
Not everyone uses Windows :-)
Also, this is innefective, sice there are several ways to overwrite this behavior, such as settings in Firefox or even plugins that disable specific javascript instructions, such as this one.
depending on your audience you stand a very good chance your users do not even KNOW there's a right click menu. So please don't make this the only alternative
I personally believe you should leave browser's default behaviors alone... users are used to them, so no need to get them used to your way of doing things.
However, if you're building an intranet (instead of a public site), then I'm for tweaking as much as possible to improve usability.
An argument I would use (in quotes for dramatic effect):
Lack of consistency & reduced
functionality compared to other
unhindered web interfaces will lead to
a loss of user confidence - which
is undesirable to say the least.
Of course, if many or most of the web application users are already familiar with or regular users of the Windows app, the UI designer could be on the right track and the consistency with the Windows app could be a winner.
That said, in my opinion it's hard to make a custom context-menu within a web page intuitive, and while some users might warm to it, I'm guessing most will probably never use it.
because he wants the web app to be more like our (existing) Windows app
I think right-click in a Windows app is a bad idea.
In a web browser it's a UI disaster because nobody will be expecting it.
I think it depends on whether you perceive the context-menu as part of the browsers chrome or not. If you do (and I ascribe to this view), then it should be off target, but otherwise it is a good place for adding some usability to your application.
Replacing the browser right-click context menu for specific areas of your GUI from your web application can be quite useful. Doing this just to disable the context menu will annoy your users, who may try to find a way around it. Also, removing or replacing the browser right-click context menu from the entire area of your application will usually be annoying and can make it more difficult to debug.
Unfortunately, I cannot offer any more solid arguments, and I'm not exactly taking either side of the argument, but I thought I would share my experience both as a developer of a web application and as a web user.